Complete Intro to React, v7 JSX

Transcript from the "JSX" Lesson

[00:00:00]
>> The question is, do you need import React from react? The answer is no. But I'll show you that in just a second. So we went through all the JS Tools, and we're now pretty set up to get going and off to the races with our now build step.

[00:00:16] We don't have to do too much with setting up tooling anymore. So basically what we did here is we more or less set up our own Create React App environment. What we did is basically what Create React App does for you it has a little bit more we haven't set up TypeScript.

[00:00:32] Nothing really needs to do much more for that. We didn't set up testing, but JS is pretty easy to set up. And again, both of those are an intermediate react if you want to learn them anyway. Suffice to say that's more or less what Create React App does for you.

[00:00:49] But now you know what it does for you instead of being some mystery, Okay so let's hop into JSX here. Again there's a kind of a cut point here that you can go to at the Enter browsers list you can go to this 02-js-tools. And then I'll take you to like the state of the world now which is like all the build tools are now set up.

[00:01:14] So far we've been writing react without any sort of build step, right, we've just been writing it directly with React.Createelement. Let me tell you that I'm gonna say most, I will I want to say like 95% but let's just go with most react developers don't even know that React.createElement is a API.

[00:01:32] They probably never heard of it before. That's because you're never gonna write it again after I show you JSX. Because JSX basically takes, HTML and translate it into these React.createElement calls you just don't never have to worry about. So let me show you what I'm talking about. Let's start with pet because like pets really a simple component, right?

[00:01:56] There's not a lot to this. So, to the former question that was asked, do you need to import React from react here? It used to be before the most recent version of the React JSX transform from Babel. That any word that you wrote JSX you had to import react from react even if you weren't explicitly using it, because the code that we're about to write with JSX would translate to this code, right?

[00:02:30] We're going to rewrite this in JSX. You won't see react anywhere anymore, but you used to have to have it there. Now it's smart enough to say like okay if you're using JSX here I'm gonna important now. So you can actually drop line one here but just know underneath the hood it actually is still there it's just being put in there by your tools instead of having to do it yourself.

[00:02:49] I'm just going to comment this out so you can kind of see what it looks like when we rewrite it but we're going to rewrite this in JSX. So const Pet = props is the function here. So let's talk about this for a second. Here we are writing JavaScript and that JavaScript is imitating HTML, right?

[00:03:12] You're writing divs and inside of the divs there's an h1 and inside of the h1 there's a name right it's XML right. We're basically writing XML because HTML is XML, I know XML is like a triggering word for some of us present company included but that's what HTML is right.

[00:03:30] So if we're writing JavaScript to mimic HTML, wouldn't it be nice if we could just write HTML instead of having this translation in our brain from JavaScript? Well, basically, you think of HTML then you write JavaScript, which then outputs HTML. It'd be nice if we could just write HTML, and skip that middle a cognitive step.

[00:03:54] That is the point of JSX is it allows us to skip the middle cognitive step. So instead of writing this, I want you to say return. And we're gonna put a div here, just directly into our code. And then we're gonna put an h1 here. Gonna use curly braces to signify that like I want to output code here right so props.name.

[00:04:23] Props.animal. Props.breed these two things do exactly the same thing. Now let's kind of dissect let's talk about our feelings for a second. Like if you've been a developer as long as I have, we spent years and years, and years trying to get JavaScript out of our HTML. So why the hell are we sticking HTML into our JavaScript?

[00:04:58] Right seems like kind of a an inversion of what we were trying to like back from the prototype and Moodle tools and previous times to that, right. You just put your OnClickListener directly in HTML and it was a mess. So, why are we doing this in kind of in reverse?

[00:05:14] And it's just exactly, what I'm telling you right now that, it allows us to kind of skip that cognitive overhead. This gets translated to this precisely. If you go look to the compiled code, I don't think it looks any different from this. It might actually literally be precisely this.

[00:05:26] It just makes everything more readable, and more obvious, and there's no magic here. JSX is not doing anything more than this. It's just a thin layer of sugar on top of it. I wanna give you one more kind of high sort of kinda concept about how to write React.

[00:05:46] If you've ever written things like backbone, it's like the principal one that I can think of, we used to have this model and view and controller. And if you've ever written things like Django or rails or something like that it's a very common practice. When I was starting writing HTML code, we basically just shoved everything about all of our JavaScript and our HTML and CSS all together in one file.

