از HTML به React: چگونه تفکر کامپوننتی پیدا کنیم؟

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

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

آموزش React برای طراحان HTML

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

چرا React برای طراحان HTML جذاب است؟

• ساختار JSX در React شبیه HTML است؛ بنابراین حس غربت نخواهی داشت.
• می‌توانی اجزای تکراری HTML را به کامپوننت‌های مستقل تبدیل کنی و بارها استفاده‌شان کنی.
• React کمک می‌کند طراحی‌های بزرگ را ماژولار و قابل نگهداری نگه داری.
• با props و state می‌توانی UI پویا بسازی، بدون نیاز به دستکاری مستقیم DOM.

شروع ساده با یک مثال

بیایید یک تکه HTML ساده را به React تبدیل کنیم:

<!-- HTML -->
<div class="button primary">
  Click me
</div>

همان کد در React:

// React (JSX)
function PrimaryButton() {
  return <div className="button primary">Click me</div>;
}

نکته مهم: در JSX باید از className به‌جای class استفاده کنید، چون JSX در واقع ترکیبی از JavaScript و XML است و class در JavaScript یک کلمه کلیدی است.

ابزارهایی که باید با آن‌ها آشنا شوید:

• Node.js و npm: برای نصب پکیج‌ها و اجرای پروژه React
• Create React App یا Vite: ابزارهایی برای راه‌اندازی سریع پروژه
• کامپایل JSX: مرورگر JSX را نمی‌فهمد؛ باید با ابزارهایی مثل Babel آن را به JavaScript معمولی تبدیل کنیم (این کار را ابزارهای بالا برایت انجام می‌دهند)

تبدیل HTML به کامپوننت‌های React

تبدیل HTML سنتی به ساختار کامپوننت‌محور React، نخستین گام در گذار به معماری جدید رابط کاربری است. در HTML معمولی، اجزای صفحه اغلب در یک فایل واحد یا چند فایل تفکیک‌نشده نوشته می‌شوند. این شیوه در پروژه‌های کوچک شاید کافی باشد، اما در پروژه‌های متوسط و بزرگ، نگهداری و توسعه آن به‌مراتب دشوارتر خواهد شد.

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

مثال عملی

در HTML ممکن است چنین ساختاری وجود داشته باشد:

<div class="card">
  <img src="avatar.jpg" alt="Avatar">
  <h3>John Doe</h3>
  <p>Frontend Developer</p>
</div>

همین ساختار در React به شکل زیر تعریف می‌شود:

function ProfileCard() {
  return (
    <div className="card">
      <img src="avatar.jpg" alt="Avatar" />
      <h3>John Doe</h3>
      <p>Frontend Developer</p>
    </div>
  );
}

مزیت‌های تبدیل به کامپوننت

• جداسازی مسئولیت‌ها: هر کامپوننت وظیفه‌ی خاصی دارد.
• قابلیت استفاده مجدد: می‌توان یک کامپوننت را در بخش‌های مختلف برنامه استفاده کرد.
• توسعه‌پذیری بالا: افزودن ویژگی‌های جدید به یک کامپوننت ساده‌تر است.
• تست‌پذیری بهتر: تست واحد برای هر کامپوننت به‌صورت جداگانه امکان‌پذیر است.

معماری کامپوننت‌محور

معماری کامپوننت‌محور (Component-Based Architecture) یکی از ارکان اصلی توسعه نرم‌افزارهای مدرن تحت وب با React محسوب می‌شود. این معماری بر اصل «تقسیم به اجزای مستقل و قابل ترکیب» استوار است و هدف آن ایجاد ساختاری مقیاس‌پذیر، قابل نگهداری و قابل توسعه برای رابط کاربری است.

تعریف معماری کامپوننت‌محور

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

مزایای معماری کامپوننت‌محور

• ساده‌سازی توسعه و نگهداری: توسعه‌دهنده می‌تواند به‌جای تمرکز بر کل سیستم، هر بخش را جداگانه توسعه دهد.
• قابلیت استفاده مجدد: کامپوننت‌ها می‌توانند در صفحات مختلف یا پروژه‌های مختلف استفاده شوند.
• افزایش قابلیت تست‌پذیری: کامپوننت‌های مستقل را می‌توان به‌صورت واحد (unit) تست کرد.
• ارتقای خوانایی و نظم کد: تقسیم منطقی UI به قطعات کوچک‌تر، ساختار پروژه را شفاف‌تر می‌سازد.

