JSX vs HTML JSX مقابل HTML
آخر تحديث: 2026-11-03
JSX vs HTML JSX مقابل HTML
يبدو JSX مثل HTML، لكن قواعد قليلة تختلف: تستخدم السمات camelCase الصغيرة، ويصبح class هو className، ويأخذ style كائناً، ويجب إغلاق كل وسم. تعلّم هذه الفروق مبكراً يجنّبك أخطاء الترجمة التي يقع فيها معظم مبتدئي React، ويجعل تحويل مقاطع HTML الموجودة سهلاً.
| المجموعة | المفاهيم الأساسية |
|---|---|
| النوع | مرجع |
| منذ الإصدار | أقدم إصدارات React |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
<div className="box" style={{ fontSize: 14 }}>
// ↑ يصبح class هو className ↑ style كائن بمفاتيح camelCase
<img src="a.png" /> {/* يجب إغلاق العناصر الفارغة ذاتياً */}
<label htmlFor="mail">Email</label> {/* يصبح for هو htmlFor */}
</div>القيمة المرجعة：لا قيمة معادة — مجرد اصطلاح برمجي ونموذج ذهني.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
بطاقة بإطار مستدير تحتوي عنواناً ووسم «Email» وحقل إدخال بسمة مؤشّر وسطراً واحداً من النص التوضيحي الأحمر — كل ذلك معروض بسمات JSX بصيغة camelCase وكائن style.💡 النقاط الأساسية
⚠️ تحذير كتابة class تفشل في الترجمة مباشرة — يجب استخدام className؛ و style={{}} كائن حرفي، ولهذا تظهر الأقواس المزدوجة.
💡 نصيحة يجب إغلاق العناصر الفارغة مثل img وbr وinput ذاتياً في JSX: <img />، وإلا فشل البناء.
ℹ️ ملاحظة باقي السمات تتحوّل غالباً إلى camelCase الصغيرة فقط: onclick ← onClick، وtabindex ← tabIndex. أما الدلالة فلا تتغيّر.
🏷️ المزيد من المفاهيم الأساسية
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س لماذا يستخدم JSX اسم className بدل class؟
ج لأن JSX جزء من JavaScript وكلمة class محجوزة في اللغة، لذا اختار React اسم className ليطابق element.className في واجهة DOM.
س كيف أكتب style داخل JSX؟
ج يأخذ style كائناً لا نصاً: style={{ fontSize: 14, color: 'red' }}. وتستخدم المفاتيح camelCase، وتُعامل الأرقام تلقائياً كبكسل.
س هل يمكن ترك وسوم JSX دون إغلاق؟
ج لا. الإغلاق الصارم بنمط XML قاعدة في JSX — يجب كتابة <img> و<br> و<input> بصيغة الإغلاق الذاتي.
