قواعد كتابة كود JSX الصارمة

قواعد JSXالعنصر الأب الواحد في ريأكتما هو React Fragmentإغلاق الأوسمة في JSXأخطاء ريأكت للمبتدئينكورس React كامل.

جدول مرجعي سريع

القاعدة الصارمة في JSX	السبب الهندسي خلف الكواليس	حل المشكلة البرمجية
قاعدة العنصر الأب الواحد	دالة create.Element لا يمكنها إرجاع أكثر من كائن جافا سكريبت واحد في نفس الوقت	تغليف العناصر كلها داخل وسم حاوي أو استخدام وسم الفراغ المعلق Fragment
إغلاق كافة الأوسمة حتماً	ينهار المترجم البرمجي في حال وجود وسم مفتوح بدون نهاية لتحديد نطاق العنصر	إضافة شرطة مائلة في نهاية الأوسمة ذاتية الإغلاق مثل المقاطع النصية والصور
الكتابة بطريقة CamelCase	تتداخل الكلمات المحجوزة في جافا سكريبت مع سمات HTML التقليدية	تحويل الخصائص لتبدأ بحرف صغير ثم حرف كبير مثل استخدام className و htmlFor

الشرح

عندما كنت تكتب كود HTML عادي في الماضي، كان المتصفح يسامحك كثيراً؛ لو نسيت إغلاق وسم <img> أو كتبت وسمين متتاليين دون حاوٍ لهما، كان المتصفح يحاول معالجة الأمر وعرض الصفحة بأي شكل.

في React الأمر مختلف تماماً وصارم للغاية! نظرًا لأن JSX يتحول في النهاية إلى دوال جافا سكريبت حقيقية كما تعلمت في الدرس السابق، فإن الخطأ في حرف أو تنسيق واحد سيؤدي إلى انهيار المترجم وظهور شاشة خطأ حمراء عملاقة أمامك.

إليك القواعد الثلاث الذهبية التي يجب أن تبصم عليها بالعشرة كمطور ريأكت:

1. قاعدة العنصر الأب الواحد (Single Parent Element)

لا يمكنك إرجاع (return) عنصرين متجاورين في نفس الوقت من مكون ريأكت. يجب أن يتم تغليف كافة عناصر المكون داخل عنصر أب واحد فقط يجمعهم.

ℹ️ معلومة

السبب الهندسي: لأن كود JSX يترجم إلى دالة جافا سكريبت return React.createElement(). ومنطقياً، لا توجد دالة في أي لغة برمجة تستطيع إرجاع قيمتين منفصلتين في نفس سطر الـ return دون وضعهما داخل حاوية أو مصفوفة واحدة.

💡 نصيحة

الحل (React Fragment): إذا كنت لا تريد إضافة وسم <div> حقيقي في المتصفح يفسد عليك تنسيقات الـ CSS (مثل Flexbox أو Grid)، توفر لك ريأكت وسماً وهمياً سحرياً يُسمى Fragment ويُكتب هكذا <></>. هذا الوسم يدمج العناصر برمجياً لإرضاء ريأكت، لكنه يختفي تماماً ولا يظهر له أي أثر في متصفح المستخدم النهائي!

2. إغلاق كافة الأوسمة حتماً (Self-Closing Tags)

في HTML العادية، كنت تكتب <br> أو <img> أو <input> وتتركها مفتوحة. في JSX، أي وسم تفتحه يجب أن تغلقه، وإلا سينهار التطبيق فوراً. الأوسمة التي ليس لها محتوى داخلي (ذاتية الإغلاق) يجب وضع شرطة مائلة في نهايتها هكذا: <br /> أو <img />.

3. سمات العناصر تُكتب بأسلوب الـ CamelCase

بما أن JSX أقرب إلى جافا سكريبت منها إلى HTML، فقد تم تغيير أسماء بعض السمات (Attributes) لكي لا تتداخل مع الكلمات المحجوزة في لغة JavaScript. على سبيل المثال:

نستخدم className بدلاً من class (لأن كلمة class محجوزة لبناء الكلاسات في جافا سكريبت).
نستخدم htmlFor بدلاً من السمة for المستخدمة في وسوم الـ label.
جميع الأحداث تُكتب بأسلوب السنام: مثل onClick بدلاً من onclick و onChange بدلاً من onchange.

الأكواد البرمجية والتطبيق العملي

دعنا نرى الفارق البرمجي الفعلي بين الكود الخاطئ الذي يسبب انهيار التطبيق، والكود الصحيح المتوافق مع معايير ريأكت الصارمة:

