Render a React UI with JSX
We’ll dive right into JSX by rendering a static version of what our application will look like. We’ll cover the basic syntax of JSX and point out where it differs from html.
[00:00] Here I have my basic application that I created with Create React app. I've run NPM start to start the development server and open it up in a browser. To get a feel for how I want to break an application out into individual components, I like to start by mocking up a static version right in the JSX, and that's what we're going to do here. So I'm going to start by deleting this paragraph and I'm going to update this heading, and I'm just going to make it say 'React Todos'. And I'm going to save the file and the browser will update. The body copy is gone and our heading has been updated.
[00:31] So I'm going to start by creating a div that I'm going to wrap everything else in, and I want to give this div a class so that I can style it later. And if you notice when we look at the existing code, we have 'class name' rather than 'class' being used as the attribute. And the reason for this is simple -- classes are reserved for JavaScript.
[00:49] So we'll come down here and we'll give this div a class name attribute, and then we'll call it, 'Todo-app'. And with that in place, we can start building out elements for our Todo app. We need a way to add a new Todo. So we'll start with a forum, and I'll give that forum an input of 'Type text', and we see that we have our inputs laid on the page.
[01:13] And under a forum, I'm going to add another div, and I'm going to give this one a class name of 'Todo-list'. And in that list, I'm going to add an unordered list, and each item in our Todo list will be represented by an ally. So for now, just put some placeholder names in for our tasks. So we'll say 'Learn JSX', and then we'll duplicate that and add a couple more. And when I save this, the browser will update and we'll see our three list items displayed in the browser. And of course, we can't have a Todo app without the ability to mark items as complete. So let's add some checkboxes.
[01:54] So I'm going to jump up to this first item, and inside the ally, before my text, I'm going to add an input, and I'm going to give it a tight attribute of 'Checkbox'. And I'm going to close this on itself, and I'm going to save this. And I just want to make sure when the browswer refreshes that I see the checkbox as I expect. And now that I know that worked, I'm just giong to copy this input and I'll paste it for each of the other Todos. And now, each Todo has its own checkbox. This is a pretty good starting point for breaking our application up into components, but it could look a little bit nicer. So let's add some CSS to clean it up.
[02:30] I'm going to open up 'Add .CSS', and down at the bottom, I'm just going to paste in some styles. So you'll see I added just a little bit of styling starting with their parent div. I've changed the font size on the input and styled the list a little bit. So when we save this, we'll see it updated in the browser, and now, everything is nice and clean and lined up.