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