الكود الخاطئ (سيتسبب في توقف السيرفر فوراً):

الكود الخاطئ

1	// خطأ: لا يوجد عنصر أب جامع، والأوسمة والصور غير مغلقة، واستخدام class
2	function BadComponent() {
3	return (
4	<h1 class="title">مرحباً بك في موقعنا</h1>
5	<p>سجل معنا الآن</p>
6	<img src="logo.png">
7	<input type="text">
8	);
9	}

الكود الصحيح بالكامل (مظبوط برمجياً ودلالياً):

الكود الصحيح

1	// صحيح: تم التغليف بـ Fragment، واستخدام className، وإغلاق الأوسمة ذاتياً
2	function GoodComponent() {
3	return (
4	<>
5	<h1 className="title">مرحباً بك في موقعنا</h1>
6	<p>سجل معنا الآن</p>
7	<img src="logo.png" alt="الشعار" />
8	<input type="text" />
9	</>
10	);
11	}

نصائح احترافية

—لا تقم بتنسيق وإغلاق الأوسمة يدوياً في كل مرة! كفاحك كمطور يجب أن يكون ذكياً. قم بتثبيت إضافة Prettier داخل محرر الأكواد VS Code وتفعيل خاصية "Format on Save" في الإعدادات. بمجرد قيامك بالضغط على زر حفظ الملف (Ctrl + S)، ستقوم الأداة ميكانيكياً بإضافة الشرطة المائلة لإغلاق الأوسمة المتطايرة وتنسيق الأقواس، لتتفرغ أنت بكامل تفكيرك لمنطق الكود الهندسي وتترك التنسيق الصارم للأدوات!

الدرس السابق

ما هي صياغة JSX وكيف يفهمها المتصفح

الدرس التالي

كتابة أكواد جافا سكريبت داخل JSX باستخدام الأقواس المجعدة { }

القاعدة الصارمة في JSX

السبب الهندسي خلف الكواليس

حل المشكلة البرمجية

قاعدة العنصر الأب الواحد

دالة create.Element لا يمكنها إرجاع أكثر من كائن جافا سكريبت واحد في نفس الوقت

تغليف العناصر كلها داخل وسم حاوي أو استخدام وسم الفراغ المعلق Fragment

إغلاق كافة الأوسمة حتماً

ينهار المترجم البرمجي في حال وجود وسم مفتوح بدون نهاية لتحديد نطاق العنصر

إضافة شرطة مائلة في نهاية الأوسمة ذاتية الإغلاق مثل المقاطع النصية والصور

الكتابة بطريقة CamelCase

تتداخل الكلمات المحجوزة في جافا سكريبت مع سمات HTML التقليدية

تحويل الخصائص لتبدأ بحرف صغير ثم حرف كبير مثل استخدام className و htmlFor

1. قاعدة العنصر الأب الواحد (Single Parent Element)

ℹ️ معلومة

💡 نصيحة

2. إغلاق كافة الأوسمة حتماً (Self-Closing Tags)

3. سمات العناصر تُكتب بأسلوب الـ CamelCase

نستخدم className بدلاً من class (لأن كلمة class محجوزة لبناء الكلاسات في جافا سكريبت).

نستخدم htmlFor بدلاً من السمة for المستخدمة في وسوم الـ label.

جميع الأحداث تُكتب بأسلوب السنام: مثل onClick بدلاً من onclick و onChange بدلاً من onchange.

الأكواد البرمجية والتطبيق العملي

الكود الخاطئ (سيتسبب في توقف السيرفر فوراً):

الكود الخاطئ

1	// خطأ: لا يوجد عنصر أب جامع، والأوسمة والصور غير مغلقة، واستخدام class
2	function BadComponent() {
3	return (
4	<h1 class="title">مرحباً بك في موقعنا</h1>
5	<p>سجل معنا الآن</p>
6	<img src="logo.png">
7	<input type="text">
8	);
9	}

الكود الصحيح بالكامل (مظبوط برمجياً ودلالياً):

الكود الصحيح

1	// صحيح: تم التغليف بـ Fragment، واستخدام className، وإغلاق الأوسمة ذاتياً
2	function GoodComponent() {
3	return (
4	<>
5	<h1 className="title">مرحباً بك في موقعنا</h1>
6	<p>سجل معنا الآن</p>
7	<img src="logo.png" alt="الشعار" />
8	<input type="text" />
9	</>
10	);
11	}