React چیست و چرا React

۱-۱ React چیست و چرا React

مقدمه

React یک کتابخانه‌ی جاوااسکریپت (JavaScript Library) برای ساخت رابط کاربری (User Interface) است. React توسط متا (Meta) توسعه داده شده و در حال حاضر — طبق مستندات رسمی react.dev — نسخه‌ی پایدار فعلی آن ۱۹.۳ است که در سپتامبر ۲۰۲۶ منتشر شده است. React از سال ۲۰۱۳ منتشر شده و امروز یکی از پراستفاده‌ترین ابزارها برای ساخت رابط کاربری در وب است.

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

چرا اصلاً به React نیاز داریم؟

فرض کن با جاوااسکریپت خالص (Vanilla JavaScript) بخواهی یک صفحه بسازی که با تغییر داده، بخشی از HTML صفحه هم به‌روز شود. برای این کار معمولاً باید:

• عنصر مورد نظر را با document.querySelector یا getElementById پیدا کنی.
• محتوای آن را با innerHTML یا textContent تغییر بدهی.
• این کار را برای هر تغییری، در هر جایی از صفحه، به‌صورت دستی تکرار کنی.

این روش در پروژه‌های کوچک مشکلی ایجاد نمی‌کند. اما وقتی صفحه بزرگ‌تر می‌شود و داده‌ها در چند جای مختلف صفحه به هم وابسته‌اند، این مدل دستیِ به‌روزرسانی DOM به‌سرعت پیچیده و شکننده می‌شود. باگ‌هایی مثل «این بخش از صفحه به‌روز نشد» یا «داده‌ی قدیمی هنوز روی صفحه مانده» معمولاً نتیجه‌ی همین مدیریت دستی هستند.

React این مشکل را با یک تغییر مدل ذهنی حل می‌کند: به‌جای اینکه تو مشخص کنی DOM چطور تغییر کند، تو فقط مشخص می‌کنی رابط کاربری در هر لحظه باید چه شکلی باشد؛ و React خودش تشخیص می‌دهد که DOM واقعی چطور باید به‌روز شود.

به این مدل، Declarative UI گفته می‌شود، در مقابل مدل Imperative که در جاوااسکریپت خالص با آن کار می‌کردی.

• در برنامه‌نویسی Imperative (دستوری)، تو مرحله‌به‌مرحله می‌گویی: «این عنصر را پیدا کن، این کلاس را حذف کن، این متن را بگذار».
• در برنامه‌نویسی Declarative (اعلانی)، تو فقط می‌گویی: «رابط کاربری باید این‌طور به‌نظر برسد»، و جزئیات اجرا را به React واگذار می‌کنی.

معماری مبتنی بر کامپوننت، به‌طور خلاصه

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

نکته‌ی مهم این است که کامپوننت‌ها قابل ترکیب (Composable) هستند؛ یعنی می‌توانی کامپوننت‌های کوچک بسازی و از ترکیب آن‌ها، کامپوننت‌های بزرگ‌تر بسازی. این موضوع را با جزئیات کامل در فصل ۲ بررسی می‌کنیم؛ فعلاً فقط باید بدانی که این ایده، ستون اصلی معماری React است.

یک مثال ساده برای درک تفاوت

فرض کن می‌خواهیم یک شمارنده (Counter) بسازیم که با کلیک روی یک دکمه، عدد نمایش‌داده‌شده یک واحد افزایش پیدا کند.

با جاوااسکریپت خالص، چیزی شبیه این می‌نویسیم:

let count = 0;
const button = document.querySelector("button");
const display = document.querySelector("span");

button.addEventListener("click", () => {
  count = count + 1;
  display.textContent = count;
});

در این کد، خودت مسئول هستی که هم مقدار count را نگه داری و هم به‌صورت دستی مطمئن شوی که display با مقدار جدید هماهنگ است. هرجا فراموش کنی display.textContent را به‌روز کنی، رابط کاربری با داده‌ی واقعی هماهنگ نخواهد بود.

در React، همین شمارنده این‌طور نوشته می‌شود (فعلاً فقط برای آشنایی با شکل کلی؛ جزئیات useState را در فصل ۳ می‌آموزیم):

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

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

در این کد، تو فقط اعلام کرده‌ای که دکمه باید مقدار count را نمایش بدهد. وقتی setCount صدا زده می‌شود، React خودش تشخیص می‌دهد که کدام بخش از DOM باید تغییر کند و آن را به‌روز می‌کند. تو دیگر نیازی نداری بگویی «کدام عنصر را پیدا کن و چه چیزی در آن بگذار».

تحلیل تفاوت رفتاری

نکته‌ای که باید از همین ابتدا در ذهنت بماند: در مثال React بالا، ما هیچ‌جا مستقیماً به DOM دستور نداده‌ایم. ما فقط گفته‌ایم «وقتی count این مقدار است، خروجی این‌طور باشد». این یعنی رابط کاربری، تابعی از داده (State) است، نه نتیجه‌ی مجموعه‌ای از دستورات دستی.

این ایده — که UI = تابعی از State — مهم‌ترین مدل ذهنی کل این دوره است و در فصل‌های بعدی (به‌خصوص فصل ۳ درباره‌ی State و فصل ۱۱ درباره‌ی مدل رندرینگ) آن را عمیق‌تر باز می‌کنیم.

جمع‌بندی

React به تو اجازه می‌دهد رابط کاربری را به‌صورت اعلانی (Declarative) و بر اساس کامپوننت‌ها بسازی. به‌جای مدیریت دستی DOM، فقط مشخص می‌کنی UI در هر لحظه بر اساس داده چه شکلی باید داشته باشد، و React مسئولیت به‌روزرسانی واقعی صفحه را برعهده می‌گیرد. این تغییر مدل ذهنی، پایه‌ی تمام مباحثی است که در ادامه‌ی این دوره یاد می‌گیری.

function App() {
  const [count, setCount] = React.useState(0);

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