🔹 React ES6 Modules (ماژول‌ها در React و ES6)

در این درس یاد می‌گیری ماژول‌ها (Modules) در جاوااسکریپت و React چی هستن، چرا استفاده می‌شن، و چطور باید با export و import کار کرد.

🔸 مفهوم ماژول در جاوااسکریپت

ماژول‌ها یعنی تقسیم کد به فایل‌های جداگانه تا هر فایل فقط مسئول بخشی از برنامه باشه.
این کار باعث میشه کد تمیزتر، قابل نگهداری‌تر و قابل استفاده مجدد (reusable) بشه.

در React و ES6، هر فایل جاوااسکریپت به صورت پیش‌فرض یک ماژول مستقل است.

🔹 مثال ساده از ماژول‌ها

فرض کن یک فایل به نام person.js داری:

const name = "Ali";
const age = 25;

export { name, age };

و در فایل دیگر به نام app.js:

import { name, age } from "./person.js";

console.log(name); // Ali
console.log(age);  // 25

📌 با export متغیرها را از یک فایل خارج می‌کنی،
و با import در فایل دیگر استفاده می‌کنی.

🔹 انواع Export

در ES6 دو نوع export داریم:

1. Named Export (خروجی نام‌دار)

برای خروج چند متغیر یا تابع از یک فایل استفاده میشه.

// person.js
export const name = "Sara";
export const age = 22;
export function greet() {
  return "Hello!";
}

📥 Import در فایل دیگر:

import { name, age, greet } from "./person.js";

console.log(name);  // Sara
console.log(greet()); // Hello!

✅ می‌تونی فقط برخی از خروجی‌ها رو هم import کنی:

import { name } from "./person.js";

2. Default Export (خروجی پیش‌فرض)

اگر بخوای فقط یک مقدار اصلی از فایل صادر بشه، از export default استفاده می‌کنی.

// message.js
export default function sayHello() {
  return "Hello World!";
}

📥 Import در فایل دیگر:

import sayHello from "./message.js";

console.log(sayHello()); // Hello World!

✅ نکته: در default export نیازی نیست از { } استفاده کنی.

🔹 ترکیب Named و Default Export

ممکنه بخوای هر دو نوع خروجی در یک فایل داشته باشی:

// user.js
const name = "Reza";
const age = 28;

function getUser() {
  return `${name} (${age})`;
}

export { name, age };
export default getUser;

📥 Import در فایل دیگر:

import getUser, { name, age } from "./user.js";

console.log(getUser()); // Reza (28)

🔹 استفاده از ماژول‌ها در React

در React، هر کامپوننت معمولاً در یک فایل جدا ذخیره میشه و با export و import مدیریت میشه.

// File: Welcome.js
function Welcome() {
  return <h1>Hello React!</h1>;
}

export default Welcome;

📥 در فایل App.js:

import Welcome from "./Welcome";

function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

export default App;

📌 این ساختار یکی از پایه‌های اصلی React است.

🔹 مثال با Named Export در React

// components.js
export function Header() {
  return <h1>My Website</h1>;
}

export function Footer() {
  return <p>© 2025 All rights reserved.</p>;
}

📥 در App.js:

import { Header, Footer } from "./components";

function App() {
  return (
    <>
      <Header />
      <Footer />
    </>
  );
}

export default App;

🔹 تغییر نام هنگام Import

می‌تونی نام خروجی‌ها رو هنگام import تغییر بدی:

import { name as userName } from "./person.js";
console.log(userName);

📌 این روش زمانی مفیده که چند متغیر با نام مشابه داری.

🔹 Import همه‌ی خروجی‌ها با *

می‌تونی تمام خروجی‌های یک فایل رو با یک اسم وارد کنی:

import * as person from "./person.js";

console.log(person.name);
console.log(person.age);

📌 حالا تمام مقادیر export شده به صورت یک آبجکت person در دسترس هستن.

✅ نکته‌ها

✅ خلاصه

✅ نتیجه

ماژول‌ها (Modules) در ES6 و React باعث می‌شن کدها:

• قابل مدیریت‌تر و تمیزتر بشن،

• به راحتی در پروژه‌های بزرگ سازمان‌دهی بشن،

• و هر بخش از برنامه در فایل خودش تعریف بشه.