What is JSX?
JSX (JavaScript XML) is a syntax extension that lets you write HTML-like markup directly inside JavaScript. It’s not required to use React, but it’s by far the most common way to describe UI in React code.
A Basic JSX Expression
const element = <h1>Hello, world!</h1>;JSX Compiles to Function Calls
Browsers don’t understand JSX natively. A build tool compiles it into regular JavaScript function calls before your code ever runs.
What JSX Actually Compiles To
// This JSX:
const element = <h1 className="title">Hello</h1>;
// Compiles to something like:
const element = React.createElement("h1", { className: "title" }, "Hello");Embedding JavaScript Expressions
Curly braces {} embed any JavaScript expression directly inside JSX — variables, function calls, arithmetic, or ternaries.
Embedding Expressions
const name = "Alice";
function Greeting() {
return <h1>Hello, {name}! You have {2 + 2} new messages.</h1>;
}JSX Differs Slightly from HTML
| HTML | JSX |
|---|---|
| class="btn" | className="btn" |
| for="email" | htmlFor="email" |
| onclick="..." | onClick={handler} |
| style="color: red" | style={{ color: "red" }} |
| <br> | <br /> (must be self-closed) |
A Single Root Element
Every component must return exactly one root JSX element. To return multiple sibling elements without adding an extra wrapping <div>, wrap them in a Fragment (<>...</>).
Returning Multiple Elements with a Fragment
function UserInfo() {
return (
<>
<h2>Alice</h2>
<p>alice@example.com</p>
</>
);
}Every Attribute Uses camelCase
Almost every JSX attribute is written in camelCase (onClick, tabIndex, backgroundColor inside a style object) since JSX attributes ultimately become JavaScript object properties, not HTML attribute strings.
Best Practice
Think of JSX as "JavaScript with markup," not "HTML in JavaScript" — remembering that it compiles to function calls explains most of its quirks, like className and the single-root-element rule.