في هذا الدرس 6تصفّح المواضيع
قد يبدو وضع مكونين أو ثلاثة داخل ملف App.jsx مريحاً في الدقائق الأولى من التجريب، لكن المشاريع الحقيقية سرعان ما تتوسع لتشمل عشرات البطاقات والقوائم والنوافذ. يضمن فصل المكونات في ملفات وحدات قياسية (ES6 Modules) بقاء كل ملف قصيراً وواضحاً، ويمنع تضارب التعديلات بين أعضاء الفريق، ويمكّن أداة Vite من التحديث اللحظي واستبعاد الكود غير المستخدم.
عندما يمثل الملف مكوناً رئيسياً واحداً، نستخدم التصدير الافتراضي (Default Export) بكتابة export default function CourseCard(). وتسمح قواعد اللغة بوجود تصدير افتراضي واحد كحد أقصى في كل ملف.
وفي الملف المستورد نكتبه دون أقواس معقوفة عبر import CourseCard from './CourseCard.jsx'. ورغم أن اللغة تقبل أي اسم محلي للتصدير الافتراضي، تلتزم الفرق الهندسية دائماً بمطابقة اسم المكون الأصلي لمنع أي التباس.
// File 1: CourseCard.jsx
export default function CourseCard() {
return (
<article className="rx-card">
<h3>Modular Architecture</h3>
</article>
);
}
// File 2: App.jsx
import CourseCard from './CourseCard.jsx';عندما يضم الملف الواحد عدة مكونات صغيرة مترابطة—مثل شارات الحالة SuccessBadge وWarningBadge داخل ملف Badges.jsx—نعتمد التصدير المسمى (Named Export) بوضع كلمة export قبل كل دالة.
وعند الاستيراد يجب وضع الأسماء المطابقة تماماً داخل أقواس معقوفة مثل import { SuccessBadge } from './Badges.jsx'. وإذا تشابه الاسم مع مكون آخر في نفس الملف، نعيد تسميته محلياً بالكلمة المفتاحية as.
// Badges.jsx
export function LivePill() {
return <span className="rx-badge">Live</span>;
}
export function VerPill() {
return <span className="rx-badge">v18.3</span>;
}
// App.jsx
import { LivePill, VerPill as Ver } from './Badges';تسمح وحدات اللغة أيضاً بدمج التصدير الافتراضي والمسمى في ملف واحد عندما يرتبط مكون رئيسي بمكون فرعي مساند له؛ كأن يصدّر ملف ProfilePanel.jsx المكون الأساسي ProfilePanel افتراضياً مع تصدير مسمى للشارة RoleTag.
وحينئذٍ نستوردهما معاً في سطر واحد أنيق: import ProfilePanel, { RoleTag } from './ProfilePanel.jsx'.
// StudioPanel.jsx
export function Tag() {
return <span className="rx-badge">Verified</span>;
}
export default function Panel() {
return <div className="rx-card"><Tag /></div>;
}
// App.jsx
import Panel, { Tag } from './StudioPanel.jsx';في مشاريع Vite الحديثة، تُنظَّم المكونات القابلة لإعادة الاستخدام داخل المجلد src/components/ مثل src/components/Navbar.jsx وsrc/components/CourseCard.jsx. احرص دائماً على استخدام الامتداد الصريح .jsx لكل ملف يضم وسوم واجهة، ومطابقة اسم الملف بصيغة PascalCase مع اسم مكونه، وتجنب الاستيراد الدائري المتبادل بين ملفين.
متى تختار التصدير الافتراضي ومتى تفضل التصدير المسمى؟ كلاهما معيار أصيل في 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 الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Default Export التصدير الافتراضي
- المكون الرئيسي الوحيد المُصدَّر من ملف الوحدة بصيغة export default ويُستورد دون أقواس معقوفة.
- للمراجعة
- 02 Named Export التصدير المسمى
- تصدير مرتبط باسم محدد يسمح بإخراج عدة مكونات من ملف واحد ويُستورد بالاسم المطابق داخل أقواس معقوفة.
- للمراجعة
- 03 Import Alias الاسم البديل للاستيراد
- إعطاء اسم محلي بديل لمكون مستورد عبر الكلمة as لمنع تضارب الأسماء داخل نفس الملف.
- للمراجعة
- 04 Circular Dependency الاعتمادية الدائرية
- خلل معماري يستورد فيه الملف الأول الملف الثاني بينما يستورد الثاني الأول، مما قد يسبب قيماً غير معرّفة وقت التحميل.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 ESM ESM
- ECMAScript Modules
- نظام الوحدات القياسي الرسمي في لغة JavaScript المعتمد على تعليمات import وexport.
- للمراجعة
- 02 JSX JSX
- JavaScript XML
- امتداد كتابة عناصر الواجهة الذي تُحفظ ملفاته عادة بامتداد .jsx داخل مجلد المكونات.
- للمراجعة
- 03 IDE IDE
- Integrated Development Environment
- بيئة التطوير المتكاملة مثل VS Code التي تقترح مسارات الاستيراد وتعيد تسمية المكونات آلياً.
- للمراجعة
- 04 CI CI
- Continuous Integration
- خوادم البناء والاختبار الآلي التي تشترط التطابق الحرفي لحالة الأحرف في أسماء الملفات المستوردة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال التصدير الافتراضي في محرر التجريب وأضف استدعاءً ثانياً للمكون <CourseCard /> داخل App لمعاينة إعادة الاستخدام.
-
افتح مثال التصديرات المسماة وعدّل الاستيراد إلى LivePill as ActiveBadge ثم حدّث اسم الوسم داخل StatusToolbar.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
كم تصديراً افتراضياً Default Export يُسمح بوجوده في ملف الوحدة الواحدة؟
تسمح مواصفة وحدات ES6 بوجود تصدير افتراضي واحد فقط كحد أقصى في كل ملف.
أي جملة استيراد التالية تستورد بشكل صحيح مكوناً مُصدَّراً بصيغة export function StatusBadge() من ملف Badges.jsx؟
يشترط التصدير المسمى وضع الاسم المطابق تماماً داخل الأقواس المعقوفة عند الاستيراد.
يمكن لملف الوحدة الواحد .jsx أن يصدّر عدة مكونات مسماة إلى جانب مكون افتراضي واحد.
صواب؛ فدمج تصدير افتراضي واحد مع عدة تصديرات مسماة مساندة مدعوم بالكامل في معيار ES6.
كيف تعيد تسمية مكون مستورد بالتصدير المسمى محلياً عند وجود مكون آخر يحمل نفس الاسم Button؟
تُستخدم الكلمة المفتاحية as داخل الأقواس المعقوفة لإعطاء اسم محلي واضح بلا تعارض.
أي جملة تستورد المكون الافتراضي ProfilePanel والمكون المسمى RoleTag معاً من نفس الملف؟
يُكتب اسم التصدير الافتراضي أولاً متبوعاً بفاصلة ثم التصديرات المسماة داخل أقواس معقوفة.
الالتزام بالتطابق الحرفي لحالة الأحرف في مسارات الاستيراد مثل ./CourseCard.jsx يحمي من فشل البناء على خوادم Linux.
صواب؛ فأنظمة ملفات Linux حساسة جداً لحالة الأحرف خلافاً لبيئة Windows المحلية.
المتغيرات المساعدة المعرّفة داخل ملف وحدة .jsx تتحول تلقائياً إلى متغيرات عامة في المتصفح ما لم نخفها يدوياً.
خطأ؛ فوحدات ES6 تعزل متغيرات الملف تلقائياً ولا يخرج منها إلا ما يُصدَّر صراحة بكلمة export.
ما المجلد القياسي المتعارف عليه في مشاريع React المبنية بأداة Vite لحفظ المكونات المشتركة؟
يُعد مجلد src/components/ مع تسمية الملفات بصيغة PascalCase.jsx التنظيم القياسي المعتمد.
ماذا يحدث إذا صُدِّر المكون بالتصدير المسمى فقط دون default، ثم استوردته بدون أقواس معقوفة؟
يُطلق المتصفح أو المجمع خطأ نحوياً لأن الوحدة لا تحتوي على تصدير افتراضي.
لماذا تفضل فرق كثيرة التصدير المسمى لمكتبات الأزرار والأدوات المشتركة؟
لأنه يسمح بتصدير عدة أدوات من ملف واحد ويفرض توحيد الاسم الدقيق في جميع الملفات المستوردة.