Complete Intro to React, v2 (feat. Router v4 and Redux) JSX

Transcript from the "JSX" Lesson

[00:00:00]
>> Brian: So, JSX. To this point, we have been writing just vanilla JavaScript with React and that is sufficient. That will get you as far as you want to go. So why do we actually have JSX? Well, I think it's actually interesting to talk a little about the history about JSX.

[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:38] They had HTML inside of their JavaScript, and they saw this compiled step that they have to go through to get it to actually work and people were like nope not touching that, right? They thought it was really gross and they thought it was a horrible idea, myself included.

[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:01:31] So I pushed through, tried it, ended up loving it. Ended up writing a big piece of our code in it. So, JSX it's HTML inside of your JavaScript. That's the simplest way to put it. The more correct it's XMLX syntax right? Basically, it makes it almost a new primitive for JavaScript.

[00:01:50] Everything else is 100% normal JavaScript, it just adds this little bit of HTML into your JavaScript flavor.
>> Brian: The reason why that actually ends up being okay, according to me, is that, as you saw, when we were writing our React without JSX. We're writing JavaScript code to mimic markup, right?

[00:02:11] So, if we're writing JavaScript code to mimic markup, wouldn't it be nice if we could just, right, mark up, right, and just skip that middle step? So you have less of that cognitive translation layer of going from okay, I want this mark up, now I have to translate that in my head to this JavaScript, which then ends up going back to the mark up, right.

[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.

[00:02:57] And they actually wrote JSX to mimic this particular market that they had at Facebook, and that ended up sticking and people ended up liking it. Despite the fact it was actually written for PHP developers and not necessarily for us, as JavaScript developers. Anyway, I thought that was an interesting caveat.

[00:03:16]
>> 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.

[00:04:58]
>> Brian: A common argument pointed at JSX is, we spent years and years and years trying to get JavaScript out of our HTML, why the hell are we putting HTML into our JavaScript, right? Which is a fair question to ask.
>> 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.

[00:06:02]
>> 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:29] It's saying like, this is a JavaScript expression, please output that here, right? If I took off these curly braces, it would literally print out the string, this.props.title, right? Does that make sense? So, by putting these curly braces on, you're saying, this is a JavaScript expression. Please return the output of this expression.

[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.

[00:07:24] And I wanted you to distinguish that they are different, right? The outer set means JavaScript expression, the inner set means JavaScript object. So that's why I separate those. It's just so it's very visually apparent to you that those are separate concepts going on.
>> 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.

[00:09:41]
>> [INAUDIBLE]
>> 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.