JSX

JSX lets you write markup inside JavaScript. A few rules:

A component returns one root element (wrap extras in a <div> or a fragment <>...</>).
Use className instead of class.
Put JavaScript inside curly braces { }.
Close every tag, even <img /> and <br />.

Examplereact

Notice style={{ color: "teal" }}: the outer braces start JavaScript, the inner ones are the style object.

Quick check

How do you add a CSS class in JSX?

class="title"className="title"css="title"

Finish the quick check (and any code exercise) to complete this lesson, or mark it done yourself.

Tip: use the left and right arrow keys to move between lessons.