استيراد وتصدير المكونات

يكمن سحر المكونات في إمكانية إعادة استخدامها: يمكنك إنشاء مكونات تتكون من مكونات أخرى. ولكن كلما ضمّنتَ المزيد والمزيد من المكونات، فمن المنطقي في كثير من الأحيان البدء في تقسيمها إلى ملفات متعددة. يتيح لك هذا الأمر الاحتفاظ بملفاتك سهلة الفحص وإمكانية إعادة استخدام المكونات في أماكن أكثر.

You will learn

ما هو ملف المكون الأساسي
كيفية استيراد وتصدير مكون
متى يجب استخدام الاستيرادات والتصديرات الافتراضية والمسماة
كيفية استيراد وتصدير عدة مكونات من ملف واحد
كيفية تقسيم المكونات إلى ملفات متعددة

ملف المكون الأساسي

في مكونك الأول، أنشأت مكون Profile ومكون Gallery الذي يقوم بتقديمه:

function Profile() { return ( <img src="https://i.imgur.com/MK3eW3As.jpg" alt="كاترين جونسون" /> ); } export default function Gallery() { return ( <section> <h1>علماء مذهلون</h1> <Profile /> <Profile /> <Profile /> </section> ); }

هؤلاء موجودون حاليًا في ملف المكون الأساسي، المسمى App.js في هذا المثال. اعتمادًا على إعدادك لبيئة العمل، قد يكون مكونك الجذري في ملف آخر. إذا كنت تستخدم إطار عمل مع توجيه معتمد على الملفات (File-based routing)، مثل Next.js، فسيكون مكونك الجذري مختلفًا لكل صفحة.

تصدير واستيراد المكون

ماذا لو أردت تغيير الصفحة الرئيسية في المستقبل ووضع قائمة بكتب العلوم هناك؟ أو وضع جميع الملفات الشخصية في مكان آخر؟ من المنطقي تحريك Gallery وProfile من ملف المكون الجذري. سيجعلهما هذا أكثر مرونة وقابلة لإعادة الاستخدام في ملفات أخرى. يمكنك نقل المكون في ثلاث خطوات:

أنشئ ملف JS جديد لوضع المكونات فيه.
تصدير مكون الدالة الخاص بك من هذا الملف (باستخدام التصدير الافتراضي أو التصدير المسمى).
استيراده في الملف الذي ستستخدم فيه المكون (باستخدام التقنية المقابلة لاستيراد التصدير الافتراضي أو التصدير المسمى).

هنا تم نقل Profile وGallery من App.js إلى ملف جديد يسمى Gallery.js. الآن يمكنك تغيير App.js لاستيراد Gallery من Gallery.js:

import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }

لاحظ كيف أن هذا المثال مقسم إلى ملفين للمكونات الآن:

Gallery.js:
- ينشئ مكون Profile الذي يتم استخدامه فقط في نفس الملف ولا يتم تصديره.
- يصدر مكون Gallery كـ تصدير افتراضي.
App.js:
- يستورد Gallery كـ استيراد افتراضي من Gallery.js.
- يصدر المكون الجذري App كـ تصدير افتراضي.

ملاحظة

ربما تواجه ملفات تترك امتداد الملف .js مثل هذا:

import Gallery from './Gallery';

كلا './Gallery.js' أو './Gallery' سيعملان مع React، على الرغم من أن الأولى أقرب إلى كيفية عمل ES Modules الأصلية.

غوص عميق

التصدير الافتراضي ضد التصدير المسمى

هناك طريقتان رئيسيتان لتصدير القيم باستخدام JavaScript: التصدير الافتراضي والتصدير المسمى. حتى الآن، استخدمت أمثلتنا فقط التصدير الافتراضي. ولكن يمكنك استخدام واحد أو كلاهما في نفس الملف. يمكن للملف أن يحتوي على تصدير واحد افتراضي فقط، ولكن يمكن أن يحتوي على أي عدد من التصديرات المسماة.

كيفية تصدير مكونك تحدد كيفية استيراده. ستحصل على خطأ إذا حاولت استيراد تصدير افتراضي بنفس الطريقة التي تستورد بها تصديرًا مسمى! يمكن أن يساعدك هذا الرسم البياني على تتبع الأمور:

طريقة الكتابة	جملة التصدير	جملة الاستيراد
الافتراضي	`export default function Button() {}`	`import Button from './Button.js';`
المسمى	`export function Button() {}`	`import { Button } from './Button.js';`

عندما تستورد التصدير الافتراضي، يمكنك وضع أي اسم تريده بعد import. على سبيل المثال، يمكنك كتابة import Banana from './Button.js' بدلاً من ذلك وسيوفر لك نفس التصدير الافتراضي. على العكس من ذلك، مع الاستيرادات المسماة، يجب أن يتطابق الاسم على الجانبين. هذا هو السبب في أنها تسمى استيرادات مسماة!

