اولین کامپوننت شما

کامپوننت‌ها (Components) هسته اصلی و قلب تپنده راکت هستند. آن‌ها خشت‌های اولیه‌ای هستند که رابط کاربری (UI) برنامه‌تان را با آن‌ها می‌سازید؛ به همین دلیل، اینجا بهترین نقطه برای شروع یادگیری React است!

چیزهایی که در این درس یاد می‌گیرید:

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

• نقش کامپوننت‌ها در یک برنامه React چیست؟

• چگونه اولین کامپوننت خود را بنویسید؟

کامپوننت‌ها: بلوک‌های ساختنی رابط کاربری

در وب سنتی، ساختار صفحات با تگ‌های پیش‌فرض HTML مثل <h1> و <li> شکل می‌گرفت:

<article>
  <h1>اولین کامپوننت من</h1>
  <ol>
    <li>بلوک‌های ساختنی UI</li>
    <li>تعریف یک کامپوننت</li>
  </ol>
</article>

اما React به شما اجازه می‌دهد این کدهای ساختاری (Markup)، ظاهر (CSS) و رفتار (JavaScript) را با هم ترکیب کنید و ابزارهای سفارشی و قابل استفاده مجددی به نام کامپوننت بسازید. برای مثال، کدهای بالا را می‌توان به یک کامپوننت به نام <TableOfContents /> تبدیل کرد و آن را در تمام صفحات سایت رندر کرد.

شما می‌توانید مانند تگ‌های HTML، کامپوننت‌ها را درون یکدیگر بچینید و صفحات کامل بسازید:

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">مستندات</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

آموزش تعریف یک کامپوننت (Defining a Component)

یک کامپوننت React در اصل یک تابع ساده جاوااسکریپت است که خروجی آن کدهای ساختاری (Markup) است. ساختار یک کامپوننت از ۳ گام اصلی تشکیل شده است:

گام اول: صادر کردن کامپوننت (Export)

عبارت export default یک سینتکس استاندارد در جاوااسکریپت است (مختص راکت نیست). این عبارت به شما اجازه می‌دهد این تابع را به عنوان بخش اصلی فایل نشانه‌گذاری کنید تا بعداً بتوانید آن را در فایل‌های دیگر لود (Import) کنید.

گام دوم: تعریف تابع (Function)

با نوشتن function Profile() { } یک تابع جاوااسکریپتی به نام Profile می‌سازید.

⚠️ یک تله بزرگ: کامپوننت‌های React توابع معمولی جاوااسکریپت هستند، اما نام آن‌ها حتماً باید با حروف بزرگ (Capital Letter) شروع شود (مثلاً Profile و نه profile)؛ در غیر این صورت راکت کار نخواهد کرد!

گام سوم: اضافه کردن کد ساختاری (JSX)

این تابع یک تگ خروجی رندر می‌کند که شبیه HTML نوشته می‌شود اما در واقع زیرپوست خود کدهای جاوااسکریپت است! به این سینتکس JSX می‌گویند که اجازه می‌دهد کدهای HTML را مستقیماً داخل جاوااسکریپت تزریق کنید.

// App.js
export default function Profile() {
  return (
    <img
      src="https://react.dev/images/docs/scientists/MK3eW3As.jpg"
      alt="کاترین جانسون"
    />
  );
}

⚠️ نکته مهم در دستور Return: اگر کدهای شما همگی در یک خط و جلوی کلمه return نباشند، حتماً باید کل کد ساختاری را داخل یک پرانتز () قرار دهید؛ بدون پرانتز، تمام خطوط کدهای بعد از return کاملاً نادیده گرفته می‌شوند!

نحوه استفاده از یک کامپوننت (Using a Component)

حالا که کامپوننت <Profile /> را تعریف کرده‌اید، می‌توانید آن را درون کامپوننت‌های دیگر به کار ببرید:

// App.js
function Profile() {
  return (
    <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="کاترین جانسون" />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>دانشمندان شگفت‌انگیز</h1>
      {/* استفاده مجدد از کامپوننت بالا */}
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

مرورگر در نهایت چه کدی می‌بیند؟

به تفاوت حروف کوچک و بزرگ دقت کنید:

• تگ <section> با حروف کوچک است، پس راکت می‌فهمد که با یک تگ استاندارد HTML طرف است.

• تگ <Profile /> با حرف بزرگ شروع شده، پس راکت می‌فهمد که باید سراغ تابعی به همین نام برود.

در نهایت، کدی که به مرورگر تحویل داده می‌شود یک HTML خالص و تمیز است:

<section>
  <h1>دانشمندان شگفت‌انگیز</h1>
  <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="کاترین جانسون" />
  <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="کاترین جانسون" />
  <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="کاترین جانسون" />
</section>

سازماندهی و چیدمان تودرتوی کامپوننت‌ها

در دنیای راکت، از آنجا که Gallery دارد کامپوننت‌های Profile را رندر می‌کند، اصطلاحاً به Gallery کامپوننت والد (Parent) و به Profile کامپوننت فرزند (Child) می‌گویند. شما می‌توانید چند کامپوننت مرتبط را در یک فایل نگه دارید یا برای خلوت شدن، هر کدام را به یک فایل مجزا منتقل کنید.

⚠️ یک اشتباه مهلک (Pitfall): شما مجازید کامپوننت‌ها را درون هم رندر کنید، اما هرگز نباید تعریف یک کامپوننت را داخل بدنه کامپوننت دیگر بنویسید! این کار سرعت برنامه را به شدت کاهش داده و باگ‌های عجیبی تولید می‌کند.

// 🔴 اشتباه محض: تعریف تودرتو ممنوع!
export default function Gallery() {
  function Profile() { ... } 
  // ...
}

//  کاملاً درست: همه کامپوننت‌ها در بالاترین سطح فایل (Top Level) تعریف می‌شوند
export default function Gallery() {
  return <Profile />;
}

function Profile() {
  // ...
}

خلاصه نکات کلیدی (Recap)

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

• در یک برنامه مدرن راکت، تقریباً هر بخش از ظاهر سایت، یک کامپوننت است.

• کامپوننت‌های راکت همان توابع جاوااسکریپت هستند، با دو شرط طایی:

  1. نام آن‌ها همیشه با حرف بزرگ شروع می‌شود.

  2. خروجی آن‌ها کدهای ساختاری JSX است.