This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "JSX" Lesson
[00:00:00]
>> So, so far we've been working with React without something called JSX. Which I'll say again, I don't know anyone today that ships production React code that doesn't use JSX, or really anyone that writes React. In fact almost every other React tutorial that I've seen starts with writing JSX because people don't know what happens with JSX.
[00:00:20] But I'd like starting with that, just so you understand precisely what JSX is and is not doing for you. So let's actually just go and rewrite a Pet using JSX. Let's take all this stuff away, and we're gonna open Pet.js. So right now we have Pet.js looking like this.
[00:00:50] I'm just gonna rewrite it underneath here, const Pet equals that, and return, and then it's a div, and inside of that div is an h2 with props.name and an h3, With props.animal. And an h3 of props.breed. Okay, and then I'm just gonna comment that out for a section so you can see, how I may have to take them props up there.
[00:01:37] These two things are exactly the same. Do exactly the same thing. This, when it gets thrown through Babel and Parcel, outputs this. So the reason why we went through this whole exercise is so that you understand JSX does not do very much for you, right? It's just taking these kind of HTML, XML ish things, and outputting that as JavaScript that a browser can understand.
[00:02:11] Cuz obviously the browser doesn't expect to get JSX in it, right? It doesn't speak HTML inside of the JavaScript engine. But this is so much easier to read than this, right? Because in reality, we're writing JavaScript here that imitates markup, right? We wanted to output divs and h2 at the end of the day.
[00:02:33] So we kinda have to go through this abstraction layer in our brain is like, okay, I'm trying to get JavaScript that's HTML, that's gonna be rendered out as HTML. It'd be nicer if you can just write the HTML directly and have your tools figure out exactly what that code looks like.
[00:02:51] So I imagine many of you might look at this and say l'm writing HTML, my JavaScript. We used to write JavaScript in HTML, and that was a bad idea. So why is this a good idea now? Valid question, writing JavaScript in your HTML was objectively a terrible idea, and I've done plenty of it in my career.
[00:03:06] And I'm not gonna talk about it. But the reason why I'm okay with this is just exactly what I was explaining to you before, is like you're writing JavaScript to imitate HTML. It's nice to just write the HTML directly. I find this 1,000% more readable than this. This is just really noisy and it requires a lot of mental interpretation to get to this.
[00:03:29] It's nice that I can just write this. So the nice thing here is you can say id = blah, right? And this will get transpiled to this being here id blah. So it really does just work and look like HTML. Okay, we did that. Let's pop over to App.js now, and let's rewrite this in JSX.
[00:04:13] So the first thing is gonna be a div. And inside of that div is an h1. And we'll leave off the id cuz we don't need it. Adopt Me, And then underneath that Adopt Me we have three pet components. It's gonna have a name= Luna, animal= dog, and breed= Havanese.
[00:04:49] And then I'm just gonna copy and paste that three times. This one is a Bird. Or sorry, it's a Pepper Bird Cockatiel. And this is Beam, who's a dog, who is a Wheaten Terrier. And then here I'll just comment all this stuff out. Now, this has to be all inside of a return statement.
[00:05:33] So I don't know how you feel about this, but the other one is a little bit more readable, and I feel like this is significantly more readable. Right? This just reads a lot better that I can see the div, and h1 and three pet components with props going down.
[00:05:57] So this is how you do our kind of custom component here, right? The user generated component here, Pet, that you and I made together. This is how you pass props down to it. It just looks like normal HTML, right? Like you say id equals something like that, right?
[00:06:14] You do the same thing to pass down props to our components that we've made. Questions about this? Make sense? Does it make sense why we use JSX now? Do we embrace the complexity of JSX? I know we had to go through a lot of work to get JSX, but now that we're here, our code just got so much more readable, and React gets a lot more fun to write.
[00:06:44] Why are you upset about Pet? That's right. It's the next thing I need to teach you. So one thing I'll tell you right now, eslint is currently failing. It's because eslint out of the box doesn't know how to understand React. So we're gonna have to give us some additional tools to understand React.
[00:07:10] Something else why we did all this stuff with Babel. If you've watched previous versions of this course or you've used React previously, you knew that you used to have to always require React wherever you were using JSX. That's actually not true anymore with the latest version of React.
[00:07:27] So we can actually delete this top line. Because now React, or sorry, Babel is smart enough that anywhere that it finds JSX, it's like, okay, you're gonna need React in here, so it imports it for you automatically. So just another really convenient feature here. We don't have to import React anymore where we're using JSX.
[00:07:48] Because we're not using React directly, we don't have to import it.