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 العادي — إنها ببساطة تجعل كود واجهة المستخدم يقرأ مثل التعليمات البرمجية التي ينتجها، وهو أسهل بكثير من استدعاءات الدوال المتداخلة.