Render a React UI with JSX
Often times when starting an application, it can be beneficial to render out a static layout to get an idea of what we will be building. Doing this allows us to see exactly how we are going to split our application into individual components. 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] React makes it easy to render a static version of UI components. I like to do this sometimes to figure out where I want to break my UI part into components. In add.js we'll start by adding a div to contain the core pieces of our application.
[00:14] Inside this wrap div I'm going to come up here and I'm going to clear a new div and I'm going to give it a class name of todo app. This is where we'll define the rest of our UI. We'll start with form and that form is going to have an input of type text.
[00:38] Under the form I'm going to create another div and we'll give this class name of todo list. Then todo list is going to contain an unordered list. That unordered list is going to have items for each todo in our list.
[00:59] Each one of those items is going to be represented with the input of type checkbox, and then it's going to have the name of the todo. We'll have create a static UI. Then I'm just going to copy this. I'm going to duplicate that two more times so that we have three items in our list.
[01:22] We'll create a static UI, we'll create an initial state, and then we're going to use that state to render a real UI. We'll get that out of the way so you can see all the code. Here we just have a static representation of our application.
[01:40] If I save this file the browser will reload. We'll see that we have an input, three items in our list, and each one of those has a checkbox to the left. The UI's a little ugly right now, so I'm going to just open up app.css, and I'm going to scroll under the predefined styles.
[02:00] I'm just going to paste in a few styles, so I have this todo app class that we put on the wrapper div. Then I have input UL and LI, so if I save that we'll see our UI update and it's little cleaner looking now. We've just created a static version of our UI. Now we can figure out where exactly we want to break things up into individual components.