JSX

[00:00:00]
>> All right so we just finished the JS tool section, we are now moving into core React concepts. We are here at JSX, this one here. And if you need to pick up, then you can from here from 02-js-tools. So far we've been working without JSX, but now that we have Vite and all of our tools in place, we can go ahead and start working with JSX.

[00:00:28]
So I want you to think about your code for a second, let's just even glance maybe at App.jsx here for a second. We are writing JavaScript that is imitating HTML, right? We have a div and inside of that we have indented here this h1, h2, h2, right? It's JavaScript meant to imitate JSX, or sorry, it's meant to imitate HTML.

[00:00:56]
It would be nice if we could just directly write HTML since that's what we're trying to generate at the end. Otherwise, you have to go through this mental translation layer of, I have this idea of HTML that I want. I have to write this JavaScript that then gets translated back to HTML, right?

[00:01:15]
So it's this multiple hops. It'd be cool if our tools could just make the hops for us, and we get to describe what we want. That is the principle behind JSX. So one of my favorite fun facts about where JSX actually came from, obviously invented at Facebook, as well.

[00:01:35]
They invented JSX to appease the PHP developers at Facebook. They thought, if we show them something that looks like what they're already writing, they're gonna be into it, right? And so they invented it, not so they thought that they would use it and that people would like it, but they did it to to appease their back-end developers.

[00:01:55]
Or so I'm told, so the legend goes, right? And then it turns out everyone just liked it anyway. And so, yeah, they ended up sticking with it. But I remember when it very first came out and Pete Hunt talked about it at some conference. And everyone was like, why are they writing HTML in our JavaScript right?

[00:02:16]
And that was a big barrier to entry for React. And so, for a good year, every time that React came up on Hacker News and stuff like that, people would just make fun of it. It was like 2013, 2012 kind of area. And eventually some bigger companies like Reddit, like Khan Academy, started shipping it and people were like, okay, this is a serious deal.

[00:02:37]
And then it hit some sort of critical mass, Airbnb started using it, and Netflix started using it, and some bigger companies like that. And overnight everything like, Ember was dropped, Angular was dropped, and everyone just started using React. All this to say, we're gonna start putting HTML into our JavaScript.

[00:02:59]
Now, if you've never done this before, it feels a little weird and a little gross. I felt a little weird and gross when I started doing it. But let me assure you that, one, everyone does it this way, peer pressure, which is great, it's a great reason. And, two, it's gonna help you write cleaner code.

[00:03:17]
It's gonna help you write code that's easier to understand. It's very different than putting JavaScript into your HTML. Which if you've been writing code as long as I have, we used to do that and that was a bad idea. And putting H on your JavaScript, though, that's a good idea.

[00:03:31]
So this goes one way and not the other. Anyway, make sure you have this, it's called App.jsx, we definitely want that. And then I want you to create another file here next we call Pet.jsx. And we're gonna move this part right here, Pet, into its own file, Okay?

[00:03:55]
So we have this file here, Pet, and down here at the bottom we're gonna say, export default Pet, Okay? So one of the advantages of using a build tool like Vite, is now we can separate our files into separate files, so we can have little smaller modules. Vite is gonna be the tool that actually stitches it back together at the end, okay?

[00:04:21]
And so if we wanted this to work just as is, we'd say, import React from 'react', like that. And then here we're gonna say import Pet from './Pet', Okay? Everything's happy now. So we have this JavaScript that's imitating HTML. It'd be really great if we could just have HTML directly.

[00:04:50]
So I'm just gonna comment this out so you can see what this looks like. I'm gonna say const Pet =, and it's gonna take in props and it's going to return this. I'm gonna say, return, and I'm just gonna directly start writing my HTML. Or props.name, rather, props.animal, And props.breed.

[00:05:40]
These lines and these lines are exactly equivalent. I would bet, if you go look at the output of what Vite creates for you, this might literally be it. If it's not, it's very close. So I want you to ask yourself, between these two things, which one do you find more readable?

[00:06:15]
>> The second.
>> The second, I think that's a fairly uncontroversial opinion to say that this more purely expresses your intent as a developer, there's less indirection here. I'm all about readable code. I'm all about maintainable code. I've written enough bad code, and I've had to maintain enough bad code.

[00:06:34]
That I erred so strongly and the site was like, can a developer read this later? I don't optimize for writing code, I optimize for maintaining code. It's to the point that I believe that code is actually just annotating how to solve a problem that a computer happens to understand, Right?

