تعریف کامپوننت تابعی و ساختار آن

مقدمه

به فصل چهارم خوش آمدید! اکنون که با JSX آشنا شده‌ایم، آماده‌ایم تا به قلب تپنده React یعنی «کامپوننت‌ها» بپردازیم. همانطور که قبلاً اشاره شد، کامپوننت‌ها به ما اجازه می‌دهند تا رابط کاربری (UI) را به قطعات کوچک، مستقل و قابل استفاده مجدد تقسیم کنیم. این رویکرد، توسعه اپلیکیشن‌های پیچیده را بسیار ساده‌تر و مدیریت‌پذیرتر می‌کند.

در React مدرن، روش اصلی برای ساخت کامپوننت‌ها، استفاده از «کامپوننت‌های تابعی» (Functional Components) است. این کامپوننت‌ها در واقع توابع ساده جاوااسکریپت هستند که JSX را برمی‌گردانند.

ساختار یک کامپوننت تابعی

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

JAVASCRIPT (React)

import React from 'react';

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

export default Welcome;

بیایید این ساختار را بررسی کنیم:

• وارد کردن React: هرچند ممکن است به نظر برسد که متغیر React مستقیماً در کد JSX استفاده نشده، اما وارد کردن آن ضروری است. زیرا کامپایلر Babel کد JSX شما را به فراخوانی‌های React.createElement() تبدیل می‌کند.
• تعریف تابع: ما یک تابع جاوااسکریپت استاندارد به نام Welcome تعریف کرده‌ایم. طبق قرارداد، نام کامپوننت‌ها همیشه با حرف بزرگ شروع می‌شود. این به React کمک می‌کند تا کامپوننت‌های سفارشی را از تگ‌های HTML عادی تشخیص دهد.
• بازگرداندن JSX: تابع ما یک عنصر JSX را برمی‌گرداند که UI کامپوننت را توصیف می‌کند.
• خروجی گرفتن (Export): با استفاده از export default، ما این کامپوننت را در دسترس سایر فایل‌های پروژه قرار می‌دهیم تا بتوانیم آن را در کامپوننت‌های دیگر import کرده و استفاده کنیم.

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

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

App.js

import Welcome from './Welcome';

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

export default App;

در این مثال، ما کامپوننت Welcome را در فایل App.js وارد کرده و سه بار از آن استفاده کرده‌ایم. این یکی از بزرگترین مزایای کامپوننت‌ها را نشان می‌دهد: **قابلیت استفاده مجدد**. ما یک بار منطق و ساختار Welcome را تعریف کردیم و اکنون می‌توانیم هر چند بار که بخواهیم از آن در سراسر اپلیکیشن خود استفاده کنیم.

در این درس، با ساختار و نحوه تعریف کامپوننت‌های تابعی به عنوان بلوک‌های سازنده اصلی در React آشنا شدیم. دیدیم که این کامپوننت‌ها توابع ساده جاوااسکریپت هستند که JSX را برمی‌گردانند و می‌توانند به راحتی در کنار هم ترکیب شوند. در درس بعدی، به «استفاده از props و ارسال داده به کامپوننت‌ها» خواهیم پرداخت و یاد می‌گیریم که چگونه کامپوننت‌های خود را با ارسال داده‌های داینامیک، انعطاف‌پذیرتر و قدرتمندتر کنیم.