شرح صفوف ومحتوى الفقرة
متى تفصل جزءاً من الشاشة في مكون مستقل؟ طبّق مبدأ المسؤولية الواحدة (Single Responsibility Principle)؛ افصل القطعة في مكون خاص عندما تتكرر في أكثر من موضع مثل الأزرار والبطاقات والشارات، أو عندما يكبر قسم في الصفحة مثل شريط التنقل أو جدول الأسعار بحيث يصبح فصله أوضح للقراءة والصيانة، دون المبالغة بتغليف كل فقرة نصية مفردة. راجع المقارنة الهندسية التالية:
| معيار المقارنة | عنصر HTML المدمج | المكون الدالي في React |
|---|---|---|
| حالة الحرف الأول للوسم | يكتب بحروف صغيرة مثل <section> و<h2> | يبدأ وجوباً بحرف كبير PascalCase مثل <CourseCard /> |
| نطاق التعريف البرمجي | مدمج مسبقاً في محرك المتصفح القياسي | يُعرَّف كدالة JavaScript في المستوى الأعلى للملف |
| إرجاع الأسطر المتعددة | يُكتب مباشرة ضمن بنية العناصر المحيطة | يُحاط بأقواس هلالية return ( ... ) لمنع فخ الفاصلة |
| الدور المعماري بالواجهة | لبنة أولية خام في شجرة المستند | وحدة واجهة متكاملة قابلة للتركيب وإعادة الاستخدام |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
بنيت في هذا الدرس أول مكون دالي قياسي في React، وطبقت قاعدة التسمية بحرف كبير PascalCase وإحاطة الأسطر المتعددة بالأقواس الهلالية، وركّبت المكونات المتداخلة مع الالتزام بتعريفها دائماً في المستوى الأعلى للملف. الخطوة التالية: انتقل الآن إلى الدرس رقم 6 «تصدير واستيراد المكونات في React» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.