JSX: HTML Inside JavaScript

Write markup that lives inside JavaScript, embed live values with curly braces, and learn why React uses className instead of class.

Step 1 of 3

JSX is markup that JavaScript understands

The HTML-looking code you returned from App is called JSX. It looks like HTML, but it lives inside a JavaScript file, and Babel translates it into regular function calls before the browser runs it.

Why invent JSX at all? Because UI is mostly markup, and writing markup as nested function calls by hand is unreadable. JSX lets you write the shape of your UI the way you already think about HTML, while still having the full power of JavaScript right next to it.

Three rules make JSX feel different from plain HTML:

One root element. A component must return a single top-level element. If you need siblings, wrap them in a <div> or an empty Fragment <>...</>.
Every tag must close. Even self-closing ones: <br />, <img src="..." />.
className, not class. class is a reserved word in JavaScript, so React uses className for the CSS class attribute.

Think of it this way: JSX is like writing a letter where you can drop in live facts mid-sentence: "Dear {customerName}, your order ships in {daysLeft} days." The fixed words are the markup; the {curly braces} are where JavaScript fills in real values.

Web Standard

Because class, for, and a few other words are reserved in JavaScript, JSX renames them: class becomes className and the label for attribute becomes htmlFor. Everything else maps to the standard HTML attribute names you already know.

Learn more on MDN

React.dev — Writing markup with JSX React.dev — JavaScript in JSX with curly braces