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

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

چرا باید از React استفاده کنیم

1. معماری مبتنی بر کامپوننت (Component-based)

ری‌اکت کامپوننت بیس است یعنی اجزا و بخش های مختلف را می توان جداگانه ایجاد و استفاده کرد و رویکرد اجازه می دهد که از یک بخش در چندین جای مختلف استفاده کرد. این کار نگهداری و توسعه‌ سایت (اپلیکیشن) را ساده تر می‌کند.

2. Virtual DOM و کارایی در به‌روزرسانی‌ها

وقتی در یک سایت چیزی تغییر می‌کند (مثلاً تعداد لایک زیاد می‌شود، متنی عوض می‌شود)، مرورگر باید بخش‌هایی از صفحه را که تغییر داده شده دوباره نمایش دهد. این کار اگر زیاد اتفاق بیفتد، می‌تواند باعث کندی شود.

Virtual DOM چطور کار می‌کند؟

به جای اینکه React مستقیماً به صفحه اصلی دست بزند، اول تغییرات را روی یک نسخهٔ سبک‌تر (Virtual DOM) انجام می‌دهد. بعد این نسخهٔ جدید را با نسخهٔ قبلی مقایسه می‌کند و فقط همان بخش‌هایی که واقعاً تغییر کرده‌اند به صفحهٔ واقعی (DOM) اعمال می‌شوند.

3. اکوسیستم بزرگ و ابزارهای بالغ

برخی قابلیت ها هستند که خود React مستقیما از آنها پشتیبانی نمیکند برای مواردی مانند (روتینگ، SSR/SSG، مدیریت state، فرم‌ها)، کتابخانه‌ها و فریم‌ورک‌های مثل React Router، Redux/Zustand، Next.js و Vite وجود دارند که راه‌حل‌های عملی و کاملتری ارائه می‌دهند. یعنی شما می توانید با استفاده از این فریمورک ها که بر پایه ی ری‌اکت طراحی شده اند از قابلیت های بیشتر و آماده استفاده کنید.

4. بازار کار و محبوبیت ری اکت

ری اکت یک کتابخانه شناخته شده و محبوب است و بازار کار گسترده تری نسبت به سایر فریمورک هایی مانند Vue.js یا آنگولار دارد و این می تواند یک نکته ی مهم برای دلیل انتخاب این فریمورک باشد.

چه شرکت‌ها و پروژه‌هایی از React (یا فریم‌ورک‌های مبتنی بر آن) استفاده کرده‌اند؟

شاید جالب باشد که بدانید Instagram با استفاده از ری‌اکت توسعه داده شده است همچنین شرکت های بزرگی مانند Netflix, Uber, Dropbox در بخش هایی از رابط های کاربری خود از ری اکت استفاده کرده اند.

همین طور Next.js یکی از فریمورک های معروفی است که بر پایه ی ری اکت ساخته شده که شرکت هایی مانند Nike، OpenAI از آن استفاده کرده اند. (Next.js برای ری اکت مانند Nuxt.js برای Vuejs است که می توانید مقاله آشنایی با Vue.js و Nuxt.js را مشاهده کنید)

معایب کتابخانه React (ری‌اکت)

ری اکت خود یک کتابخانه است نه یک فریمورک

این یعنی مثلا برای استفاده از Routing (مسیریابی های سایت) و یا برخی از قابلیت های باید از چندین کتابخانه ی دیگر هم استفاده کنید و به صورت ترکیبی از آنها استفاده کنید که این می تواند کمی پیچیدگی ایجاد کند

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

وجود کتابخانه های مختلف در یک زمنیه می تواند باعث سردرگمی افراد تازه کار شود.

پیچیدگی و نمودار یادگیری بزرگتر

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

مسائل سئو در SPAها (بدون SSR/SSG)

اپلیکیشن‌های تک‌صفحه‌ای که به صورت پیشفرض در سمت کلاینت رندر می‌شوند ممکن است برای برخی از موتورهای جستجو مشکل ایجاد کند؛ اگر SEO مهم است باید از SSR/SSG (مثلاً Next.js) یا prerendering استفاده کنید

برای چه مواردی استفاده از React مناسب نیست

• سایت‌های محتوایی ساده با صفحات ایستا (وبلاگ‌های ساده، صفحات اطلاع‌رسان) که نیازی به تعامل پیچیده ندارند — ممکن است یک CMS یا رندر سمت سرور ساده بهتر و سبک‌تر باشد.

• اپ‌ها یا سایت هایی که هدف‌شان حداقل جاوااسکریپت (کم حجم بودن و سبک بودن) و بیشترین سرعت بارگذاری اولیه است، مگر اینکه از SSG/SSR استفاده کنید. (یعنی انتخاب معماری مهم است.)

اما به هر حال اگر تصمیم به استفاده از ری اکت دارید در ادامه نحوه نصب آن را توضیح می دهیم

شروع نصب React

برای نصب و راه اندازی یک صفحه سایت با استفاده از کتابخانه ی ری اکت می توانید دستورات زیر را در ترمینال (CMD) وارد می کنیم:

npm create vite@latest my-app -- --template react-ts

cd my-app

npm install

با اجرای سه دستور بالا ترکیبی از کتابخانه React به همراه Vite و ساختار TypeScript برای توسعه ی آن نصب می شود. و با اجرای دستور زیر می توانید برنامه را برای توسعه اجرا کنید و با هر تغییر در کد ها نتیجه آن را در مرورگر خود مشاهده کنید:

npm run dev

اما اگر می خواهید از Next.js استفاده کنید می توانید از طریق اجرای دستورات زیر آن را نصب کنید:

npx create-next-app@latest my-next-app

cd my-next-app

npm run dev

کجا از کدام معماری باید استفاده کنیم؟

اگر می خواهید یک سایت را توسعه دهید پیشنهاد می دهیم که از Next.js استفاده کنید.

اگر میخواهید یک اپلیکیشن توسعه دهید بهتر است از react یا بهتره بگویم React Native استفاده کنید. که به شما اجازه می دهد برای سیستم عامل های مختلف بتوانید اپلیکیشن ایجاد کنید همان طور که گفتیم برای مثال اینستاگرام با همان ری اکت نیتیو ساخته شده است.