رابطه با Design System

در پروژه‌هایی که از طراحی سیستم (Design System) استفاده می‌شود، معماری کامپوننت‌محور به‌راحتی با آن همخوانی دارد. در این حالت، هر مؤلفه طراحی (مانند دکمه، ورودی، جدول، اعلان‌ها و غیره) به یک کامپوننت مستقل React تبدیل می‌شود و می‌توان آن را با پارامترهای مختلف پیکربندی کرد.

ساختار سلسله‌مراتبی

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

App
├── Header
├── MainContent
│   ├── ArticleList
│   └── Sidebar
└── Footer

کامپوننت‌ها با قابلیت استفاده مجدد در React

یکی از مفاهیم کلیدی در توسعه با React، طراحی کامپوننت‌هایی است که قابلیت استفاده مجدد (Reusability) داشته باشند. این ویژگی نه‌تنها باعث کاهش تکرار کد می‌شود، بلکه توسعه سریع‌تر، تست ساده‌تر و نگهداری مؤثرتر پروژه را امکان‌پذیر می‌سازد.

تعریف کامپوننت قابل استفاده مجدد

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

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

• افزایش سرعت توسعه: با تعریف کامپوننت‌های عمومی (مانند دکمه‌ها، ورودی‌ها، کارت‌ها، مودال‌ها و ...) می‌توان آن‌ها را در بخش‌های مختلف پروژه به‌کار برد.
• یکپارچگی در تجربه کاربری (UX): استفاده مکرر از یک کامپوننت استاندارد در بخش‌های مختلف رابط کاربری، منجر به سازگاری بصری و عملکردی می‌شود.
• کاهش احتمال خطا: با آزمون و بهینه‌سازی یک کامپوننت عمومی، می‌توان از عملکرد صحیح آن در همه جای پروژه اطمینان حاصل کرد.

مثال ساده از یک کامپوننت بازاستفاده‌پذیر

function Button({ label, onClick, variant }) {
  const className = variant === "primary" ? "btn-primary" : "btn-secondary";
  return <button className={className} onClick={onClick}>{label}</button>;
}

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

سازماندهی و نگهداری

در پروژه‌های متوسط تا بزرگ، توصیه می‌شود کامپوننت‌های قابل استفاده مجدد در ساختاری مستقل مانند components/common یا ui-kit قرار داده شوند. این موضوع به افزایش انسجام ساختار پروژه و مدیریت بهتر کامپوننت‌ها کمک می‌کند.

Props در React

در معماری کامپوننت‌محور React، داده‌ها از طریق مفهومی به‌نام Props از کامپوننت‌های والد به فرزندان منتقل می‌شوند. props که شکل کوتاه‌شده‌ی properties است، ابزاری که برای پیکربندی کامپوننت‌ها به‌صورت انعطاف‌پذیر و قابل کنترل استفاده می‌شود.

نقش Props در طراحی کامپوننت

Props باعث می‌شوند یک کامپوننت مستقل، قابل تنظیم و قابل بازاستفاده باشد. به‌جای اینکه اطلاعات خاص درون کامپوننت سخت‌کد شود، داده‌ها از بیرون به آن ارسال می‌شوند. این روش موجب جدایی «منطق نمایش» از «داده» و افزایش قابلیت ترکیب‌پذیری می‌شود.

نحوه استفاده از Props

در ری‌اکت، props به‌صورت آرگومان ورودی به توابع کامپوننتی منتقل می‌شوند:

function Welcome(props) {
  return <h1>سلام، {props.name}</h1>;
}

و هنگام استفاده:

<Welcome name="سارا" />

در این مثال، کامپوننت Welcome یک متن متفاوت برای هر مقدار prop نمایش می‌دهد، بدون اینکه نیاز باشد ساختار داخلی آن تغییر کند.

destructuring برای خوانایی بیشتر

می‌توان props را مستقیماً از ورودی کامپوننت استخراج کرد تا کد خواناتر شود:

function Welcome({ name }) {
  return <h1>سلام، {name}</h1>;
}

