JSX to rozszerzenie składni, które pozwala pisać znaczniki podobne do HTML wewnątrz JavaScript. Przeglądarka nie rozumie JSX — kompilator (Babel, SWC, esbuild) transformuje go na zwykłe wywołania funkcji przed uruchomieniem kodu.
el = ;
el = .(
,
{ : },
, name
);
Wynikiem jest zwykły obiekt JavaScript ("element React"), który opisuje interfejs użytkownika — to nie jest jeszcze rzeczywisty węzeł DOM. React odczytuje ten obiekt, aby zbudować 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), ponieważ mapują się na JS, a nie HTML.{ } osadza wyrażenia (wartości, operatory warunkowe, .map()), ale nie instrukcje jak if.JSX to tylko syntaktyczny cukier dla createElement, więc wszystko, co można zrobić w JSX, można zrobić w czystym JS — po prostu sprawia, że kod interfejsu użytkownika czyta się jak znaczniki, które produkuje, co jest znacznie bardziej czytelne niż zagnieżdżone wywołania funkcji.