JSX JSX Syntax
Last updated: 2026-11-02
JSX JSX Syntax
JSX is a syntax extension for JavaScript that lets you write interface markup directly inside a JS file. It is compiled into ordinary function calls that describe what the screen should look like for the current state. Every React component renders through JSX, so mastering its syntax is the first step toward writing components that stay readable as they grow in complexity.
| Group | Core Concepts |
|---|---|
| Kind | Pattern |
| Since | Earliest React versions |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
const el = <h1 className="title">Hello, {name}</h1>
// ↑ tag ↑ camelCase prop ↑ any JS expression goes inside {}Returns：No return value — JSX is a convention and mental model: after compilation it is a plain JS expression whose value describes the interface.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
The page shows the heading "Hello, React Learner!", a line reading "Role: Admin" and a text input; typing in the input updates the name in the heading in real time.💡 Key Points
🏷️ More Core Concepts
💡 Related Cases
📚 Related Tutorials
❓ FAQ
