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

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

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

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

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

• کامپوننت‌های تابعی (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;

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

این نوع کامپوننت‌ها به وسیله‌ی کلاس‌های 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 (مخفف 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 />);