1. 4
    Create a User Interface with React’s JSX syntax
    3m 19s

Create a User Interface with React’s JSX syntax

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet

It’s awesome that we can interact directly with React’s createElement API to create React elements and then hand those off to React DOM to get them to show up on the screen. But it’s not the most ergonomic API to write our UI code in. It’s hard to track when one element starts and the next one ends.

This is why the React team came up with JSX. It’s an extension to the JavaScript language to support syntax that looks similar to the HTML that you would write to create these DOM elements (there are a handful of differences). JSX gives us an expressive syntax for representing our UI, without losing the benefits and powers of writing our UI in JavaScript. The best way to take advantage of this is to learn how JSX is compiled to regular JavaScript calls, so we’ll look into that a bit as well.