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.