React چیست و چرا React؟

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

مشکل: مدیریت دستی تغییرات رابط کاربری

فرض کنید بخواهیم بدون React، یک شمارنده ساده بسازیم که با کلیک روی یک دکمه، مقدار آن یک واحد افزایش یابد. با جاوااسکریپت خالص باید مراحل زیر را به‌صورت دستی و مرحله‌به‌مرحله انجام دهیم:

javascript
let count = 0;
const countElement = document.getElementById("count");
const button = document.getElementById("increment");

button.addEventListener("click", function () {
  count = count + 1;
  countElement.textContent = count; // باید خودمان DOM را به‌روزرسانی کنیم
});

در این رویکرد، که به آن برنامه‌نویسی دستوری (Imperative Programming) گفته می‌شود، ما باید دقیقاً مشخص کنیم چگونه DOM باید تغییر کند: کدام عنصر، با کدام مقدار، در چه لحظه‌ای. با بزرگ‌تر شدن برنامه و افزایش تعداد بخش‌هایی که باید هماهنگ با یکدیگر تغییر کنند، مدیریت دستی این هماهنگی به‌سرعت پیچیده و مستعد خطا می‌شود.

رویکرد React: توصیف رابط کاربری بر اساس داده

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

به بیان دیگر، در React رابط کاربری را به شکل زیر می‌بینیم:

رابط کاربری = تابعی از داده (UI as a function of data)

یعنی هر بار که داده تغییر می‌کند، ما توضیح می‌دهیم که رابط کاربری جدید بر اساس این داده باید چگونه باشد، و خود React مسئول است که تشخیص دهد چه تغییری در DOM واقعی لازم است و آن تغییر را اعمال کند. این مسئولیت مقایسه و به‌روزرسانی، از دوش توسعه‌دهنده برداشته و به React سپرده می‌شود.

React یک کتابخانه است، نه یک زبان جدید

نکته مهمی که باید از همین ابتدا روشن شود این است که React یک زبان برنامه‌نویسی جدید نیست؛ React یک کتابخانه (Library) جاوااسکریپتی است که برای ساخت رابط کاربری طراحی شده است. هر چیزی که در React می‌نویسیم، در نهایت جاوااسکریپت است، اما در قالب مفاهیمی مانند کامپوننت (Component)، وضعیت (State) و ویژگی (Props) سازمان‌دهی می‌شود که در درس‌های بعدی با آن‌ها آشنا خواهیم شد.

چرا React همچنان یکی از پرکاربردترین انتخاب‌ها است

چند دلیل اصلی باعث شده React در طول سال‌ها جایگاه قوی خود را در توسعه رابط کاربری حفظ کند:

  • مدل ذهنی توصیفی، منطق برنامه را قابل پیش‌بینی‌تر و قابل نگهداری‌تر می‌کند.
  • معماری مبتنی بر کامپوننت اجازه می‌دهد رابط کاربری به بخش‌های کوچک، مستقل و قابل استفاده مجدد تقسیم شود.
  • اکوسیستم بزرگ و پایدار، شامل ابزارهای Routing، مدیریت State و فریم‌ورک‌هایی مانند Next.js.
  • پشتیبانی مداوم و توسعه فعال توسط تیم React و جامعه‌ای بزرگ از توسعه‌دهندگان.

جمع‌بندی

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