في هذا الدرس 6تصفّح المواضيع
لا تفهم المتصفحات صياغة JSX بصورتها الخام مباشرة؛ إذ يتولى مجمع الكود في Vite أو Babel ترجمة كل وسم تكتبه إلى استدعاء دالي قياسي يُنشئ كائنات JavaScript وصفية خفيفة في الذاكرة تحدد نوع العنصر وخصائصه.
ولأن كل وسم JSX يتحول في الحقيقة إلى تعبير برمجي يُنتج كائناً، فإن قواعد كتابته أكثر دقة وصرامة من محلل HTML المتسامح في المتصفح.
القاعدة الأولى في كتابة JSX هي قاعدة العنصر الجذري الواحد (Single Root Rule)؛ فلا يجوز للدالة إرجاع وسمين متجاورين في المستوى الأعلى مباشرة دون عنصر أب يجمعهما. والسبب البرمجي بسيط: دالة JavaScript لا تستطيع أن تُعيد عبر return سوى قيمة كائنية واحدة فقط في المرة الواحدة.
قد يفي وضع غلاف <div> بالغرض أحياناً، لكن إقحام <div> زائد بين خلايا الجداول أو قوائم التعريف <dl> أو عناصر شبكات Flexbox وGrid يفسد دلالة الصفحة ويكسر توزيع الأعمدة فوراً!
تعالج React هذه المشكلة بأناقة عبر مكون التجميع Fragment؛ إذ تستخدم الصيغة المختصرة <>...</> أو الصيغة الصريحة <Fragment> لتجميع العناصر المتجاورة دون إضافة أي عقدة زائدة في شجرة المتصفح.
function TermPair() {
return (
<>
<dt><strong>Fragment</strong></dt>
<dd>Zero extra DOM wrapper node.</dd>
</>
);
}
function GlossaryCard() {
return <dl className="rx-card"><TermPair /></dl>;
}تحوّل القاعدة الثالثة سمات العناصر المركبة والمحجوزة إلى صيغة camelCase لأن سمات JSX تتحول برمجياً إلى مفاتيح في كائنات JavaScript وخصائص DOM:
- تُكتب
classNameبدلاً منclass، وتُكتبhtmlForفي وسم التسمية بدلاً منfor. - تُكتب السمات المركبة بحروف متصلة مثل
tabIndexوreadOnlyوmaxLengthوstrokeWidth. - استثناء مهم: تحتفظ سمات الوصولية القياسية
aria-*والسمات المخصصةdata-*بالشرطة الوسطية كما فيaria-label.
function SearchField() {
return (
<div className="rx-card">
<label htmlFor="courseQuery">Track Name</label>
<input
id="courseQuery" readOnly
defaultValue="React 18"
aria-describedby="queryHint"
/>
</div>
);
}أخيراً، كيف نكتب التعليقات التوضيحية داخل 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 الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 React Fragment مكون التجميع Fragment
- حاوية منطقية مدمجة في React تجمع عدة عناصر متجاورة في جذر واحد دون إضافة أي وسم زائد لشجرة المتصفح.
- للمراجعة
- 02 Single Root Rule قاعدة الجذر الواحد
- القاعدة التي تلزم كل مكون بإرجاع عنصر أب خارجي واحد أو Fragment يضم بقية العناصر بداخله.
- للمراجعة
- 03 Void Element الوسم المفرد الفارغ
- عنصر لا يقبل محتوى داخلياً مثل img وinput وbr ويجب إغلاقه ذاتياً بالعلامة /> في صياغة JSX.
- للمراجعة
- 04 camelCase Attribute سمة بصيغة camelCase
- كتابة أسماء خصائص العناصر المركبة بحرف صغير للكلمة الأولى وكبير لما بعدها مثل className وhtmlFor.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 JSX JSX
- JavaScript XML
- امتداد نحوي يترجمه المجمع إلى استدعاءات برمجية تنشئ كائنات عناصر React.
- للمراجعة
- 02 DOM DOM
- Document Object Model
- شجرة عناصر المتصفح الحية التي يحميها مكون Fragment من التلوث بعقد حاوية غير ضرورية.
- للمراجعة
- 03 ARIA ARIA
- Accessible Rich Internet Applications
- معيار سمات سهولة الوصول التي تحتفظ بالشرطة الوسطية كما هي داخل عناصر JSX.
- للمراجعة
- 04 XML XML
- Extensible Markup Language
- نموذج التوصيف الصارم في موازنة وإغلاق الوسوم الذي استوحت منه JSX قواعد الإغلاق الذاتي.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال قائمة المصطلحات في محرر التجريب وأضف زوجاً ثالثاً من الوسمين dt وdd داخل صيغة <>...</> المختصرة دون أي غلاف div.
-
افتح مثال حقل البحث في محرر التجريب وأضف تعليقاً بصيغة {/* */} فوق الحقل وتأكد من عمل النقر على التسمية عبر htmlFor.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
إلى ماذا يحوّل مجمع الكود مثل Vite أو Babel وسوم JSX قبل تشغيلها في المتصفح؟
تُترجم وسوم JSX إلى استدعاءات دوال قياسية تنشئ كائنات JavaScript خفيفة تصف عناصر الواجهة.
لماذا لا يجوز إرجاع عنصرين متجاورين مباشرة في المستوى الأعلى لجملة return بدون غلاف يجمعهما؟
لأن دالة JavaScript لا تستطيع أن تعيد سوى قيمة كائنية واحدة فقط في جملة الإرجاع.
ما الميزة الجوهرية لتجميع العناصر المتجاورة عبر <>...</> بدلاً من إحاطتها بوسم <div> إضافي؟
يجمع Fragment العناصر برمجياً دون إضافة أي عقدة حاوية زائدة في شجرة DOM الحقيقية.
في صياغة JSX يجب إغلاق كافة الوسوم المفردة الفارغة مثل <img /> و<br /> بشرطة مائلة صريحة.
صواب؛ فترك أي وسم مفرد دون إغلاق ذاتي يوقف المترجم بخطأ نحوي فوري.
ما البديلان الصحيحان في JSX لسمتي class وfor التقليديتين في HTML؟
تعتمد JSX الخاصيتين className وhtmlFor المطابقتين لخصائص كائنات DOM القياسية.
تحتفظ سمات الوصولية aria-* والسمات المخصصة data-* بالشرطة الوسطية كما هي داخل JSX مثل aria-label.
صواب؛ تُعد سمات aria-* وdata-* استثناءً رسمياً متعمداً وتُكتب بالشرطة القياسية.
كيف تكتب تعليقاً برمجياً داخل عناصر JSX بحيث لا يظهر كنص مرئي على الشاشة؟
يُكتب التعليق محاطاً بأقواس معقوفة وعلامتي تعليق الكتلة بصيغة {/* نص التعليق */}.
متى نحتاج لاستيراد المكون الصريح { Fragment } من مكتبة react بدلاً من الاختصار <>...</>؟
نستخدم <Fragment> الصريح عندما نحتاج لتمرير سمة مثل key إلى التجميعة في القوائم.
مع محول JSX الحديث في React 18 وأداة Vite، لست مضطراً لكتابة import React from "react" في أعلى كل ملف لمجرد كتابة وسوم الواجهة.
صواب؛ إذ يدرج المجمع الحديث دالة تحويل JSX تلقائياً خلف الكواليس.
كيف تُكتب سمة ترتيب التركيز tabindex في صياغة JSX القياسية؟
تُكتب بصيغة camelCase بحرف I كبير هكذا tabIndex={0}.