JSX صيغة JSX
آخر تحديث: 2026-11-03
JSX صيغة JSX
JSX هي امتداد نحوي لـ JavaScript يتيح لك كتابة بنية الواجهة مباشرة داخل ملف JS. تُترجَم في النهاية إلى استدعاءات دوال عادية تصف كيف تبدو الشاشة في الحالة الحالية. كل مكوّن في React يُعرض عبر JSX، لذا إتقان صياغتها هو الخطوة الأولى نحو كتابة مكوّنات تبقى مقروءة مهما ازدادت تعقيداً.
| المجموعة | المفاهيم الأساسية |
|---|---|
| النوع | نمط |
| منذ الإصدار | أقدم إصدارات React |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
const el = <h1 className="title">Hello, {name}</h1>
// ↑ وسم ↑ خاصية camelCase ↑ أي تعبير JS يُكتب داخل {}القيمة المرجعة：لا قيمة معادة — JSX مجرد اصطلاح برمجي ونموذج ذهني: بعد الترجمة تصبح تعبير JS عادياً قيمته تصف الواجهة.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
تعرض الصفحة العنوان «Hello, React Learner!» وسطراً يقرأ «Role: Admin» وحقل إدخال نصي؛ والكتابة داخل الحقل تحدّث الاسم في العنوان لحظياً.💡 النقاط الأساسية
💡 نصيحة اكتب class بصيغة className وfor بصيغة htmlFor — كلمة class وكلمة for محجوزتان في JavaScript.
ℹ️ ملاحظة داخل {} لا تكتب سوى تعبيرات (متغيرات، عمليات، عامل ثلاثي، استدعاءات دوال)، ولا تكتب أبداً عبارات if أو for.
⚠️ تحذير يجب أن يحتوي JSX على عنصر جذر واحد بالضبط؛ غلّف العناصر الشقيقة داخل <div> أو <Fragment>.
🏷️ المزيد من المفاهيم الأساسية
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما هو JSX؟ هل هو HTML؟
ج لا. JSX امتداد نحوي لـ JavaScript يُترجم إلى استدعاءات دوال؛ وهو يشبه HTML الشكل فقط كي تبقى بنية الواجهة مقروءة.
س كيف أكتب تعليقات داخل JSX؟
ج غلّف التعليق بين قوسين معقوفين: {/* comment */}. وفي موضع المحتوى الفرعي لا توجد أي صيغة أخرى.
س كيف أكتب if-else داخل JSX؟
ج القوسان المعقوفان يقبلان تعبيرات فقط؛ استخدم العامل الثلاثي condition ? A : B، أو جهّز متغيّراً بعبارة if عادية قبل return.