[00:06:09] And they were giant messes and they were like 900 lines, and it was spaghetti code and was really difficult to pull apart. And so some wise people that created Backbone came along and said, hey, this works really well on the server to have this Model View Controller. Let's pull everything apart and put them into different areas and that's how we're gonna write our JavaScript code.

[00:06:29] And so they did that for a while so that Backbone came out. Marionette was on top of that, that made it a lot nicer to write backbone. We had angular, we had ember and those were kind of the, knockout was another good one as well. These kind of JavaScript frameworks that came along that adopted this kind of server side paradigm and it was better.

[00:06:48] There was a big difference the problem with that when you had a like a bug and backbone you have to traverse a model of view, and a view controller to figure out what happened, right? You have to jump between a lot of files and go back and forth.

[00:07:03] So we were trying to separate concerns, right. That's the point of like, this does one thing, this does one thing, and this does one thing. And you really hope that if there's a problem with the data that it was with the model, that wasn't always true. It could have been with the view controller, it could have been with the view and how they were connected.

[00:07:18] And so the concerns were never separated and these are all their frameworks, right? It was always across multiple files, it was always difficult to pull apart. React kinda came along and they rethought this paradigm of, what if we're thinking about separation of control along the wrong axes, right?

[00:07:36] Instead of having trying to separate artificially these concerns that don't really exist in the browser, like we're not reading two databases, for example. What if we took all of the concerns, the model, the view and the view controller concerns shove them together for very small components? So instead of having this idea of like, I have a counter and the UI, the counter really lives in the view.

[00:08:01] And the connection layer lives in the view controller and the way I store it lives in the model. What if we put everything for the counter together in one very small counter component and then everything's in one component? So that's the idea here is we're taking the separation of concerns and we're breaking it down across components, and we're making components that are very small.

[00:08:22] The one component does one thing and does it really well. And then we'll make lots of components and will compose components of other components. That's the React method that's the React way of thinking. So you're going to find that we're going to put the view which is the HTML.

[00:08:40] You can put the style in here too if you want to use something like Tailwind which will use an intermediate react. Or you can put CSS modules or SASS or whatever you can it will put that all together for one little component. So this pet component, if there's ever a problem with pet or it's not displaying correctly or the data is not translating correctly or something like that.

[00:09:00] We know it's here. It's in this component we know exactly where to go to the bucket and that's really, really powerful, right? Exactly how to debug your components. Okay,diatribe over. I don't know if I'm supposed to say that then, but I sai it then. So here we are.

[00:09:16] It's a little weird, right? Like I know it feels weird writing HTML in your in your JavaScript but it makes sense like when you kind of frame it of like I'm writing code to get this way. So why don't I just make it look that way I also say that JSX was not the first time they tried to do this.

[00:09:32] The last ES4 right so there was ES3, which was forever ago then there was ES5, which is what I started on. And there's ES6 there was a last ES4 or harmony was what it was called. They actually made a thing called I think it's like JE4X, J4X something like that.

[00:09:52] Anyway, Mozilla tried to do this way before, they tried to make an XML a native type in JavaScript and it just blew up. And so it never actually ended up happening but they did try to do it before.
>> Does the JSX still get transformed in the Create Element calls?

[00:10:06] And because of JSX now we don't need him or react.
>> Yeah, that's correct. That's correct assessment. Anything that you're using JSX now it's smart enough to say cool, I'm going to import react for you. You might have some ESLint problems here? That's fine. We'll get to the point where we'll fix all of ESLint, so just ignore ESLint for a time.

[00:10:28] I'm very good at ignoring ESLint by the way.
>> That's on renaming JS to JSX.
>> That's a good question, definitely worth covering here. So, this is another kind of like argument that people like to have that no one should give any cares about. So there's a school of thought that basically says like, if I'm putting JSX in a document, I should rename this file to be pet.jsx.

[00:10:55] And you do get that little satisfying react logo there, so that's a good reason, right. It's not I'm kidding, it's not a good reason. And my answer that is I do not care. I don't care either way. I used to do it and old versions of this course I do it and some tools require you to do it.

