Templating with JSX

- [Instructor] Let's start by going over one of the things that people like and dislike about React, and that's JSX. JSX stands for JavaScript Syntax Extension, but it's also known as JavaScript XML, since it's a combination of JavaScript and something that looks like the old version of HTML called XHTML. Basically, it's a way to write HTML inside JavaScript. It has a few strange rule of its own, but overall it works pretty well. It offers you a way to also do templates inside JavaScript. Let's take a look at a very basic example of what it looks like. So you can see that it looks like regular JavaScript, but we're also using an h1 right here in this return statement. This is the beauty of JSX. It lets you use both together, and I would say almost in perfect harmony. Now there's a lot of peculiarity, so let's get into them. Now in JSX, you're only allowed to use a single parent element in your HTML. So for example, if I were to remove this hgroup right here, this would cause these elements to create an error. But let's go ahead and try this out using codespaces. I got the URL for the codespace open up right here, and even on the branch for this video 0101B, you can get to that by going to this dropdown, and from here I'm going to go to this Code menu, and make sure that I'm in the Codespaces tab, and then I'll create a codespace on this branch. Now, the first time you run this, it'll take a few minutes to get started. Once it finishes loading, you won't see the little clock right here, that appears when the extensions are loading, and you may see a message here that asks you to open up a window. Now, if you want to, you can also open that up by going to the folder Ports and then hitting this little web icon right here. This will open the preview for that website. And here's what you should be seeing. I'm going to split this up into a couple of windows, so we can see these side by side. Now I can go ahead and close this window right here, and what I want to do is open up the source folder, and the app.jsx file. This is a very basic example of what React looks like. I'm going to go ahead and hide the files right here. Now as I mentioned, you're only allowed to use a parent element, so if I were to take this hgroup out of here, you would see that it's given me an error on the right hand side, and if I try to just even have these two elements like this, it'll also give me an error. So you want to make sure they have some single tag that wraps any multiple elements in your code. Sometimes you'll see some people use what's called a fragment, which is an HTML tag with no name. So if I just create a tag like this, it will work just fine. It does look a little strange, but this is very common. I'm going to go ahead and leave my hgroup right here. And so the next thing you'll need to know about JSX is that it wants you to have self-closing tags. So as you know, when you write an image tag, you normally write something like this, and you know that this slash at the end is normally optional, but not in React. If I were to take this out, it would also give me an error. So you want to make sure that anytime you use any tag that is a single tag, something like the image tag, for example, or another one would be a break element, that you use the self-closing version like this. So if I were to do an image, let's go ahead and add an image here. I have some images in an images folder, and I have an image called group.svg, and this is StarGazers Group. Now, notice that when I do have multi-lines like this, I also want to add parentheses into my return statement. If you write all this HTML in a single line you wouldn't need this right here, but this is actually a problem with JavaScript and not React. The return statement can't be on a single line by itself. The compiler will actually add a semicolon, and it would break up the whole thing. The other thing you want to avoid with JSX is reserved keywords, things like class or for in JSX, so you can't use those. Instead of class, we use something called className. And if you were doing a form and you create a label, instead of the for attribute, you would use HTML for. It's something you have to remember, and it kind of does annoy you a bit as you write JSX. So let's go ahead and we will add another div here, right? And we'll give this thing a className, so this will drive you crazy because sometimes you'll be just trying to add a class and you forget to add the keyword className instead of class. That happens because in JavaScript class means something and especially in React class has a very definite meaning. So you want to use className whenever you want to add a class. Now I'm using some CSS that lets me use an article tag here to create a little card layout. So I'm going to move all this stuff in there, and you can try that out as well. Now you get this little sort of extra border that looks really nice. So remember you can't use class, that is also something that will drive you crazy. I type in class all the time, and then I see the compiler error, and sort of freak out, but that's just how JSX works. Now, you can also use an expression with this code. So I can create a variable right here. So I'll do a const name, and I'll assign it to a StarGazers, and instead of saying meet the star gazers, I can use an expression. Now this can be any sort of regular JavaScript expression, so you can add things in here, you can put some simple JavaScript, and then you can use this. Let's go ahead and add an I, and then you can go ahead and output that as part of your code here. So here the name is coming from this variable now, which is pretty cool. So you can add any sort of expression. You can also call a function in there if you want to. Now this brings up the point of what would happen if I wanted to do styles. So you can actually create inline styles, but instead of using regular CSS, you would actually pass them along as an object. So if I wanted to use a custom style here, I would use an expression, and notice that normally something like style would have quotes, but when you're using expressions, you don't need to have any quotes. And then in here you would pass along an object. So you actually are going to do two sets of curly braces, and then you can put any CSS in here. Now let's go ahead and do steelblue, which is a valid CSS color. You could add additional styles here, but you do have to do them as an object, so you would do like a comma and then some other item as you build this. Now when these get very complicated, what you would probably want to do is create some sort of variable for the object and then pass along the object name here, just like we did the variable and passed that along as part of the expression. Sometimes you'll see some variable names created in here and then just that insert of the variable for the style sheet. Another thing, if the selector happens to have more than one word, then you would also use camel case just like with any other properties. And as a matter of fact, all attributes in JSX are camel case. So for things like an onClick event, you would use a capital C, and that would be the same for things like onSubmit or onChange. Let's go ahead and add a button here. So I'll do a button, and I hope you're following along with me, because this is just the kind of thing that you want to try yourself. So we'll do a button and this button will have a className of outline and I'll put in here click me. Right, and just to keep it simple, we'll do an onClick event, and we'll type in the curly braces, and this needs an equal sign here. And then in here, what I want to do is use an arrow function, so you can write JavaScript. So I'll do an alert and then I'll say hi there, and that allows me to sort of write a simple function. Otherwise this won't actually work. You can actually create the function separately, and then call the function here, with only the function name as the call. We'll get into that a little bit later, but this is how you would do an onClick event. Really, any attributes in JSX are camel case, and that's another thing that you have to remember that kind of drives you nuts about the language, but you can see that it is really, really powerful, and allows you to do things that you can't do with just HTML or with just JavaScript. Plus, it combines this powerful templating language, lets you do expressions and all kinds of other things. I think that on the long run, once you're comfortable with it, you'll see that JSX is quite amazing and powerful.