شرح صفوف ومحتوى الفقرة
متى تختار التصدير الافتراضي ومتى تفضل التصدير المسمى؟ كلاهما معيار أصيل في ES6؛ يتألق التصدير الافتراضي عندما يضم كل ملف مكوناً رئيسياً واحداً أو شاشة مستقلة، بينما يفرض التصدير المسمى توحيد الأسماء بدقة في مكتبات الأزرار والأدوات المشتركة ويسهل إعادة التسمية الآلية في المحررات. قارن بينهما في الجدول التالي:
| وجه المقارنة | التصدير الافتراضي Default Export | التصدير المسمى Named Export |
|---|---|---|
| الحد الأقصى بالملف | تصدير افتراضي واحد فقط لكل ملف وحدة | عدد غير محدود من التصديرات المسماة بالملف |
| صيغة التصدير | export default function CourseCard() {} | export function StatusBadge() {} |
| صيغة الاستيراد | import CourseCard from './CourseCard.jsx' | import { StatusBadge } from './Badges.jsx' |
| تغيير الاسم عند الاستيراد | مباشر بأي اسم دون أقواس معقوفة | يتطلب الكلمة الصريحة as داخل المعقوفات |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعرفت في هذا الدرس على فوائد فصل المكونات في ملفات وحدات مستقلة، وطبقت التصدير الافتراضي والتصدير المسمى بالأقواس المعقوفة وإعادة التسمية عبر as والدمج بينهما، مع تنظيم ملفات .jsx بأسماء متطابقة داخل مجلد src/components. الخطوة التالية: انتقل الآن إلى الدرس رقم 7 «قواعد كتابة JSX وتجميع العناصر عبر Fragment» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.