JSX

JSX is a syntax extension for JavaScript that looks like HTML. It is used with React to describe what the UI should look like.

JSX is JavaScript

JSX compiles down to React.createElement() calls. This means you can embed any JavaScript expression inside JSX using curly braces.

JSX Rules

• JSX must have a single root element
• All tags must be closed
• Use className instead of class
• Use htmlFor instead of for
• Self-closing tags must end with />

Embedding Expressions

Use curly braces to embed any JavaScript expression: variables, function calls, ternary operators, arrays (which are rendered as sibling elements).

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}