[00:06:56]
So because I find this so much more readable, even though I had to introduce a build step to understand how this works, which in general is a bit of a code smell, right? That I have to introduce tools and augment the language, this is worth it. And I'm not alone thinking this.

[00:07:13]
Everyone that I know that writes React, writes React this way. I'm good friends with the person who created Emotion JS, Kye, great guy. For the longest time wrote this, for the exact reasons I was just describing, he found that to be an unacceptable cost. But even he came around eventually, right?

[00:07:32]
And he's the last person that I knew that wrote this. And he came around some years ago. So if this still feels weird to you, I'm just gonna invite you for the rest of this class, just follow on with me and write JSX. And if at the end of it, you still don't like it, then by all means go back to create element.

[00:07:48]
But for now just try this and you'll see over time it just gets really natural. Okay, so go ahead and delete this. It's gonna say, hey, you don't use React here. So we actually could go set up ESLint to understand that this actually is calling React, right? Because implicitly this is calling React.createElement.

[00:08:15]
However, within latest versions of React, you can even get rid of that. So you can actually just do that and everything works. It knows that if you're importing JSX, you're importing React, and the build tool will just handle that for you. So there you go, that is your first bit of JSX.

[00:08:32]
Again, you must call this Pet.jsx for Vite to understand, you want JSX transformations applied to this. If you call Pet.js, Vite doesn't know that use JSX, and is gonna fail on this. So please do call this Pet.jsx. It's possible to fix, but if you wanna go fix that and use JS, I'm gonna leave that to you to go do that.

[00:09:00]
>> What's the default in export default Pet?
>> It's a function of how ES6 modules work, or ES2015 modules are, just ESM is what people call them now, ACMA script modules. Notice I say, import Pet, from here. It has a top level thing that has no curly braces around it, that's the default export.

[00:09:21]
If I did export const Thing = Pet, so now I've given it a name, so this would be called a named export. So if I wanted to import, let's just say this is 5, right? Just something different. If I wanted to import that here, I would have to say Thing like that, right?

[00:09:46]
You'd have to import the named thing from the other file. So the default part is just like the general top level export thing, that's the default export. People have opinions about when to use, and some people would say, never use default exports, right? I do, cuz I think it's readable.

[00:10:06]
But, again, it's kind of up to you. That's an opinion, cool. Let's go update App.jsx now. So delete import React, we don't need that anymore. And we are going to rewrite this in JSX. I'm just gonna delete it. Div h1 Adopt Me. And then we're gonna give it a pet component, right?

[00:10:44]
So this is why I was saying it's really important that you call things with a capital letter. Remember I said, if it's a string that it's just going to literally output whatever the string is, and if it's a capital letter or if it's a component it'll render the component.

[00:11:02]
The way that JSX differentiates this, if it's a capital letter, it knows that it's a component that you created. If it's a lowercase, like it is here with the h1, it's going to literally output that. So x-some-thing, write it like this. This is going to literally output x something to the DOM.

[00:11:20]
Or an h1, it'll output h1. But if I had h1 here, it would think that it's a component that I created. So that's why the capitalization is required. So lowercase h1, capital P, Pet, name="Luna", animal="dog", and breed="Havanese", Okay? Are you familiar with self-closing tags, where you input and you have to put the slash and angle bracket at the end?

[00:11:56]
It's optional in HTML, it is not optional in JSX, you must put that self-closing tag. So if you have an input, that is valid HTML, right? Without the self-closing tag to it, it's not valid JSX. If you have an input you must put the slash there to let it know that it's a void tag or a self-closing tag.

[00:12:22]
That's just a JSX requirement. But, fun fact, you can do things like div and have a self-closing div. That's not valid HTML, it's valid JSX. Some people think that that's a really bad idea to do it. I do it anyway, because I still find it readable, right? Up to you.

[00:12:40]
All right, so I have this pet, I'm gonna just copy that a few times. This was Pepper. Pepper was a bird, and it is a Cockatiel. And this was Doink the cat. Which is mixed, okay? And then down here, instead of React.createElement here, I'm just gonna have self-closing App like that.

[00:13:09]
You do currently have ES sent errors, so the fact that this is underlined, expected, we will fix it momentarily. I'm gonna argue that this is way more readable than what we just had, right? Very compact, very succinct, very readable at a high level. Did we fix index.html? If not, make sure that this is JSX here.

[00:13:33]
I just had that in my notes here that you should go fix that.