JSX là gì và được biên dịch ra sao?

JSX chỉ là cú pháp; trình duyệt không hiểu nó nên phải được biên dịch trước khi chạy.

// Bạn viết
const el = <h1 className="title">Xin chào, {name}</h1>;

// Cũ (classic runtime)
React.createElement("h1", { className: "title" }, "Xin chào, ", name);

// Mới (automatic runtime, React 17+)
import { jsx as _jsx } from "react/jsx-runtime";
_jsx("h1", { className: "title", children: ["Xin chào, ", name] });

Kết quả là một plain object mô tả UI (React element), không phải DOM node.

JSX	Khác HTML
className, htmlFor	thay cho class, for
camelCase attribute/event	onClick, tabIndex
Phải có một root	dùng Fragment <>...</>
Thẻ phải đóng	<img />, <input />