This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "JSX" Lesson
>> 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: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.