logo by @sawaratsuki1004
React
v19.2
Learn
Reference
Community
Blog

Is this page useful?

On this page

  • Overview
  • ملف المكون الأساسي
  • تصدير واستيراد المكون
  • تصدير مكونات متعددة من نفس الملف
  • Recap
  • Challenges

    GET STARTED

  • Quick Start
    • Tutorial: Tic-Tac-Toe
    • Thinking in React
  • Installation
    • Creating a React App
    • Build a React App from Scratch
    • Add React to an Existing Project
  • Setup
    • Editor Setup
    • Using TypeScript
    • React Developer Tools
  • React Compiler
    • Introduction
    • Installation
    • Incremental Adoption
    • Debugging and Troubleshooting

  • LEARN REACT

  • Describing the UI
    • Your First Component
    • Importing and Exporting Components
    • Writing Markup with JSX
    • JavaScript in JSX with Curly Braces
    • Passing Props to a Component
    • Conditional Rendering
    • Rendering Lists
    • Keeping Components Pure
    • Your UI as a Tree
  • Adding Interactivity
    • Responding to Events
    • State: A Component's Memory
    • Render and Commit
    • State as a Snapshot
    • Queueing a Series of State Updates
    • Updating Objects in State
    • Updating Arrays in State
  • Managing State
    • Reacting to Input with State
    • Choosing the State Structure
    • Sharing State Between Components
    • Preserving and Resetting State
    • Extracting State Logic into a Reducer
    • Passing Data Deeply with Context
    • Scaling Up with Reducer and Context
  • Escape Hatches
    • Referencing Values with Refs
    • Manipulating the DOM with Refs
    • Synchronizing with Effects
    • You Might Not Need an Effect
    • Lifecycle of Reactive Effects
    • Separating Events from Effects
    • Removing Effect Dependencies
    • Reusing Logic with Custom Hooks
Learn React
Describing the UI

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

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

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 من ملف المكون الجذري. سيجعلهما هذا أكثر مرونة وقابلة لإعادة الاستخدام في ملفات أخرى. يمكنك نقل المكون في ثلاث خطوات:

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

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

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

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

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

Note

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

import Gallery from './Gallery';

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

Deep Dive

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

هناك طريقتان رئيسيتان لتصدير القيم باستخدام 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. يمكن للملف أن يحتوي على تصدير واحد فقط افتراضي، ولكن يمكن أن يحتوي على عدد كبير من التصديرات المسماة!

Note

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

أولًا، صدّر 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 الجذر كـ تصدير افتراضي.

Recap

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

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

Try out some challenges

Challenge 1 of 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> ); }

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

PreviousYour First Component
NextWriting Markup with JSX
Copyright © Meta Platforms, Inc
no uwu plz
uwu?
Logo by@sawaratsuki1004
Learn React
Quick Start
Installation
Describing the UI
Adding Interactivity
Managing State
Escape Hatches
API Reference
React APIs
React DOM APIs
Community
Code of Conduct
Meet the Team
Docs Contributors
Acknowledgements
More
Blog
React Native
Privacy
Terms
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>
  );
}
Fork
import Gallery from './Gallery.js';

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


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

export default function App() {
  return (
    <Profile />
  );
}
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>
  );
}