بخش 10: مفهوم کامپوننت و اهمیت آن در React

1. مقدمه کوتاه

اگر بخوام خیلی ساده بگم، کامپوننت (Component) یعنی یک تکه کد مستقل و قابل استفاده‌ مجدد که یک قسمت از رابط کاربری (UI) رو ایجاد و مدیریت می‌کنه.
در React، هر چیزی که روی صفحه می‌بینی — از یک دکمه کوچک گرفته تا کل یک صفحه — می‌تونه یک کامپوننت باشه.

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

• خوندنش سخت میشه
• تغییر دادنش همراه با باگ میشه
• زمان توسعه خیلی زیاد میشه

پس کامپوننت‌ها هسته اصلی React هستن و باید خیلی خوب درکشون کنی چون ۹۰٪ کار در React رو با همین‌ها انجام میدی.

---

2. تعریف و توضیح مفهومی

در برنامه‌نویسی React:

• کامپوننت = یک تابع یا کلاس (در نسخه‌های قبلی) که کدی برمی‌گردونه که صفحه رو می‌سازه.
• خروجی کامپوننت → در واقع JSX هست.
• کامپوننت می‌تونه:
• State داشته باشه (اطلاعاتی که داخل خودش نگه میداره)
• Props بگیره (اطلاعاتی که از بیرون بهش پاس داده میشه)
• خودش از چندین کامپوننت دیگه ساخته شده باشه.

📌 یک مثال روزمره:
فرض کن داری یک فروشگاه آنلاین طراحی می‌کنی:

• Header
• ProductCard
• ShoppingCart
  هر کدوم یک کامپوننت هست که بارها و بارها توی صفحات مختلف استفاده میشه.

---

3. جزئیات فنی و نکات عمیق‌تر

3.1. قانون نام‌گذاری

• کامپوننت‌ها باید با حرف بزرگ شروع بشن:
• ✅ MyButton
• ❌ mybutton
• دلیلش: JSX باید بفهمه که این یک تگ HTML پیش‌فرض هست یا یک کامپوننت سفارشی.

3.2. انواع کامپوننت

1. کامپوننت تابعی (Functional Component) → روش مدرن و پرکاربرد
2. کامپوننت کلاسی (Class Component) → روش قدیمی‌تر، هنوز در پروژه‌های قدیمی میبینی ولی ما در React 18 بیشتر از تابعی استفاده می‌کنیم.

---

4. کدها و مثال‌های متعدد

4.1. ساده‌ترین کامپوننت تابعی

function Welcome() {
  return <h1>سلام به دنیای React!</h1>;
}

export default Welcome;

🔍 تحلیل خط به خط:

1. function Welcome() → تعریف یک تابع ساده به‌اسم Welcome.
2. return <h1>...</h1> → اینجا JSX داریم. خروجی تابع باید یک عنصر JSX باشه.
3. export default → این کامپوننت رو صادر می‌کنیم تا بتونیم در فایل‌های دیگه استفاده کنیم.

📌 استفاده در پروژه:

import Welcome from './Welcome';

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

export default App;

نتیجه در مرورگر:

سلام به دنیای React!
سلام به دنیای React!

⚡ نکته: با یکبار تعریف، چندبار استفاده کردیم → یعنی قابل استفاده مجدد بودن.

---

4.2. کامپوننت با Props

فرض کن میخوای Welcome متن متفاوتی بگیره:

function Welcome(props) {
  return <h1>سلام {props.name}!</h1>;
}

export default Welcome;

📌 استفاده:

<Welcome name="علی" />
<Welcome name="نگار" />

📌 خروجی:

سلام علی!
سلام نگار!

---

4.3. کامپوننت با State

حالا میخوایم یک دکمه بسازیم که با کلیک تعداد کلیک‌ها رو نشون بده:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>شمارش: {count}</p>
      <button onClick={() => setCount(count + 1)}>افزایش</button>
    </div>
  );
}

export default Counter;

📌 استفاده:

<Counter />

📌 نتیجه:
هر بار روی دکمه کلیک کنی، شمارش یک واحد اضافه میشه (State update → re-render).

---

5. اهمیت کامپوننت‌ها

• تجزیه پروژه به بخش‌های کوچک → راحت‌تر مدیریت میشه.
• قابلیت استفاده مجدد → یک دکمه یا کارت محصول رو بارها استفاده کن.
• قابل تست بودن → هر کامپوننت رو جدا تست کن.
• نگهداری راحت → تغییر یک بخش بدون آسیب به کل پروژه.

---

6. اشتباهات رایج مبتدیان

1. نوشتن کل UI در App.jsx → باعث میشه کد شلوغ و غیرقابل نگهداری بشه.
2. استفاده از حرف کوچک برای نام (مثل mybutton) → باعث میشه React اونو HTML فرض کنه.
3. فراموش کردن export یا import درست → ارور Component is not defined میده.
4. برگشت دادن چند عنصر در JSX بدون المان والد → باید داخل <div> یا <> قرار بگیره.

---

7. تمرین‌های پیشنهادی

1. یک کامپوننت Header بساز که نام سایت رو نشون بده.
2. یک کامپوننت UserCard بساز که نام و سن رو از طریق props بگیره.
3. یک کامپوننت Toggle بساز که با کلیک متن رو بین “روشن” و “خاموش” جابجا کنه.

---

8. جمع‌بندی

• کامپوننت در React مثل یک بلوک لگو هست.
• پروژه‌های بزرگ رو میشه با این بلوک‌ها ساخت و ترکیب کرد.
• کد تمیز، قابل استفاده مجدد و قابل تست = استفاده درست از کامپوننت‌ها.
• از این به بعد، در هر مرحله توسعه، باید به فکر ساخت و تقسیم کد به کامپوننت‌های کوچک باشی.