This course has been updated! We now recommend you take the Complete Intro to React, v7 course.
Transcript from the "Writing a Component in JSX" Lesson
[00:00:39] But let me tell you why this is kinda fundamentally different than the other way around. When I'm writing this application, I have here react.createelementdiv, right? What is this doing? What is this trying to mimic, right? Notice even the indentation that we have here is actually kind of mimicking HTML, right?
[00:01:19] It would be really great if we could just write HTML to begin with, right? If that's ultimately what we're trying to do, then why don't we just do that?
[00:01:45] That's all this is. So now because this is getting run through Parcel, Parcel's gonna translate our HTML looking stuff into React.createElement calls for us. So I wanna translate this Pet component into JSX. So first, I'm just going to comment this out, so I can kind of reference it.
[00:02:28] What do you think it's gonna return? Undefined, actually, right? Cause it's gonna end on this line. So actually, we go to the next line. Whereas if I did this, return 5 like this. Now it gets returned, the 5, right? Cuz it's gonna go over to the next line.
[00:02:47] So that's the same thing that we're gonna be doing here, except with JSX. The reason why we put this on another line, just makes it a lot easier to read, okay? So instead of having this React.createElement dive, all I'm gonna write is div, like that.
>> Brian Holt: Right?
>> Brian Holt: I think this is really cool.
[00:03:09] Now, I did not at the time, but now I think this is really cool. That we're writing this div, but let me demystify all of this for you. All this gets translated into is this, React.createElement div. You can actually go look at the code, and that's all it's getting translated to do.
[00:03:25] There's nothing magical here. There's no optimizations going on underneath the hood. It's literally just React.createElement calls, that's all JSX does. There's nothing more to this than that. So it's, people approach react and they thing that JSX is doing like more things from it, and it's really not. It's really understandable what's going on.
[00:03:47] It's just helpful to understand that we're just kind of taking a shortcut to make this code a little bit more readable. Yeah, Mark?
>> Speaker 2: Is Parcel doing the code transformation under the bodies?
>> Brian Holt: Yes, Parcel is already set up to do react transformations for you.
>> Brian Holt: The actual thing that's doing the co-transformation itself is Babel.
[00:04:11] Babel.js is actually doing the co-transformations. The Parcel already has Babel transformations built into it.
>> Brian Holt: If you wanna know how to set up Babel yourself just check out the previous version of this course, where we actually go through all of the Babel parts with this, okay? So we have div, right, and then inside of that, we wanna have an h1.
>> Brian Holt: And inside of it, I wanna have props.name. But I can't just put props.name like this, Why? Because this is literally going to output the string props.name to the DOM, which is not what we're looking for. We want the value of what's inside of props.name.
>> Brian Holt: So what I'm gonna do is I'm gonna take props.name, and I'm going to wrap it in curly braces.
[00:05:25] And then whatever it evaluates to you're gonna output that to the DOM. So for example, I totally could put in here toUpperCase,
[00:05:49] So anything that can be on the right side of this can be put inside of these curly braces. Make sense? Cool.
>> Speaker 2: How do you put attributes on that tag?
>> Brian Holt: Here on the div tag?
>> Speaker 2: Or on the h1 or ids, or anything.
>> Brian Holt: Just like normal old HTML.
[00:06:21] So again, it's related to be in here, right? It's part of the object, right? It's really just feels like writing HTML, it feels very familiar. Yeah?
>> Speaker 2: So I am seeing both on my screen and yours, that ESLint is getting mad at React, because React is never being called.
>> Brian Holt: Yup.
>> Speaker 2: Is there something we should be telling JS or ESLint?
>> Brian Holt: We'll fix it here in a sec. You're getting ahead of me, man.
>> Speaker 2: Sorry.
>> Brian Holt: [LAUGH] No [INAUDIBLE] Yeah, so React is upset now because React doesn't seem like it's getting called anywhere. We have to inform ESLint of how to do that and we'll do that here in just a second.
>> Brian Holt: Right, there's a couple of them like that. The other one is for, if you're using labels, for is obviously for loops, right?
[00:07:40] So they call it htmlFor, there's a couple of them. They're fewer and far between. The most, quote, unquote, annoying one is className. But just so you know, to show you something, inspect element, console. All right, x is this h2 right here on the page. If I wanna get the name of the classes on that particular thing, it's x.className.
[00:08:10] So their not making things up here, that is the name of the API. Which doesn't have any classes. Just so you know, that's where a className comes from.
>> Brian Holt: Okay,
>> Brian Holt: So we'll get rid of that id up here, otherwise it's all the same.
>> Brian Holt: Let's finish translating this out, we'll have props.animal, I can spell, and then we'll do props.breed.
[00:08:48] Then notice, I'm not really caring too much about formatting, cuz whenever I save, it just fixes all the formatting for me.
>> Brian Holt: And there you go, we have successfully translated this from being in create element calls to being in JSX.
>> Brian Holt: Hopefully, that it makes sense, the reason why we do it.
[00:09:08] The story of how it came about is actually quite funny. When the React team is trying to propose this, that they use this at Facebook. This new technology that they've built at the time they're using, and I think they still use this PHP variant called XHP for their templating.
[00:09:40] And so they kind of accidentally invented this JSX thing that people like. So that's how we got JSX.
>> Brian Holt: You don't have to use JSX. You're more than welcome to stick with createElement calls. Anymore, I don't know anyone that does. Everyone that I know that writes React full time ends up using JSX.
[00:10:02] As you can see, that's just a lot easier to read, right? div, h1, h2, h2, i reads like HTML, and that's ultimately what you're generating. So to me, it makes sense to use JSX. But now you know how to write it without JSX. So you're welcome to make your own decision just choose JSX.