React · Chapter 3 of 42
JSX
JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside JS files. Under the hood, JSX is compiled into `React.createElement()` calls.
JSX makes component structure easy to visualize, and lets you embed JavaScript expressions using curly braces `{}`.
Embedding expressions
Anything inside `{}` in JSX is evaluated as a JavaScript expression, such as variables, function calls, or ternaries.
JSX rules
JSX must return a single root element, tags must be closed, and attributes use camelCase (e.g. `className`, `onClick`).
Example 1 (jsx)
const name = "Ada";
const element = <h1>Hello, {name}!</h1>;
console.log(element.props.children);Output
['Hello, ', 'Ada', '!']Curly braces embed the `name` variable into JSX.
Key points
- JSX blends HTML-like syntax with JavaScript.
- Curly braces `{}` embed JS expressions in JSX.
- JSX compiles down to React.createElement calls.
- JSX attributes use camelCase, e.g. className not class.
💡 Note: JSX is optional but is the standard, readable way to write React components.