ایمپورت و اکسپورت کامپوننت ها

جادوی کامپوننت‌ها در قابلیت استفاده مجدد آن‌هاست: شما می‌توانید کامپوننت‌هایی بسازید که خودشان از ترکیب کامپوننت‌های دیگر شکل گرفته‌اند. اما با بزرگ‌تر شدن پروژه و تو در تو شدن عناصر، منطقی‌ترین کار این است که آن‌ها را به فایل‌های مجزا تقسیم کنید. این کار خوانایی فایل‌ها را بالا برده و استفاده از کامپوننت‌ها را در جاهای دیگر پروژه بسیار آسان می‌کند.

چیزهایی که در این درس یاد می‌گیرید:

• فایل کامپوننت ریشه (Root Component) چیست؟

• نحوه وارد کردن (Import) و صادر کردن (Export) کامپوننت‌ها

• تفاوت و زمان استفاده از حالت‌های Default و Named

• صادر کردن چند کامپوننت از یک فایل واحد

فایل کامپوننت ریشه (Root Component)

در درس گذشته، ما کامپوننت‌های Profile و Gallery را در یک فایل واحد به نام App.js نوشتیم. در ساختارهای استاندارد، به فایلی که نقطه شروع و ریشه اصلی برنامه شماست، فایل ریشه (Root) می‌گویند.

• در پروژه‌های ساده، این فایل معمولاً همان App.js یا App.tsx است.

• در فریم‌ورک‌های مدرن مبتنی بر مسیریابی فایلی (مثل Next.js)، هر صفحه ممکن است کامپوننت ریشه اختصاصی خودش را داشته باشد (مثل page.js).

انتقال کامپوننت‌ها به فایل‌های مجزا

برای ماژولار کردن و افزایش قابلیت استفاده مجدد، می‌خواهیم کامپوننت‌ها را از فایل ریشه خارج کنیم. انتقال یک کامپوننت به فایل جدید شامل ۳ گام ساده است:

1. یک فایل جدید جاوااسکریپتی بسازید (مثلاً Gallery.js).

2. کامپوننت خود را از آن فایل صادر (Export) کنید.

3. در فایلی که به آن نیاز دارید، کامپوننت را وارد (Import) کنید.

به نحوه ارتباط این دو فایل در کد زیر دقت کنید:

// Gallery.js
// ۱. این کامپوننت فقط داخل همین فایل استفاده می‌شود و صادر نشده است
function Profile() {
  return (
    <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="دانشمند" />
  );
}

// ۲. صادر کردن کامپوننت اصلی به صورت Default
export default function Gallery() {
  return (
    <section>
      <Profile />
      <Profile />
    </section>
  );
}

// App.js
// ۳. وارد کردن کامپوننت گالری از فایل مجاور
import Gallery from './Gallery.js';

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

💡 نکته: در دنیای React، نوشتن یا ننوشتن پسوند فایل در زمان امپورت (مثلاً ./Gallery به جای ./Gallery.js) هر دو درست است و کار می‌کند، اما نوشتن پسوند کامل به رفتار ماژول‌های بومی جاوااسکریپت (ES Modules) نزدیک‌تر است.

تفاوت صادر کردن به صورت Default و Named

در جاوااسکریپت دو راه اصلی برای خروجی گرفتن یا صادر کردن مقادیر وجود دارد: Default و Named.

یک فایل حداکثر می‌تواند یک خروجی Default داشته باشد، اما به هر تعداد که بخواهید می‌توانید خروجی Named در آن تعریف کنید. روش صادر کردن شما، مشخص می‌کند که در فایل مقصد چطور باید آن را امپورت کنید:

• ویژگی امپورت Default: در زمان وارد کردن، می‌توانید هر نام دلخواهی برای آن بگذارید. برای مثال نوشتن import Banana from './Button.js' همچنان کامپوننت دکمه را به شما تحویل می‌دهد.

• ویژگی امپورت Named: نام کامپوننت در زمان وارد کردن حتماً باید داخل کروشه {} قرار بگیرد و دقیقاً هم‌نام با تابع تعریف شده در فایل مبدا باشد.

🛠️ عرف توسعه‌دهندگان: معمولاً اگر یک فایل فقط و فقط یک کامپوننت اصلی را در خود جای داده است، از Default Export استفاده می‌شود. اگر فایل شامل چندین کامپوننت یا ابزار فرعی است، از Named Export استفاده می‌کنند. هیچ‌گاه از توابع بدون نام (مثل export default () => {}) استفاده نکنید، چون خطایابی برنامه را در مرورگر بسیار سخت می‌کنند.

صادر و وارد کردن چند کامپوننت از یک فایل

اگر بخواهید علاوه بر کامپوننت اصلی گالری، کامپوننت تک‌عضوی Profile را هم به صورت مجزا در فایل ریشه استفاده کنید، از ترکیب هر دو روش در یک فایل استفاده می‌کنیم:

// Gallery.js

// خروجی نام‌دار (Named Export)
export function Profile() {
  return <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="دانشمند" />;
}

// خروجی پیش‌فرض (Default Export)
export default function Gallery() {
  return (
    <section>
      <Profile />
    </section>
  );
}

حالا در فایل ریشه (App.js)، هر دو کامپوننت را به شکل ترکیبی پذیرا می‌شویم:

// App.js
import Gallery from './Gallery.js'; // امپورت بدون کروشه برای خروجی Default
import { Profile } from './Gallery.js'; // امپورت داخل کروشه برای خروجی Named

export default function App() {
  return (
    <div>
      <Profile /> {/* رندر یک پروفایل تک */}
      <hr />
      <Gallery /> {/* رندر کل گالری */}
    </div>
  );
}

حل چالش مستندات: تفکیک کامل کامپوننت‌ها

در چالش این درس از ما خواسته شده کامپوننت Profile را به طور کامل به یک فایل مجزا به نام Profile.js منتقل کنیم و هر دو را در App.js رندر کنیم. این کار را با استفاده از استاندارد تمیزِ Default Export برای هر دو فایل انجام می‌دهیم:

// ۱. ایجاد فایل مجزای Profile.js
export default function Profile() {
  return (
    <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" />
  );
}

// ۲. به‌روزرسانی فایل Gallery.js
import Profile from './Profile.js'; // وارد کردن پروفایل از فایل جدیدش

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

// ۳. رندر همزمان در فایل ریشه App.js
import Gallery from './Gallery.js';
import Profile from './Profile.js';

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