Render a UI with JSX in a React Function Component

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.