يستخدم المطورون عادة التصديرات الافتراضية عندما يكون في الملف مكون واحد فقط، ويستخدمون التصديرات المسماة عندما يكون مكونات وقيم متعددة بغض النظر عن الأسلوب البرمجي الذي تفضله، دائمًا ما يجب أن تعطي أسماء معبرة لوظائف المكون والملفات التي تحتوي عليها. يُنصح بعدم استخدام المكونات بدون أسماء، مثل export default () => {}، لأنها تجعل عملية التصحيح أكثر صعوبة.

تصدير مكونات متعددة من نفس الملف

ماذا لو أردت عرض ملف شخصي Profile واحد فقط بدلاً من معرض؟ يمكنك تصدير مكون Profile أيضًا. لكن Gallery.js لديه بالفعل تصدير افتراضي، ولا يمكنك أن تمتلك اثنين من التصديرات الافتراضية. يمكنك إنشاء ملف جديد مع تصدير افتراضي، أو يمكنك إضافة تصدير مسمى لـ Profile. يمكن للملف أن يحتوي على تصدير واحد فقط افتراضي، ولكن يمكن أن يحتوي على عدد كبير من التصديرات المسماة!

ملاحظة

لتقليل الارتباك المحتمل بين التصديرات الافتراضية والمسماة، يختار بعض الفِرَق استخدام نمط واحد فقط (افتراضي أو مسمى)، أو تجنب مزجهما في ملف واحد. افعل ما يعمل بشكل أفضل بالنسبة لك!

أولًا، صدّر Profile من Gallery.js باستخدام تصدير مسمى (بدون كلمة default):

export function Profile() {
  // ...
}

ثم، استورد Profile من Gallery.js إلى App.js باستخدام استيراد مسمى (مع الأقواس المنحنية):

import { Profile } from './Gallery.js';

أخيرًا، اعرض <Profile /> من مكون App:

export default function App() {
  return <Profile />;
}

الآن، يحتوي Gallery.js على تصديرين: تصدير Gallery الافتراضي، وتصدير Profile المسمى. يستورد App.js كليهما. جرب تعديل <Profile /> إلى <Gallery /> والعودة في هذا المثال:

import Gallery from './Gallery.js'; import { Profile } from './Gallery.js'; export default function App() { return ( <Profile /> ); }

الآن، تستخدم مزيجًا من التصديرات الافتراضية والمسماة:

Gallery.js:
- يصدر مكون Profile كـ تصدير مسمى يسمى Profile.
- يصدر مكون Gallery كـ تصدير افتراضي.
App.js:
- يستورد Profile كاستيراد مسمى يسمى Profile من Gallery.js.
- يستورد Gallery كاستيراد افتراضي من Gallery.js.
- يصدر مكون App الجذر كـ تصدير افتراضي.

خلاصة

في هذه الصفحة تعلمت:

ما هو ملف المكون الجذري
كيفية استيراد وتصدير مكون
متى وكيفية استخدام الاستيرادات والتصديرات الافتراضية والمسماة
كيفية تصدير عدة مكونات من نفس الملف

جرّب بعض التحديات

تحدي 1 من 1:
تقسيم المكونات بشكل أعمق

حاليًا، يصدر Gallery.js كل من Profile و Gallery، وهو أمر محير قليلاً.

انقل مكون Profile إلى Profile.js الخاص به، ثم غير مكون App ليقوم بعرض كل من <Profile /> و <Gallery /> بعد الآخر.

ربما تستخدم إما تصديرًا افتراضيًا أو مسمى لـ Profile، ولكن تأكد من استخدام بناء الجملة المستوردة المقابلة في كل من App.js و Gallery.js! يمكنك الرجوع إلى الجدول من النظرة الأعمق أعلاه:

طريقة الكتابة	جملة التصدير	جملة الاستيراد
الافتراضي	`export default function Button() {}`	`import Button from './Button.js';`
المسمى	`export function Button() {}`	`import { Button } from './Button.js';`

// Move me to Profile.js! export function Profile() { return ( <img src="https://i.imgur.com/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); } export default function Gallery() { return ( <section> <h1>علماء مذهلون</h1> <Profile /> <Profile /> <Profile /> </section> ); }

بعد أن تجعله يعمل مع نوع واحد من التصديرات، اجعله يعمل مع النوع الآخر.

السابقمكونك الأول (Component)

التاليكتابة ترميز البناء بـ JSX

تعلم React

وصف واجهة المستخدم (UI)

استيراد وتصدير المكونات

You will learn

ما هو ملف المكون الأساسي
كيفية استيراد وتصدير مكون
متى يجب استخدام الاستيرادات والتصديرات الافتراضية والمسماة
كيفية استيراد وتصدير عدة مكونات من ملف واحد
كيفية تقسيم المكونات إلى ملفات متعددة

ملف المكون الأساسي

في مكونك الأول، أنشأت مكون Profile ومكون Gallery الذي يقوم بتقديمه:

Fork

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="كاترين جونسون"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>علماء مذهلون</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

تصدير واستيراد المكون

