JSX and React Elements

What Is JSX?

JSX is a JavaScript syntax extension that looks like HTML but compiles to React.createElement calls.

Syntax Rules

• Single root element (or fragment).
• Close all tags; camelCase attributes (className, onClick).
• JavaScript goes inside curly braces.

Expressions in JSX

<h2>{user.name}</h2>
{isAdmin ? <Badge /> : null}
{items.map(i => <li key={i.id}>{i.name}</li>)}

Fragments

Group elements without extra DOM nodes using <>...</>.

Key Points

• JSX is JavaScript with XML-like syntax.
• Keys help React track list items.
• children holds content between tags.