JSX là một phần mở rộng cú pháp cho phép bạn viết markup giống HTML bên trong JavaScript. Trình duyệt không hiểu JSX — một trình biên dịch (Babel, SWC, esbuild) chuyển nó thành các lời gọi hàm thông thường trước khi code chạy.
el = ;
el = .(
,
{ : },
, name
);
Kết quả là một đối tượng JavaScript thuần (một "React element") mô tả UI — nó chưa phải là một nút DOM thật. React đọc đối tượng đó để dựng Virtual DOM.
function Card({ user }) {
return (
<> {/* Fragment: một gốc duy nhất không cần thêm <div> */}
<h2 className="name">{user.name}</h2> {/* camelCase: className, không phải class */}
{user.isAdmin && <Badge />} {/* {} nhúng bất kỳ biểu thức JS nào */}
</>
);
}
className, onClick) vì chúng ánh xạ tới JS, không phải HTML.{ } nhúng biểu thức (giá trị, ternary, .map()), nhưng không phải câu lệnh như if.JSX chỉ là đường cú pháp cho createElement, nên bất cứ gì làm được trong JSX đều làm được trong JS thuần — nó đơn giản làm code UI đọc giống markup mà nó tạo ra, dễ đọc hơn nhiều so với các lời gọi hàm lồng nhau.