JSX

JSX lets you write markup inside JavaScript.

It looks like HTML. It is not HTML. A compiler turns it into React.createElement calls.

JSX is an expression

You can return it. You can store it in a variable. You can pass it as a prop.

One parent

A component must return one tree, not two sibling roots.

Wrap siblings in a parent tag, or in a fragment which you will meet later.

Tags must close

In HTML, <img> can be unclosed. In JSX it must be <img />.

Same for input, br, and hr.

className, not class

class is a reserved word in JavaScript.

JSX uses className for CSS classes.

htmlFor, not for

for is also reserved. Labels use htmlFor.

What the compiler really does

This JSX:

Becomes something like this under the hood:

You almost never write createElement by hand. JSX is the friendly face.

Tip: Wrap JSX that spans lines in parentheses after return. It stops JavaScript from inserting a semicolon too early.