ReactJSX là cú pháp cho phép viết thẻ giống HTML ngay trong file JavaScript. Nó không phải là một ngôn ngữ riêng — trình duyệt hoàn toàn không hiểu JSX, mà Babel hoặc SWC dịch nó thành lời gọi hàm trước khi code chạy.
Hình dung JSX như bản vẽ: bạn mô tả thứ muốn thấy trên màn hình, còn React lo phần dựng và cập nhật DOM.
Vì sao React chọn cú pháp này thay vì gọi hàm trực tiếp? Vì giao diện có cấu trúc cây, mà cây thì đọc bằng thẻ lồng nhau dễ hơn hẳn đọc bằng hàm lồng nhau:
// JSX
<button className="primary" onClick={save}>
Lưu
</button>
// Chính nó, sau khi compiler dịch (React 17+ dùng JSX transform mới; trước đó là React.createElement)
import { jsx as _jsx } from 'react/jsx-runtime'
_jsx('button', { className: 'primary', onClick: save, children: 'Lưu' })Một thẻ đã thấy khác biệt; một form ba mươi dòng thì bản createElement rất khó theo dõi.
Lý do thứ hai là đặt logic cạnh markup. Trước React, một tính năng nằm rải ở ba file HTML/CSS/JS. React gom theo component: mọi thứ của một nút bấm nằm trong một file. Đây là separation of concerns theo component thay vì theo công nghệ.
Vài chỗ JSX lệch khỏi HTML vì class và for là từ khoá của JavaScript, nên dùng className và htmlFor. Thuộc tính viết camelCase (onClick, tabIndex). Giá trị động đặt trong ngoặc nhọn, và trong đó chỉ nhận biểu thức — if hay for không đặt được ở đấy.
Lưu ý: JSX không bắt buộc và cũng không thuộc riêng React. Viết React bằng createElement thuần vẫn chạy, còn Preact hay Vue đều dùng được JSX. Trả lời "JSX là cú pháp của React" là chưa chính xác.