Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    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.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Instructor: When I'm getting started with a new application, I like to start with a raw markup that's going to give me an initial layout for my pages. Let's start by going into the integrated terminal in code and starting this with yarn start. We'll see our Hello world placeholder running in the browser. Let's switch back. I'll leave that running but get the terminal out of the way. Let's go in here and replace Hello world with the structure for our application. I'm going to start with a header element. In here is going to go our header content. Then I'm going to have a main element that's going to contain the bulk of the body for this application. We'll jump back up to the header. I'm just going to give this an

    . That < h1> is going to have the name of our app. We're going to call this "Study Deck." You can call it whatever you want. Then I'm going to give it a tagline, which will be our

    . We'll call it "Retention Through Repetition." Now we'll drop down into the main area. I'll give this an

    . This is just going to be a label for our cards. I'm going to save this. I'm going to switch back to the browser so we can see our progress. At this point, you should see our Heading 1 with the name of our app, our Heading 2 with our tagline, and our Heading 3. Let's switch back and put in a little more static content. Under our

    , I'm going to add a div. This div will contain all of our flashcards. Then we're going to add another div. This is going to represent an individual flashcard. Within the div to represent one of our cards, I'm going to use an

    . That's going to be the term for the card or the question. We'll just put a placeholder in here. Term goes here. Under that, we're going to have some buttons. We'll create a div that'll contain those buttons. I'll add a button here with a type. This isn't inside a form, so we're going to give this a type of button. This is going to be a button that'll show the back of the card. I'm going to duplicate this twice and create two more buttons. Each one of these will be a type of button. We're going to add an Edit button and a Delete button. This is going to give us the basic structure of one of our flashcards, where there's a term that gets displayed in the

    . Then we have a div that contains buttons that allow us to take actions on the card. With all that static markup in place, let's save this. Let's go back to the browser and see what our changes look like. You'll see here we have our heading for our cards, and we have the representation of an individual card.