Props فقط خواندنی یا Read-only هستند

کامپوننت‌ها نباید props دریافتی را تغییر دهند. props باید همان‌گونه که دریافت شده‌اند مورد استفاده قرار گیرند، چرا که React بر اصل جریان داده یک‌طرفه (unidirectional data flow) متکی است.

آشنایی با State در React‌

در حالی که Props به انتقال داده از والد به فرزند اختصاص دارند، State برای مدیریت داده‌های درونی و پویا کامپوننت‌ها طراحی شده است. هر کامپوننت می‌تواند وضعیت (State) خاص خود را داشته باشد که در طول عمر آن تغییر می‌کند و واکنش UI به این تغییرات، توسط React مدیریت می‌شود.

تفاوت اصلی State با Props

Props از بیرون به کامپوننت داده می‌شود و غیرقابل تغییر است (read-only) اما State درون کامپوننت نگهداری می‌شود و می‌تواند در پاسخ به رویدادها تغییر کند.

تعریف State در کامپوننت تابعی

در کامپوننت‌های تابعی، State از طریق Hook معروف useState مدیریت می‌شود:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>شمارش: {count}</p>
      <button onClick={() => setCount(count + 1)}>افزایش</button>
    </div>
  );
}

در این مثال:

• count مقدار کنونی State است.
• setCount تابعی است برای به‌روزرسانی آن.
• useState(0) مقدار اولیه‌ی State را تعیین می‌کند.

رفتار React در برابر تغییر State

هر بار که State تغییر می‌کند، React کامپوننت را مجدداً رندر می‌کند تا UI جدید با وضعیت تازه هماهنگ شود. این رندر مجدد، سریع، بهینه و فقط در همان بخش لازم انجام می‌شود.

نکات مهم در استفاده از State

• نباید State را به‌طور مستقیم تغییر داد؛ فقط از تابع setState یا setCount استفاده می‌شود.
• استفاده بیش‌ازحد از State در یک کامپوننت می‌تواند باعث پیچیدگی شود؛ بهتر است State به کامپوننت‌های کوچک‌تر تقسیم شود.

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

یکی از مفاهیم بنیادی در React، ترکیب‌پذیری (Composition) است. ترکیب به این معناست که می‌توان کامپوننت‌های کوچک و مستقل را به‌شکلی سازمان‌یافته کنار یکدیگر قرار داد و رابط کاربری پیچیده‌تری ساخت. این رویکرد برخلاف وراثت (inheritance) است که در برخی دیگر از چارچوب‌ها رایج است.

ترکیب به‌عنوان اصل طراحی

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

function Page() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

در این مثال، Page شامل سه بخش مستقل است که به‌صورت ماژولار توسعه یافته‌اند.

استفاده از children برای انعطاف در ترکیب

React قابلیتی به‌نام props.children دارد که به کامپوننت‌ها امکان می‌دهد تا محتوایی دلخواه را درون خود جای دهند:

function Card({ children }) {
  return <div className="card">{children}</div>;
}

<Card>
  <h2>عنوان</h2>
  <p>متن توضیحی</p>
</Card>

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

مزایای ترکیب‌پذیری

• تفکیک وظایف: هر کامپوننت مسئول یک وظیفه‌ی خاص است.
• افزایش خوانایی و نگهداری‌پذیری کد.
• امکان تست و اشکال‌زدایی ساده‌تر برای هر جزء به‌صورت جداگانه.
• بازاستفاده‌پذیری بالا.

در پایان

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

تبدیل HTML به کامپوننت‌های React نیازمند درک دقیق از روابط بین اجزای رابط کاربری، تعریف مرزهای منطقی، و شناخت ابزارهایی همچون props و state است. با به‌کارگیری این مفاهیم، می‌توان رابط‌هایی ساخت که هم خوانا و قابل نگهداری باشند، و هم به‌راحتی توسعه یابند.

معماری کامپوننت‌محور نه‌تنها توسعه‌ی UI را ساخت‌یافته‌تر می‌کند، بلکه بنیانی استوار برای همکاری تیمی، مقیاس‌پذیری پروژه‌ها، و ساخت سیستم‌های طراحی مدرن فراهم می‌سازد.

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