[00:11:11] So sometimes you just have to do it. I used to do it more and I used to care more about it. I had this idea of like if I'm using JSX and a file and I'll name it digests x and if I'm not that I won't. Why does that matter?

[00:11:25] Why can I not just open the file and say, there's JSX here? Why do I need to know in advance because the name, the JSX is there? I don't, and then I think it was Dan Abramov, who's one of the core team members for React made the point of like, you don't name it pet.babbel.js.

[00:11:41] You don't name it for all the build tools that have to work on every file that's pointless. So why are we putting JSX? It's a valid point. So I loop back around to I no longer care so you can do either way. I will say that when we get to TypeScript you have to name it TSX because that's the build tool requires like it will not do the transformation list there's an X on the end.

[00:12:06] So in that case it does matter. So unsurprisingly sorry personally but my answer is yet again I do not care. So I just say follow whatever the project is doing and in this case I just followed whatever the React core team is following because that decent opinion, right?

[00:12:22] But he won't offend me if I jump into your project and there's .JSX this just doesn't matter. So you can delete this now but that's what JSX is and now we get to write you know much more pleasant looking code. This is just less dense, right, this reads like it's about to, like renders.

[00:12:47] Which is why I'm a big fan of JSX. Okay so let's go refactorapp.js. So we have all of these stuff, you can just comment it out and now we can say const App =, And we'll say return, div, h1, Adopt Me. Pet and then we say pet=Luna, animal=dog and breed=havanese.

[00:13:36] So, this is a self closing tag, right? So I'm not going to have anything between right I'm not gonna have a pet closing tag here. Like this, right? You can with custom components that just gets passed down as a children prop. So if I did that, then here in pet.js I'd have a props.children, which is fine, you can totally do that.

[00:14:04] We'll do it later actually. But only that this is a void tag or a self closing tag. It's self contained, it contains no children. This would be valid HTML with its avoid tag it's not valid JSX. So you actually have to have that closing slash there. So that's a limitation of JSX just get used to it.

[00:14:26] So for example you can have inputs, right and inputs you do not have to have the slash at the end, right of the void tag. In JSX, you must. So, get used to that.
>> But not /pet right? You couldn't do either or?
>> Couldn't.
>> You couldn't do the, like yes.

[00:14:51]
>> You can leave it like this this is totally fine.
>> Okay.
>> Yeah, if I save it in my no it doesn't they used to collapse so prettier used to collapse that it doesn't know I guess but this is fine. But that's significantly less keystrokes. Okay, I'm gonna make three copies of that and this one's pepper burger cockatiel and this is Deutsche Bank.

[00:15:21]
>> To the cat, which is MCs. So you can see these props that you pass down look just like normal props that you would put on HTML, right? So for example, I could say id=my app or something like that. And this would be rendered out as the ID on the app, right?

[00:15:45] So these two things work the same way. So again, I say that would you agree that this is a lot easier to read than this? Most people once they start writing JSX, they're like okay I feel a little bit gross putting my HTML in my Java scripts, but this is pretty cool so I'd say stick to it I can delete that instead of having the React.create element here, you can just have app, like that.

[00:16:25] But just keep in mind, the only black magic here is this is getting translated to React.create element. And now that I've shown you all this, we are never going to talk about Create Element again, we're just gonna pretend to doesn't exist. You'll never have to know that that's the name of the API.

[00:16:41] You'll never write Create Element directly, ever again. One you'll notice that I'm getting app and pet warnings. It's like hey, pets imported, but not used anywhere. The ad is, right? Of course it is. We have not augmented, ESLint to the point where it can understand JSX code yet, which is we're about to do that.

[00:17:05] But before we do that, does anyone have any questions about the app.js or anything like that or JSX in general. Yeah?
>> It's maybe a little too granular but if you just passed an app to render, you would just pass in the function right you have to put it in.

[00:17:25]
>> Yeah, so what if you did this?
>> Yeah.
>> What's a good example? It'd be going to get your passport stamped and they just handed you the stairs.
>> Yes.
>> Yeah, right? Or you ordered a car and they're just like, here's a line of cars called Civics, right?

[00:17:42] And you wouldn't actually get a car, you would just the the amorphous concept of specifics.
>> Yes, okay.
>> [LAUGH]
>> Just generally not what you want, right?