کامپوننت چیست؟

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

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

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

انواع کامپوننت ها

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

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

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

چگونه یک کامپوننت بسازیم؟

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

import React from 'react';

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

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

export default App;

نکته: کامپوننت‌های ری اکت توابع معمولی جاوااسکریپت هستند، اما نام آن‌ها باید با حرف بزرگ شروع شود وگرنه کار نمی‌کنند!

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

این نوع کامپوننت‌ها به وسیله‌ی کلاس‌های ES6 ایجاد می‌شوند و از React.Component ارث می‌برند.

class Greeting extends React.Component {
  render() {
    return <h1>Hello PNLdev</h1>;
  }
}

نکته: متد render() محتوای HTML را بر می‌گرداند.

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

بعد از تعریف یک کامپوننت، می‌توانید آن را مانند یک تگ HTML در کامپوننت‌های دیگر فراخوانی کنید.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

Props

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

این داده‌ها در کامپوننت تابعی به عنوان پارامتر و در کامپوننت کلاسی به عنوان this.props دریافت می‌شوند.

function Greeting(props) {
  return <h1>Hello {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Greeting name="PNLdev" />);

کامپوننت در کامپوننت

می‌توانیم از کامپنوننت‌ها در کامپوننت‌های دیگر استفاده کنیم.

function Car() {
  return <h2>I am a Car!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

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

خلاصه درس

تمرین


مشاهده پاسخ
توسعه دهندگان
نیما عراقی