شرح صفوف ومحتوى الفقرة
أخيراً، كيف نكتب التعليقات التوضيحية داخل JSX؟ خارج الوسوم تعمل تعليقات JavaScript المعتادة بصورة طبيعية، أما بداخل محتوى العناصر فإن كتابة // مباشرة تظهر كنص مرئي للمستخدم على الشاشة! لذلك تُكتب التعليقات داخل الوسوم محاطة بأقواس معقوفة وعلامتي تعليق الكتلة هكذا: {/* تعليق توضيحي */}. يلخص الجدول التالي قواعد التحويل من HTML إلى JSX:
| الخاصية النحوية | لغة HTML5 التقليدية | صياغة React JSX الحديثة |
|---|---|---|
| تعدد العناصر بالجذر | مسموح بوجود عدة عناصر متجاورة مباشرة | يشترط جذر واحد أو التجميع عبر <>...</> |
| إغلاق الوسوم الفارغة | الإغلاق اختياري مثل <img> و<br> | إغلاق ذاتي إلزامي بالشرطة مثل <img /> و<br /> |
| سمات التنسيق والتسمية | تُكتب class="card" وfor="emailBox" | تُكتب className="card" وhtmlFor="emailBox" |
| التعليقات داخل البنية | تُكتب بصيغة <!-- تعليق --> | تُكتب بصيغة {/* تعليق */} |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
فهمت في هذا الدرس كيف تتحول JSX إلى كائنات عناصر React، وطبقت قاعدة الجذر الواحد بنظافة عبر مكون Fragment دون عقد زائدة، والتزمت بإغلاق الوسوم المفردة وتحويل السمات إلى camelCase وكتابة التعليقات داخل الأقواس المعقوفة. الخطوة التالية: انتقل الآن إلى الدرس رقم 8 «تعابير JavaScript والحماية من XSS داخل JSX» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.