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]
>> Brian Holt: So let's keep going, the last thing we did was we did this ESLint ignore to make sure that we don't get all these crazy errors. Let me run yarn lint, everything should be good now. I pushed up v3-2 I believe, yep, I did. So that should be good as well.
[00:00:23]
>> Brian Holt: Yeah, yeah, that's fine.
>> Brian Holt: So up to this point, we have been writing just plain Vanilla JavaScript in our ClientApp.jsx.
>> Brian Holt: And we are gonna take this a step further now. So let's see, let's get this back to where it was. Function,
>> Brian Holt: So now we're gonna start writing this in terms of JSX instead of using Vanilla React.
[00:00:59] So let's go ahead and refactor MyTitle first.
>> Brian Holt: Yeah, let's do that.
>> Brian Holt: So what we're gonna do here,
>> Brian Holt: Is instead of having all this ce stuff, actually you can just comment that out for a second. And we're gonna say return <div,
>> Brian Holt: And,
>> Brian Holt: Then inside of that we're going to put an h1,
[00:01:44]
>> Brian Holt: With props.title inside of it,
>> Brian Holt: Okay? And then we'll get to the style here momentarily. But you can see here, this looks a little peculiar. This isn’t a string or anything. This is actually writing HTML directly into our JavaScript. This is JSX. This is what I keep referring to as JSX.
[00:02:16] So basically all JSX is gonna do for you, it doesn't extend JavaScript at all other than adding this XML like syntax into JavaScript. So we get to write basically the HTML that we want to show up. We just get to write that directly. The reason why this arose is if you look at this, when we're doing the ce syntax, this createElement syntax, we're writing code that mimics our markup, right?
[00:02:45] So if you're writing code that mimics your markup, wouldn't it be nice if you could just write the markup and not have to mimic it? That's kind of the general gist here is we're writing the actual markup instead of writing the code that's going to mimic the markup.
[00:03:03]
>> Brian Holt: So you put in a div, right? This is just putting out literally a div text and this is getting compiled to the ce div, right? So there's no real magic happening here. All this is going to end up being is pretty much this, right? That's all it's getting compiled out here.
[00:03:25]
>> Brian Holt: Now you might ask, but look, okay, what about these curly braces? Well, if I don't put these curly braces in, it's going to literally output the string props.title, right? Literally the string props.title. And we don't want that, we want it to put in what is inside of props.title, what does it represents?
[00:03:44] So the way you do that with JSX is you just put curly braces. That's just saying, inside of here is a JavaScript expression, and I want you to output that.
>> Brian Holt: So I could put toUpperCase here, right? And that would work. So anything that can basically be on the right side of an equals sign, works here.
[00:04:12]
>> Brian Holt: Okay, make sense?
>> Brian Holt: So let's go ahead and bring in the style as well. So what we do there, is we say, style,
>> Brian Holt: Okay? So this works the same way. We're gonna put curly braces here, right? And that's gonna represent some sort of expression that's gonna be going on inside of there.
[00:04:37] Now, let's just say const style = color: props.color. It's gonna look something like that. And then we can put style right there, so this corresponds to that, right?
>> Brian Holt: Good so far?
>> Brian Holt: Now the question you might ask me is why can't we just put this straight in there?
[00:05:07] Well, you can. The reason why I show you this first is cuz people get really weirded out by seeing curly braces next to each other, right? They think that the double curly brace means something, and it doesn’t, right? The outer curly brace means that it’s an expression. The inner curly braces means JavaScript object.
[00:05:29] So that's why I wanted to show you first that you can just put style like that. But I'm gonna leave it as the object there and get rid of this.
>> Brian Holt: So now, this return right here, and this return right here equivalent to the point that actually this is getting trans-piled to pretty much literally be this.
[00:06:01]
>> Brian Holt: Any questions about JSX so far?
>> Brian Holt: Makes sense?
>> Brian Holt: Okay?
>> Brian Holt: So this will work as is you can technically mix JSX with not JSX. Cant see why you would but it works, I promise.
>> Brian Holt: We're getting some linting errors which we will address later, don't worry about them for now.
[00:06:31]
>> Brian Holt: Okay, and what we're gonna do here is change this to be.
>> Brian Holt: So let's do this.
>> Brian Holt: I'm gonna do, div id="my-first-component".
>> Brian Holt: Something else that bears mentioning. So you see how this begins and ends with a parenthesis. The reason why we do that is it just makes it appear a little bit nicer, it makes the spacing more present.
[00:07:11] If you don't put the parenthesis there, this return thing's it's ended cuz there's a hard return there and so it doesn't actually carry on to the next line to finish the expression. So you put the parenthesis there to let JavaScript know, hey, I'm not done yet, you need to go to the next line, right?
[00:07:30] Does that make sense? But just so you know, this is just as valid.
>> Brian Holt: Just looks really weird, right?
>> Brian Holt: In fact, I think if you, no, Prettier let it stand. Sometimes Prettier will just fix that for you.
>> Brian Holt: That's a nice thing. Prettier is a,
>> Brian Holt: JSX aware.
[00:08:07]
>> Brian Holt: Yeah, see how we have to finish working with this, okay? So we've finished div, and so now we're going to do these MyTitle components.
>> Brian Holt: Let's see, "Game of Thrones" color="YellowGreen
>> Brian Holt: Okay, and so this one was Stranger Things.
>> Brian Holt: This one was House of Cards,
>> Brian Holt: And this one was, I don't know, The Americans or something like that.
[00:09:05] GreenYellow, Peru, and how about burly wood? That's another good one.
>> Brian Holt: Okay.
>> Brian Holt: So something else you're gonna note here is MyTitle, we can treat it is as if it was like a real HTML element, right? Despite the fact that it's one that we've created. In React terms it's called the composite component, right?
[00:09:38] It's a component made up of other components.
>> Brian Holt: And we get to treat it as if it was a real HTML DOM thing, right? And we can give it attributes the same way, right? This one, we're giving it an id up here, right? This one, we're giving it a title here.
[00:09:56]
>> Brian Holt: Something else you might be tempted to do is to leave off the trailing slash because that's technically valid HTML. It's not valid JSX. So you have to have that closing slash if it's a self-closing tag.
>> Brian Holt: Same things for input, right?
>> Brian Holt: This is technically valid HTML, right?
[00:10:21] You don't actually have to have that self closing slash. For JSX, you must have it, just so you know.
>> Brian Holt: But what else is kind of fun about it, is anything can be self-closing. So if you need a self-closing div, you're free to do that.
>> Brian Holt: Any questions?
[00:10:45]
>> Brian Holt: Yeah.
>> Speaker 2: Doug was just asking if JSX was used anywhere else other than React and someone else chimed in that you can use JSX with Foo or Bue.
>> Brian Holt: Yep, so it definitely was invented for React. It was invented by the team of Facebook, to mimic their XHP, I think is what it's called, their internal PHP thing that they were using.
[00:11:11] And they invented it to mimic that, and then it just kinda stuck because people found it really useful. JSX has then since been separated from React. So JSX and React are not necessarily together. JSX is its own separate standard that React then uses. And so as has been pointed out, Bue is one of the places that it's being used.
[00:11:34] There's other things like Deco, Deco, I don't know how you say it. That one uses it as well, Preact uses it, like there is a bunch of different languages, it's available for any language to use.
>> Speaker 3: Why don't you need this onCreate element on this one?
>> Brian Holt: So why don't you need any react.create element, that's what it's getting trans-pilled to.
[00:11:57] So this h1, when it actually gets through being run through Babble will actually end up being React.createElement('h1', null, props.title).
>> Brian Holt: So this is pre Babble, this is post Babble, that make sense?
>> Speaker 2: Well, I guess the attribute in that case.
>> Brian Holt: Yeah, it'd be yeah. It would be this.
[00:12:32]
>> Brian Holt: Well, style, right? Whatever. So yes, there would be a style object in there.
>> Brian Holt: So we are getting some linting errors. It's asking for prop types. And to that I say, let's tackle that a little bit later.
>> Brian Holt: For now I'd like to move on, and then we'll come back to tackle the prop types conundrum.
[00:12:56] So where I say create element down here with MyFirstComponent. You can say, my-first-component like that.
>> Speaker 2: And remove the ce definition at the top?
>> Brian Holt: Yes, cuz now it gonna be erroring up there.
>> Speaker 4: We remove the React import as well?
>> Brian Holt: That's a good question. The answer to that question is anywhere you're using JSX, you have to import the React library because what is this getting trans-piled to?
[00:13:30] It's getting trans-piled to React.createElement, right? So it is being used despite the fact that you are not directly using it. Luckily you're linter, so if I remove this, it's gonna error out right here. And it says right here React must be in scope when using JSX.
>> Brian Holt: Good question.
[00:14:00]
>> Brian Holt: So a thing worth pointing out. This is only going to be true for a little bit longer, but it is true now nonetheless,
>> Brian Holt: We'll just do <h2>doesn't work.
>> Brian Holt: So this doesn't work. We can't have two top level returns, right? There needs to be one top level element for every single React component.
[00:14:30] Now why is that? Well, if you think about what this is being trans-piled to, it would be, MyTitle =ce(div), ce(h2), right? That doesn't make any sense in JavaScript, right? You can't have that be assigned to two things at once, so this doesn't work. However, With React 16, which we are on 15.5 right now, this will work.
[00:15:04] We will be able to return an array of top level components. And that will work with what's called React Fiber, which is the new architecture for React coming. It's kind of outside the scope of what we want to talk about today. But suffice to say, it is coming.
[00:15:20] And I really don't see it affecting too much the way I write code anyway. But eventually it will be possible.
>> Brian Holt: Cool, so what will happen typically if you have something like this, where you have two things that you wanna return as top level, you'll just wrap them both in a div, right?
[00:15:41] You'll see a lot of wrapping divs for that reason. Does that make sense? Do div,
>> Brian Holt: Right, that's typically the way you would handle that.
>> Brian Holt: So that kind of concludes what we wanted to talk about today with kind of our intro to React like bear bones, like actually just messing around with React itself.
[00:16:14] And now we're actually going to start building an app together which we will build for the rest of two and a half days that we have left together, right?