Complete Intro to React, v5 Converting to JSX
This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Converting to JSX" Lesson
>> Brian Holt: So we're going back to React, away from tooling for a while. So I'm just gonna leave my server running in the background here.
>> Brian Holt: Yeah, and then we'll keep going. So far, I've been showing you how to write React without any really transpilation or anything like that just raw React underneath the hood.
[00:00:22] But I wanna show you how to use this feature called JSX, because we're using parcel now we can use JSX, whereas we could not before because parcel was not running on our code. And parcel do transformations using a project called Babel, which is a really cool project. And that's just built into parcel, okay?
[00:00:40] So here we have, let's actually go do pet.js first.
[00:01:21] Well, that's what JSX is and like that is all JSX is. It's not anything else, there's not additional features beyond just what I just told you.
>> Brian Holt: So I'll comment this out for just a second just like this. And I want you to say return, and then I want you to write div like this, okay?
[00:01:43] And then inside of that div I want you to put an h1 and then inside of that h1, I want you to put curly braces like that and put name. Then an h2, and instead of curly braces inside of that, we could do animal. And inside of another h2, probably guessed breed, yeah?
>> Speaker 2: Are there any Emmit shortcuts for writing in JSX?
>> Brian Holt: There are, yeah, for sure. Do I have it, yeah, so
>> Brian Holt: I'm pretty sure the way you have to do that right now is,
>> Brian Holt: Let's just try it.
>> Brian Holt: Yeah, so if I change this to be .jsx, it would just work out of the box.
[00:02:43] There's a way to enable it for JS files, and I forgot how to do it. But so let's just talk for a second about why I'm not changing everything to be .jsx, the real reason I'm not doing that in teaching that too is because the React core team said that they don't think it's necessary, so I don't do it and that's it.
[00:03:03] But if you do changes it be .jsx you'll get some of that stuff for free.
>> Brian Holt: That'll work as well.
>> Speaker 3: That'll work as well.
>> Brian Holt: So now I can do h2 like that.
>> Brian Holt: There's a way to configure those .js files always have that available as well. But I'm sure if you Google it, it'll be the top stack overflow question. So we've now translated this to this and these are equivalent right now, right?
[00:04:37] And now I want you to know that this little div tag here, literally gets translated to this. If you go look at the transpiled output, right? So after this gets ran through Babble, everything here is just being translated into React.create.ElementCalls, right? So there's no mystery here. It's not doing any sort of black magic or optimization or anything like that.
[00:04:58] Literally what gets put it in the code is this,oops not that, this. That's why I have you write all this stuff first so you understand that this is all just React.createElementCalls, and there's nothing amiss here. Does that make sense?
>> Brian Holt: And I promise you, there's nothing else in JSX, this is really it.
[00:05:23] Anyone else have any questions, yeah?
>> Speaker 4: I have noticed that sometimes if you try to make multiple divs in your return and your JSX it yells at you and you need to have something to wrap it all.
>> Brian Holt: Yep.
>> Speaker 4: Is there specific reason? I mean, I understand the idea of returning only one thing but.
>> Brian Holt: I mean that's precisely it, right? So if I put like,
>> Brian Holt: If I put this here, right? It's gonna say, I don't know what to, adjacent JSX elements must be wrapped in enclosing tag, thanks, ESLint caught it for us, right? So let's talk about this for a second.
[00:06:01] What does this get translated to if I have this? Well, if I uncommented this it would be like having,
>> Brian Holt: React.createElement or contextElement, stop it element each h1 right, something like that.
>> Brian Holt: And this doesn't make any sense because you can't return two things, right? I can't say return 2, comma 5, right?
>> Brian Holt: All right, let's get rid of that. So if this still feels weird to you, a lot of people will still feel weird to, I would invite you to just finish the course with this. I will tell you that there's only one or two major holdouts of companies that didn't use JSX and now both of the big ones that I know of now use JSX, right?
[00:07:21] It's just everyone in the React community is JSX and people like it enough that even the Vue community some of them use JSX as well, right? So it's it's a pretty good pattern.