Replace React createElement Function Call with JSX
In this lesson, we'll learn what JSX is and how it can replace calls to React's createElement API. We will go over how you can interop regular Javascript right in the JSX with curly brackets. We will learn how to pass props to JSX and how to override and props that get passed in. In addition to the noted className difference, there are a number of other differences with attributes in JSX than those in HTML.
[00:00] Writing our entire app using React.create element is totally possible, but it's not entirely ergonomic. The React team created JSX to allow us to write our UI in a way that's a little bit more familiar to us. This is JSX, and it looks similar to HTML and behaves in similar ways. We're going to convert this to use JSX.
[00:22] Let's go ahead and do that. I'm going to just comment this out and we'll say const element equals div. We want the class name to be container, and then the children to be hello world. Then we'll close off that div. We'll save that. When we refresh, we're going to get a syntax error.
[00:42] This is actually not JavaScript syntax at all. This JSX, so it needs to be transpiled into this React create element call. We can use Babel to do this. Normally, to do this you would have a build system set in place with web pack or something like that, but we're just going to use Babel standalone so that we can do this right in the browser without having any sort of build system.
[01:06] I'll go ahead and paste this script tag there. That brings in Babel standalone. Then I'm going to change this from text JavaScript to text Babel to make that work. Now I refresh, and I get hello world. Perfect.
[01:21] It all looks exactly the same. The HTML output is exactly the same as we had before with the class container. Now, with this new syntax, we can do a couple of tricks, and it looks a little bit nicer. It's easier to compose these things together.
[01:36] Let's learn a couple of things about JSX. There are a couple of things that are different. For example, in HTML, you use class, and in JSX, you use class name. Then we provide our attributes just like we would in HTML with a string here. Then our children, and we can provide any number of children, and it doesn't have to be all on one line.
[01:57] Let's say we wanted to take this hello world and externalize it to variable. How do we do that? Let's go ahead and copy this. We'll make const content equals string hello world. Then we'll replace this hello world with an interpolation. We'll put content in here.
[02:15] This interpolation is denoted by these curly braces. When you do this, you're exiting JSX land and entering JavaScript land. You can do any JavaScript that you want to as long as it evaluates to an expression. I'll save that, refresh. We'll see that we get exactly what we had before.
[02:32] Now, inside of these curly braces can literally be anything. I'm going to make an immediately invoked arrow function. We'll refresh and we get exactly the same thing. That's one of the really nice things about JSX is that once you put in these curly braces, you are in JavaScript land and you can do anything that you want to inside of this JSX.
[02:55] That also counts for the class name prop or any props that you're passing to these components. Here I'm going to use curly braces instead of that quote. We'll say that my class name equals container. Then inside of these curly braces, I can do any JavaScript that I want. I'll do my class name. I refresh, and here we have the classes container.
[03:22] This allows me to do any kind of interpolation. Hi there, we have container hi there. That gives me a lot of power and flexibility to have my view logic as part of my markup.
[03:37] One other thing that is pretty common to do with JSX is we're going to create a props object here. We're going to say that class name prop we want to be container, and the children prop will be hello world. Then we're going to take this div and remove all the props and make it a self-closing React element.
[04:00] Then we'll do this open curly braces, so we'll enter JavaScript land. We'll do ...props. This is similar to object spread in JavaScript. We are spreading these props, const name and children, across this div here. If I save this and refresh here, we're going to get the exact same thing. We have the const container and hello world.
[04:23] Now, let's say that this object is coming to us from some other place. We're going to want to override it or have the props override some of our things. We'd say, "If they don't give me a class name, then I want it to be my class." We refresh here.
[04:41] They do give us a class name, so the class name's still going to be container. Let's say that we want to override whatever class name they pass in. They can pass us a class name, but we're going to use our own class name. What we're going to do is we'll take the class name prop and we'll move it over on the other side of this props spread here. We'll see class is my class now.
[05:01] The same kind of thing happens with the children prop. We could pass a children prop and have it be whatever we want there, and it would override whatever's in the props there. Or we can use the regular children here either, and that will also override whatever is in props.
[05:20] Those are a couple of the tricks that you can do with JSX. The basic idea is you enter JSX land with the caret. You specify the element that you want to have rendered, and then you specify any props just like you would attributes on HTML.
[05:33] There are some differences here like I noted with class name, and there are some others as well. Then you can pass your children, and then you close your JSX element. In addition, you can do a self-closing tag here as well if you don't want to put any inside of the JSX element.