This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "JSX" Lesson
[00:00:18] So Facebook launched React and I'm trying to remember which conference was it. It wasn't at JS Conf it was like, I don't remember. Anyways conference they came out on stage like hey we have this great new framework library out. It's amazing and you all should try it. Here it is go take a look and people saw it.
[00:00:53] I watched this keynote and I was like man Pete Hutton get off the stage, what are you doing? This is embarrassing and horrible and why? You should feel bad about yourself and go take a shower, something like that. So anyway, he gave his talk, people just kind of dismissed it pretty quickly.
[00:01:11] And it took me about six months to finally revisit React. It was because an engineer came in from another company that was using a little bit of React on the side, and he's like, we should give this another shot. He's like, just push through the JSX hate and then just try it out.
[00:02:31] It'd be better if we could just write markup, and it just ends up being markup, that's the basic gist. Another funny part about that, which I forgot where I heard this. But the reason why JSX arose was not because they thought it was a great idea. But at Facebook they had a PHP variance that was very similar to JSX, that they were writing this kind of HTML like in PHP.
>> Brian: Cool. So let's actually go to mytitle.js, and we're going to convert this to JSX instead of this function call here. So, what we're gonna do, is we're gonna say, div, h1 style = style. We'll just do it this way.
>> Brian: Oops, come on.
>> Brian: And then we're gonna say this.props.title, okay?
[00:04:05] And then we need to go define our style, so we're gonna say const style = color: this.props.color.
>> Brian: Now like I said, most people's immediate reaction to this is, that looks really gross. Why do I want that? Understandable. It was definitely my first reaction, too. So that's an okay reaction to have.
[00:04:38] And I invite you to, at least for this workshop, to just push through it and if at at the end of this workshop you're not grateful for it then go ahead and don't do it. But like I said, no one I know that writes React besides this one guy at one company writes anything but JSX.
>> Brian: And this kinda goes back to my mashing together concerns idea.
[00:05:20] So now everything for MyTitle here, right? We have everything all together. We have the markup together. We could potentially have the style here together. But we have the markup and the behavior all mashed together here in one file. So if we ever have any problems with MyTitle, there's exactly one place to start looking for that problem, and that's here inside of MyTitle.
[00:05:41] And by just understanding what the bug is, knowing where to start, that's a very, very powerful debugging tool, right? Like I said with older versions of Angular, just by knowing what the bug is, you are no closer to really to finding the bug. So I find that to be a very powerful part of React.
>> Brian: And by extension JSX. Okay, so let's kind of break down what you are seeing here right, h1s and divs, right? This all looks familiar to anyone that's written any HTML before. Let's talk about these curly braces right here. This is basically the way that you signify to JSX like, I want you to put out whatever the value of this.props.title is, right?
[00:06:51] Like, so for example, I would say toUpperCase here, and call function, that would be totally acceptable.
>> Brian: Okay, style right. We're just putting this object here. Now you can put this down here and just skip this assignment step. The reason why I don't initially do that? Because people get confused by seeing the two curly braces next to each other.
>> Brian: Any questions so far?
[00:07:47] So if we save this and refresh here everything should always, except you have to run web pack again.
>> Brian: I left a period in there. That's pretty nice, too. It says hey, you screwed up right there, just so you know.
>> Brian: So I'm getting real sick of running webpack every single time.
[00:08:18] So you can just say webpack --watch. And it's just going to build it once. And then it's just going to incrementally rebuild it as you keep building. Another little trick, which I'll probably use later but you can say npm run build right? Which we know behind the scenes is going to be webpack, right?
[00:08:37] You're gonna actually say dash, dash which basically says, everything after this, passed directly to web pack --watch, right? So now I'm gonna run webpack --watch using the build step, right? So you can see here, this is what it actually ran, right here, webpack "--watch". Does that make sense?
[00:08:59] So, that's a very useful thing, so you can pass additional flags if you need to. Actually, we come back to your package.json. And let's actually just put that in there. So, you can saw "watch":. Now, you can do one of two things here, you can say webpack --watch, if you want to.
[00:09:19] Or you can say,
>> Brian: npm run build --. So it can actually be self-referential and that's okay. What's nice about this, if I add anything to webpack like say I had to add -p here, something like that, or something else that would automatically get translated to watch, which may or may not be helpful but.
>> Brian: Either way, I'm fine with you putting it either way.
>> Brian: So now I can come over here and say npm run watch.
>> Brian: And now we're good to go.