JSX — это синтаксическое расширение, которое позволяет писать HTML-подобную разметку внутри JavaScript. Браузер не понимает JSX — компилятор (Babel, SWC, esbuild) преобразует его в обычные вызовы функций до выполнения кода.
el = ;
el = .(
,
{ : },
, name
);
Результат — простой объект JavaScript ("React элемент"), который описывает интерфейс — это ещё не реальный узел DOM. React читает этот объект для построения Virtual DOM.
function Card({ user }) {
return (
<> {/* Fragment: one root without an extra <div> */}
<h2 className="name">{user.name}</h2> {/* camelCase: className, not class */}
{user.isAdmin && <Badge />} {/* {} embeds any JS expression */}
</>
);
}
className, onClick), потому что они связаны с JS, а не с HTML.{ } встраивают выражения (значения, тернарные операторы, .map()), но не операторы, как if.JSX — это просто синтаксический сахар для createElement, поэтому всё, что вы можете сделать в JSX, вы можете сделать в чистом JavaScript — он просто делает код пользовательского интерфейса похожим на создаваемую им разметку, что гораздо более читаемо, чем вложенные вызовы функций.