JSX, JavaScript içinde HTML benzeri markup yazmanızı sağlayan bir söz dizimi uzantısıdır. Tarayıcı JSX'i anlamaz — bir derleyici (Babel, SWC, esbuild) onu kod çalışmadan önce normal fonksiyon çağrılarına dönüştürür.
el = ;
el = .(
,
{ : },
, name
);
Sonuç, UI'ı tanımlayan düz bir JavaScript nesnesidir (bir "React elementi") — henüz gerçek bir DOM düğümü değildir. React, Virtual DOM'u oluşturmak için bu nesneyi okur.
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) çünkü HTML değil, JS'ye eşlenir.{ } ifadeleri gömülü hale getirir (değerler, ternaryler, .map()), ancak if gibi deyimler değil.JSX sadece createElement için syntactic sugar'dır, bu nedenle JSX'te yapabileceğiniz her şeyi düz JS'de yapabilirsiniz — basitçe UI kodu ürettiği markup gibi okunmasını sağlar, bu da iç içe geçmiş fonksiyon çağrılarından çok daha okunabilirdir.