أنشئ ملف JS جديد لوضع المكونات فيه.
تصدير مكون الدالة الخاص بك من هذا الملف (باستخدام التصدير الافتراضي أو التصدير المسمى).
استيراده في الملف الذي ستستخدم فيه المكون (باستخدام التقنية المقابلة لاستيراد التصدير الافتراضي أو التصدير المسمى).

هنا تم نقل Profile وGallery من App.js إلى ملف جديد يسمى Gallery.js. الآن يمكنك تغيير App.js لاستيراد Gallery من Gallery.js:

Fork

import Gallery from './Gallery.js';

export default function App() {
  return (
    <Gallery />
  );
}

import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }

لاحظ كيف أن هذا المثال مقسم إلى ملفين للمكونات الآن:

Gallery.js:
- ينشئ مكون Profile الذي يتم استخدامه فقط في نفس الملف ولا يتم تصديره.
- يصدر مكون Gallery كـ تصدير افتراضي.
App.js:
- يستورد Gallery كـ استيراد افتراضي من Gallery.js.
- يصدر المكون الجذري App كـ تصدير افتراضي.

ملاحظة

ربما تواجه ملفات تترك امتداد الملف .js مثل هذا:

import Gallery from './Gallery';

import Gallery from './Gallery';

كلا './Gallery.js' أو './Gallery' سيعملان مع React، على الرغم من أن الأولى أقرب إلى كيفية عمل ES Modules الأصلية.

غوص عميق

التصدير الافتراضي ضد التصدير المسمى

طريقة الكتابة	جملة التصدير	جملة الاستيراد
الافتراضي	`export default function Button() {}`	`import Button from './Button.js';`
المسمى	`export function Button() {}`	`import { Button } from './Button.js';`

تصدير مكونات متعددة من نفس الملف

ملاحظة

أولًا، صدّر Profile من Gallery.js باستخدام تصدير مسمى (بدون كلمة default):

export function Profile() {
  // ...
}

export function Profile() {
  // ...
}

ثم، استورد Profile من Gallery.js إلى App.js باستخدام استيراد مسمى (مع الأقواس المنحنية):

import { Profile } from './Gallery.js';

import { Profile } from './Gallery.js';

أخيرًا، اعرض <Profile /> من مكون App:

export default function App() {
  return <Profile />;
}

export default function App() {
  return <Profile />;
}

Fork

import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';

export default function App() {
  return (
    <Profile />
  );
}

import Gallery from './Gallery.js'; import { Profile } from './Gallery.js'; export default function App() { return ( <Profile /> ); }

الآن، تستخدم مزيجًا من التصديرات الافتراضية والمسماة:

Gallery.js:
- يصدر مكون Profile كـ تصدير مسمى يسمى Profile.
- يصدر مكون Gallery كـ تصدير افتراضي.
App.js:
- يستورد Profile كاستيراد مسمى يسمى Profile من Gallery.js.
- يستورد Gallery كاستيراد افتراضي من Gallery.js.
- يصدر مكون App الجذر كـ تصدير افتراضي.

خلاصة

في هذه الصفحة تعلمت:

ما هو ملف المكون الجذري
كيفية استيراد وتصدير مكون
متى وكيفية استخدام الاستيرادات والتصديرات الافتراضية والمسماة
كيفية تصدير عدة مكونات من نفس الملف

جرّب بعض التحديات

تحدي 1 من 1:
تقسيم المكونات بشكل أعمق

حاليًا، يصدر Gallery.js كل من Profile و Gallery، وهو أمر محير قليلاً.

انقل مكون Profile إلى Profile.js الخاص به، ثم غير مكون App ليقوم بعرض كل من <Profile /> و <Gallery /> بعد الآخر.

طريقة الكتابة	جملة التصدير	جملة الاستيراد
الافتراضي	`export default function Button() {}`	`import Button from './Button.js';`
المسمى	`export function Button() {}`	`import { Button } from './Button.js';`

Fork

// Move me to Profile.js!
export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>علماء مذهلون</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

بعد أن تجعله يعمل مع نوع واحد من التصديرات، اجعله يعمل مع النوع الآخر.

السابقمكونك الأول (Component)

التاليكتابة ترميز البناء بـ JSX

استيراد وتصدير المكونات

You will learn

ملف المكون الأساسي

تصدير واستيراد المكون

ملاحظة

غوص عميق

التصدير الافتراضي ضد التصدير المسمى

تصدير مكونات متعددة من نفس الملف

ملاحظة

خلاصة

جرّب بعض التحديات

تحدي 1 من 1: تقسيم المكونات بشكل أعمق

البدأ

تعلم React

استيراد وتصدير المكونات

You will learn

ملف المكون الأساسي

تصدير واستيراد المكون

ملاحظة

غوص عميق

التصدير الافتراضي ضد التصدير المسمى

تصدير مكونات متعددة من نفس الملف

ملاحظة

خلاصة

جرّب بعض التحديات

تحدي 1 من 1: تقسيم المكونات بشكل أعمق

تحدي 1 من 1:
تقسيم المكونات بشكل أعمق

تحدي 1 من 1:
تقسيم المكونات بشكل أعمق