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

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

با استفاده از کامپوننت‌ها، می‌توان به مزایای زیر دست یافت:

• کد تمیزتر و قابل نگهداری می‌شود.
• توسعه تیمی آسان‌تر خواهد بود.
• فرآیند تست و خطایابی ساده‌تر می‌گردد.

در ری اکت دو نوع کامپوننت داریم:

• کامپوننت‌های تابعی (Functional Components)
• کامپوننت‌های کلاسی (Class Components)

نکته: ما در این درس روی کامپوننت‌های تابعی تمرکز می‌کنیم، چون ساده‌تر و رایج‌تر هستند.

برای ساخت یک کامپوننت تابعی در ری اکت، کافی‌ست یک تابع جاوااسکریپت تعریف کنید که JSX را به عنوان خروجی بازگرداند. سپس می‌توانید آن را در پروژهٔ خود مورد استفاده قرار دهید.

در مسیر src، یک پوشهٔ جدید با نام components ایجاد کرده و سپس فایلی با نام Greeting.jsx درون آن قرار دهید. این فایل، کامپوننت‌ شما را در خود جای خواهد داد.

import React from 'react';

function Greeting() {
  return <h1>Hello PNLdev!</h1>;
}

export default Greeting;

در این مثال، Greeting یک کامپوننت تابعی ساده است که یک عنصر h1 را به عنوان خروجی بازمی‌گرداند.

این کامپوننت با استفاده از export default به‌صورت پیش‌فرض صادر شده است تا در سایر بخش‌های پروژه قابل استفاده باشد.

نکته: نام کامپوننت‌ها در ری اکت باید با حرف بزرگ آغاز شود، در غیر این‌صورت ری اکت آن‌ها را به عنوان تگ HTML عادی در نظر می‌گیرد.

حالا می‌توانید این کامپوننت را درون یک کامپوننت دیگر (مانند App) استفاده کنید:

import Greeting from './components/Greeting.jsx';

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

در این مثال، <Greeting /> مانند یک تگ HTML رفتار می‌کند و خروجی مربوط به کامپوننت Greeting را نمایش می‌دهد.

یکی از قدرت‌های کامپوننت‌ها این است که می‌توانید چندین بار از آن‌ها استفاده کنید:

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

Props (مخفف Properties) روشی برای انتقال داده از کامپوننت والد به کامپوننت فرزند هستند.

با استفاده از props، می‌توانید کامپوننت‌ها را شخصی‌سازی کرده و محتوای متنوعی را نمایش دهید.

import Greeting from './components/Greeting.jsx';

function App() {
  return (
    <div>
      <Greeting name="Nima" />
      <Greeting name="Ali" />
      <Greeting name="Reza" />
    </div>
  );
}

export default App;

props یک شیء جاوااسکریپتی است که شامل ویژگی‌های ارسال‌شده به کامپوننت است.

با استفاده از props.name، می‌توانید به مقدار ویژگی name که هنگام فراخوانی کامپوننت مشخص شده، دسترسی داشته باشید.

هر بار که کامپوننت <Greeting /> را فراخوانی می‌کنید، می‌توانید مقدار متفاوتی به آن ارسال نمایید.