Check out a free preview of the full Complete Intro to React v4 course:
The "Writing the App in JSX" Lesson is part of the full, Complete Intro to React v4 course featured in this preview video. Here's what you'd learn in this lesson:

Convert the App component to using JSX. Reuse the Pet component in JSX and pass props to it.

Get Unlimited Access Now

Transcript from the "Writing the App in JSX" Lesson

[00:00:00]
>> Brian Holt: So we have all of these various things, and we're just gonna translate this.
>> Brian Holt: Okay, comment this out.
>> Brian Holt: And we're going to return.
>> Brian Holt: So it's gonna be a div.
>> Brian Holt: It's going to be an h1 with Adopt Me in it, because we literally want the string Adopt Me in there so we're going to put it right there.

[00:00:39]
>> Brian Holt: Okay, and now we want to use our Pet component, right, cuz that's the one that we built, so how do we do that with JSX?
>> Brian Holt: Well, notice I've been calling all these things with capital letters, and this isn't just a convention, it's actually required with JSX, right?

[00:00:57] Because if I put pet like this, it's actually going to literally try and put a pet tag under the DOM, which is not what we want, right?
>> Brian Holt: No, what we want is, we want capital P because this let's JSX know this is actually a composite component, a React component that I created and I want you to output, right?

[00:01:18] So you have to call your components what a capital first letter or Pascal case.
>> Brian Holt: So I have a Pet component, and now I need to pass some attributes into it. So I'm just gonna do it as if it was a normal sort of HTML tag, so this is gonna to be Luna.

[00:01:38]
>> Brian Holt: animal = "dog", and breed = "Havanese".
>> Brian Holt: Okay, now notice you've seen this before with a self closing tags or void tags right, like you have that slash angle bracket at the end. In HTML this is normally optional, right, you can have inputs without the closing slash, it is not optional in JSX.

[00:02:05] You must put the closing slash, and it just disambiguates this for JSX, that it doesn't have to do all this crazy checking. So, just always put that closing slash if it's a self closing tag, right?
>> Brian Holt: But, on the flip side, it is kind of useful, sometimes, you can do things like this.

[00:02:24]
>> Brian Holt: Whereas this would not be normal in HTML you can have self-closing div tags for example in JSX.
>> Brian Holt: That's up to you. All right, so I am going to make three of these and we will just modify them, this was "Pepper", "bird", "Cockatiel" and "Doink" the "cat" is "Mixed".

[00:02:54]
>> Brian Holt: And that is how you do composite components, or the components you made yourself, with React.
>> Brian Holt: So again, just to like kind of sell you a little bit more on JSX. I know at least some of you are still skeptical about this, look at this, this is five pretty concise lines that are really easy to read.

[00:03:14] Look how long this one was, it doesn't even technically fit in like one screen full. So it's just a little more compact and a little bit easier to read.
>> off screen male: With that return, where you're using in the parenthesis, can you return h1 with three pets now or do you have to return only one div?

[00:03:38]
>> Brian Holt: It's a good question. So, notice I have one top level div, right. Translate this in your head to be a React.createElement call right? I can't say return 1,5 right, this isn't Python, [LAUGH] right? You can only return one thing, that's how JavaScript works, and so that's why you have to wrap everything in this top level single div right?

[00:04:05] Now with React 16, the latest version, it is actually possible to return a multiple top-level things. And the way that you do that is if I wanted to do that instead of returning this wrapped in a div, I could say React.Fragment.
>> Brian Holt: And this'll actually return it as multiple top level things right, so you can actually have these fragments.

[00:04:36] With JSX 2, right now I'm showing you JSX 1, there's a new version of JSX coming, JSX 2, it'll actually be able to do this.
>> Brian Holt: And that'll be like the short hand for doing fragments. It's not possible now, React knows how to handle it, but Parcel doesn't know how to handle it, so we won't be doing that.

[00:05:00] But does that answer your question?
>> off screen male: Can we add that handleTitleClick to the h1?
>> Brian Holt: Yep, we'll get to that, good question, but I think the answer to that is probably how you suspected you would do it. You would say onClick = this.handleTitleClick.
>> Brian Holt: So notice we still use these curly braces because this is a JavaScript expression.

[00:05:31] We're binding this onClick event to this handleTitleClick.
>> Brian Holt: Something you'll commonly see with JSX, as you might imagine you start getting a lot of properties on some of these components and it starts to get really long. So a lot of times, Prettier will wrap this to look something like this.

[00:05:57]
>> Brian Holt: Again, not something you typically see with HTML, but in my opinion, this, especially if there's like 15 different ones rather than having that really dense single liner that this is a lot easier to read. Now, when I say this it's gonna go back to one line cuz Prettier says so, but.

[00:06:13]
>> Brian Holt: Last thing to change down here, we have React.createElement(App). I actually, if you look at the repo I never change this cuz I totally forget to.