Render a UI with JSX in a React Function Component
HTML is the standard way to define UI for browsers and it's a great way of representing the hierarchical structure of a web page. Since React is a JavaScript framework, all of the UI we build needs to be defined in JavaScript code, but that doesn't lend itself to being able to quickly write or read the code that defines our UI in terms of the HTML that will be rendered in the browser. Instead of writing raw, JavaScript functions, we'll write in JSX (JavaScript XML) to define our UI structure in a familiar, HTML-like, syntax and let the tools (Babel, specifically) turn that into standard JavaScript for the browser. In this lesson, we'll use JSX to render a static version of the beginning of our application.
Instructor: [00:00] When I'm getting started with a [00:00] new application, I like to start [00:00] with a raw markup that's going [00:00] to give me an initial layout for [00:06] my pages. Let's start by going [00:00] into the integrated terminal in [00:00] code and starting this with yarn [00:14] start. [00:00] We'll see our Hello [00:00] world placeholder running in the [00:19] browser. Let's switch back. I'll [00:00] leave that running but get the [00:21] terminal out of the way. Let's [00:00] go in here and replace Hello [00:00] world with the structure for our [00:24] application. I'm going to start [00:27] with a header element. In here [00:00] is going to go our header [00:31] content. [00:00] Then I'm going to have [00:00] a main element that's going to [00:00] contain the bulk of the body for [00:36] this application. We'll jump [00:39] back up to the header. I'm just [00:41] going to give this an <h1>. That < [00:00] h1> is going to have the name of [00:44] our app. We're going to call [00:47] this "Study Deck." You can call [00:48] it whatever you want. Then I'm [00:00] going to give it a tagline, [00:50] which will be our <h2>. [00:00] We'll [00:00] call it "Retention Through [00:58] Repetition." Now we'll drop down [01:00] into the main area. I'll give [01:02] this an <h3>. This is just going [01:06] to be a label for our cards. I'm [01:08] going to save this. I'm going to [00:00] switch back to the browser so we [01:10] can see our progress. [00:00] At this [00:00] point, you should see our [00:00] Heading 1 with the name of our [00:00] app, our Heading 2 with our [01:17] tagline, and our Heading 3. [00:00] Let's switch back and put in a [01:20] little more static content. [00:00] Under our <h3>, I'm going to add [01:24] a div. This div will contain all [01:29] of our flashcards. [00:00] Then we're [01:32] going to add another div. This [00:00] is going to represent an [01:34] individual flashcard. Within the [00:00] div to represent one of our [01:39] cards, I'm going to use an <h4>. [00:00] That's going to be the term for [01:43] the card or the question. We'll [01:45] just put a placeholder in here. [01:46] Term goes here. Under that, [01:49] we're going to have some buttons. [00:00] We'll create a div that'll [01:51] contain those buttons. [00:00] I'll add [01:54] a button here with a type. This [00:00] isn't inside a form, so we're [00:00] going to give this a type of [01:58] button. This is going to be a [00:00] button that'll show the back of [02:02] the card. I'm going to duplicate [00:00] this twice and create two more [02:05] buttons. Each one of these will [02:07] be a type of button. We're going [00:06] to add an Edit button and a [02:11] Delete button. [00:00] This is going to [00:00] give us the basic structure of [00:00] one of our flashcards, where [00:00] there's a term that gets [02:19] displayed in the <h4>. Then we [00:00] have a div that contains buttons [00:00] that allow us to take actions on [02:23] the card. [00:00] With all that static [02:26] markup in place, let's save this. [00:00] Let's go back to the browser and [02:29] see what our changes look like. [00:00] You'll see here we have our [00:00] heading for our cards, and we [00:00] have the representation of an [02:37] individual card.