React چیست و چرا محبوب است؟

مقدمه

به دوره آموزش React خوش آمدید! در دنیای وب امروز، کاربران انتظار دارند که وب‌سایت‌ها و اپلیکیشن‌ها سریع، تعاملی و پویا باشند. ساخت چنین رابط‌های کاربری (User Interfaces یا UI) پیچیده‌ای با استفاده از جاوااسکریپت خالص و دستکاری مستقیم DOM می‌تواند به سرعت منجر به کدهای پیچیده، شکننده و غیرقابل نگهداری شود.

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

مسئله اصلی: مدیریت وضعیت (State)

بزرگترین چالشی که React آن را هدف قرار داده، مدیریت «وضعیت» یا State در اپلیکیشن‌های وب است. State به هر داده‌ای گفته می‌شود که در طول زمان تغییر می‌کند و این تغییر باید در UI منعکس شود. برای مثال، لیستی از آیتم‌ها در یک سبد خرید، متنی که کاربر در یک فیلد ورودی تایپ می‌کند، یا اینکه آیا یک منو باز یا بسته است، همگی بخشی از state اپلیکیشن هستند.

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

رویکرد React: رابط کاربری اعلانی (Declarative UI)

React این مشکل را با یک رویکرد «اعلانی» (Declarative) حل می‌کند. به جای اینکه به React بگوییم چگونه DOM را گام به گام تغییر دهد، ما به سادگی به آن می‌گوییم که UI ما در هر state مشخصی، باید چگونه به نظر برسد.

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

JAVASCRIPT (React)

function LikeButton() {
  const [liked, setLiked] = React.useState(false);

  if (liked) {
    return 'You liked this.';
  }

  return (
    <button onClick={() => setLiked(true)}>
      Like
    </button>
  );
}

در این مثال ساده، ما به React می‌گوییم: "اگر وضعیت liked برابر با true است، متن 'You liked this' را نمایش بده. در غیر این صورت، یک دکمه نمایش بده." ما هرگز به صورت دستی دکمه را حذف و متن را اضافه نمی‌کنیم؛ React این کار را برای ما انجام می‌دهد.

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

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

برای مثال، یک صفحه وبلاگ می‌تواند از کامپوننت‌های زیر تشکیل شده باشد: Navbar، Sidebar، ArticleList، و هر ArticleItem در لیست نیز خود یک کامپوننت مجزا باشد. این رویکرد مزایای زیادی دارد:

• قابلیت استفاده مجدد (Reusability): شما می‌توانید یک کامپوننت (مانند یک دکمه سفارشی) را یک بار ساخته و در سراسر اپلیکیشن خود از آن استفاده کنید.
• قابلیت نگهداری (Maintainability): هر کامپوننت مسئولیت مشخصی دارد و تغییر در یک کامپوننت، تأثیری بر سایر بخش‌های برنامه ندارد.
• تست‌پذیری (Testability): تست کردن کامپوننت‌های کوچک و ایزوله بسیار ساده‌تر از تست کردن یک صفحه وب یکپارچه است.

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