Complete Intro to React, v5 Converting to JSX

Transcript from the "Converting to JSX" Lesson

[00:00:00]
>> 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.
>> Brian Holt: Okay, so you're looking at this project right now, and you can see that this is gonna create a div with an h1 and two h2's inside of it, right? So we're writing JavaScript to mimic markup, right? So inside of your brain when you're thinking about okay, well, I need to have a div inside of that I need to have an h1 and h2.

[00:01:08] You have to think about the HTML that you want and then have to translate that in your brain to JavaScript that React can do, right? Wouldn't it be nice if we could just write the HTML that we wanted in the first place rather than having to have that translation layer in our brain?

[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?

[00:02:11]
>> 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.
>> Speaker 3: The other way is just to change the type in VS Code to JavaScript React from JavaScript. So on the bottom there it's says JavaScript, if you change it to JavaScript React.
>> Brian Holt: That'll work as well.

[00:03:26]
>> 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:03:53] I will personally tell you that I think this is far more readable, right? There's less code, it's less dense, there's not objects and quotes and things like that. But when React was first starting out, this was a big barrier for a lot of people. It was a big barrier because we took a long time getting JavaScript out of our HTML, and now we're putting HTML into our JavaScript, right?

[00:04:14] And that just feels wrong. But I'll tell you that this is better because it's not the same. Putting JavaScript inside of your HTML was a terrible idea, and whoever started doing that, they set us back like five years, if we're being totally honest, right? But whereas this, we're just writing the HTML that we actually want in the code.

[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.

[00:05:42]
>> 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?

[00:06:36] JavaScript does not have this ability, some other languages have multiple returns, but not JavaScript. So that's why React requires you to return one top level thing because that's what JavaScript can do. Now there is a way to accomplish this which we'll get to later which are called fragments, but you return one top-level fragment which encapsulates two things, does that make sense

[00:07:01]
>> 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.