This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Writing a Component in JSX" Lesson
[00:00:00]
>> Brian Holt: What is JSX? JSX, at least for me, was the initial part that kind of scared me away from doing reaction. A lot of people, I think, are in a similar boat. We spent so long having JavaScript in our HTML, and dealing with that madness. If you've been developing JavaScript applications for long enough, I'm sure you'll have seen it, right?
[00:00:20] You''ll have like your HTML elements that will have JavaScript colon on click blah. And they'll have to be on a global scope. And it's just really, really messy. We spent a long time moving away from that paradigm, and now it feels kind of silly to go back or feels like going back to put HTML in our JavaScript.
[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:01] We're writing JavaScript to generate HTML. So we kinda have this translation layer in our brain going through. It's like, okay, I wanna make a div with a couple of h1 inside of it. And you're thinking about it that sense, right? And so you're taking your HTML, and you're translating that into JavaScript.
[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?
>> Brian Holt: So that's where we'll actually go into Pet.js first, and I'll show you but that's what JSX is. It's just JavaScript, there's nothing really added except this one feature of being able to basically write HTML that translates into this React.createElement calls, right?
[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:11] And what I'm gonna say is, I'm gonna return and I'm gonna put open parentheses. This parenthesis, this is just JavaScript. What it means we're going to continue writing code on the next line, right? If I just did this and I started like if you did return 5, like this.
[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.
[00:04:38]
>> 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:08]
>> Brian Holt: So now, it's going to take whatever's inside of props.name, and output that to the DOM. So in the first case, it's gonna be Luna, right? So that's what these curly braces mean, is it just means, inside of here, it's a JavaScript expression that's gonna be evaluated, right?
[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,
>> Brian Holt: Right, and this would work. Now the animal's name would be in upper case letters, right? So when I say JavaScript expression, I mean anything that could be on the right side of an equal, of an assignment, right?
[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.
[00:06:40]
>> 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.
[00:06:59]
>> Brian Holt: So going back to your question, attributes, the only one that's a little, well there's a couple of them that's a little bit different. The word class is a reserved word in JavaScript, right? So this one doesn't have a class but if you go over here to app.
[00:07:15] Class means these kind of classes, so you can't use class directly. So if I wanna have a class in here, I have to use the name of the JavaScript API, which is className.
>> 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:24] And so they wanted to take this to the PHP developers and say, hey, check out how you can write this. So they actually wrote this JSX layer to appease the PHP developers, and not really with any intention that JavaScript developers would end up using it. And then, when they actually went to propose that people started using it and really liked it.
[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.
[00:10:21]
>> [LAUGH]