انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: تصدير واستيراد المكونات في React

Default Export and Import التصدير والاستيراد الافتراضي

قسّم واجهات React المتنامية إلى ملفات معيارية منظمة باستخدام التصدير الافتراضي Default Export والتصدير المسمى Named Export وهيكلة مجلد src/components الاحترافية.
3 صفوف تعليمية
ReactJS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عندما يمثل الملف مكوناً رئيسياً واحداً، نستخدم التصدير الافتراضي (Default Export) بكتابة export default function CourseCard(). وتسمح قواعد اللغة بوجود تصدير افتراضي واحد كحد أقصى في كل ملف.

وفي الملف المستورد نكتبه دون أقواس معقوفة عبر import CourseCard from './CourseCard.jsx'. ورغم أن اللغة تقبل أي اسم محلي للتصدير الافتراضي، تلتزم الفرق الهندسية دائماً بمطابقة اسم المكون الأصلي لمنع أي التباس.

الصف 2 كود برمجي
HTML 
// 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';
جرّب بنفسك
الصف 3 معاينة حية

جميع فقرات هذا الدرس (تصدير واستيراد المكونات في React)