React چیست؟ React چه مشکلی را حل می‌کند؟ راهنمای ساده برای شروع

React چیست؟ React چه مشکلی را حل می‌کند؟

اگر با HTML، CSS و JavaScript آشنا شده باشید، احتمالاً در مرحله بعد نام React را زیاد شنیده‌اید. React یکی از محبوب‌ترین ابزارهای دنیای توسعه Frontend است و بسیاری از وب‌سایت‌ها و اپلیکیشن‌های مدرن با استفاده از آن ساخته شده‌اند.

اما یک سؤال مهم وجود دارد:

اگر با JavaScript می‌توانیم یک وب‌سایت بسازیم، چرا به React نیاز داریم؟

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

در این مقاله ابتدا با مفهوم React آشنا می‌شویم، سپس مشکلی که React در توسعه رابط کاربری حل می‌کند را بررسی می‌کنیم و در نهایت می‌بینیم چرا React به یکی از ابزارهای مهم توسعه Frontend تبدیل شده است.

React چیست؟

React یک کتابخانه JavaScript برای ساخت رابط کاربری (User Interface یا UI) است.

React توسط تیم Facebook توسعه داده شد و امروزه توسط Meta و جامعه بزرگی از توسعه‌دهندگان نگهداری و توسعه داده می‌شود.

اگر بخواهیم خیلی ساده بگوییم:

React به ما کمک می‌کند رابط کاربری وب‌سایت‌ها و اپلیکیشن‌های پیچیده را به بخش‌های کوچک‌تر و قابل مدیریت تقسیم کنیم.

برای مثال، تصور کنید یک فروشگاه اینترنتی داریم. صفحه اصلی این فروشگاه ممکن است بخش‌های مختلفی داشته باشد:

• Header

• منوی سایت

• نوار جستجو

• لیست محصولات

• کارت محصول

• سبد خرید

• فیلتر محصولات

• Footer

در روش‌های ساده‌تر ممکن است تمام این بخش‌ها در یک ساختار بزرگ HTML و JavaScript مدیریت شوند.

اما React به ما اجازه می‌دهد هر قسمت را به یک Component تبدیل کنیم.

مثلاً:

<Header />

<Search />

<ProductList />

<Cart />

<Footer />

هر کدام از این قسمت‌ها می‌توانند یک کامپوننت مستقل باشند.

به همین دلیل یکی از مهم‌ترین مفاهیمی که هنگام یادگیری React با آن روبه‌رو می‌شوید، Component یا کامپوننت است.

React چه مشکلی را حل می‌کند؟

برای درک بهتر React، باید به یک مسئله مهم در توسعه وب توجه کنیم.

فرض کنید یک وب‌سایت فروشگاهی داریم که در آن کاربر می‌تواند محصولی را به سبد خرید اضافه کند.

وقتی کاربر روی دکمه «افزودن به سبد خرید» کلیک می‌کند، باید چند اتفاق رخ دهد:

1. محصول به سبد خرید اضافه شود.

2. تعداد محصولات سبد خرید تغییر کند.

3. قیمت نهایی به‌روزرسانی شود.

4. بخش سبد خرید رابط کاربری تغییر کند.

5. شاید یک پیام موفقیت نیز نمایش داده شود.

در یک برنامه ساده، مدیریت این تغییرات ممکن است راحت باشد.

اما هرچه برنامه بزرگ‌تر شود، تعداد این تغییرات بیشتر می‌شود.

حالا فرض کنید یک اپلیکیشن بزرگ داریم که صدها بخش مختلف دارد و اطلاعات هر بخش می‌تواند در اثر تعامل کاربر تغییر کند.

اینجاست که مدیریت مستقیم رابط کاربری با JavaScript معمولی می‌تواند پیچیده و سخت شود.

مشکل اصلی چیست؟

مشکل این نیست که JavaScript نمی‌تواند این کارها را انجام دهد.

JavaScript کاملاً قادر است رابط کاربری را تغییر دهد.

مشکل اصلی این است که در برنامه‌های بزرگ، مدیریت این تغییرات و هماهنگ نگه داشتن وضعیت برنامه با رابط کاربری می‌تواند بسیار پیچیده شود.

React برای ساده‌تر کردن همین فرآیند وارد می‌شود.

قبل از React چگونه رابط کاربری را مدیریت می‌کردیم؟

برای درک بهتر React، ابتدا یک مثال ساده با JavaScript معمولی ببینیم.

فرض کنید یک شمارنده داریم:

<p id="counter">0</p>

<button id="increase">
  افزایش
</button>

و با JavaScript مقدار آن را تغییر می‌دهیم:

let count = 0;

const counter = document.querySelector("#counter");
const button = document.querySelector("#increase");

button.addEventListener("click", () => {
  count++;

  counter.textContent = count;
});

در اینجا خودمان باید مشخص کنیم:

• چه عنصری باید تغییر کند؟

• چه زمانی باید تغییر کند؟

• مقدار جدید چیست؟

• چگونه مقدار جدید را داخل DOM قرار دهیم؟

برای یک مثال کوچک، این کار کاملاً قابل قبول است.

اما در یک اپلیکیشن بزرگ، تعداد این تغییرات می‌تواند بسیار زیاد شود.

ممکن است یک تغییر کوچک روی چند قسمت مختلف رابط کاربری تأثیر بگذارد.

در چنین شرایطی، نگهداری و مدیریت کد می‌تواند دشوارتر شود.

React چه کاری انجام می‌دهد؟

React یک مدل متفاوت برای ساخت رابط کاربری در اختیار ما قرار می‌دهد.

به جای اینکه دائماً به صورت دستی به DOM بگوییم:

این قسمت را تغییر بده، آن قسمت را حذف کن و این قسمت را دوباره بساز.

ما بیشتر روی این موضوع تمرکز می‌کنیم که:

رابط کاربری در هر وضعیت برنامه باید چگونه باشد؟

این تفاوت یکی از ایده‌های مهم React است.

برای مثال، فرض کنید وضعیت برنامه این باشد:

count = 0

و می‌خواهیم روی صفحه نمایش داده شود:

تعداد: 0

بعد کاربر روی دکمه کلیک می‌کند:

count = 1

حالا React می‌تواند رابط کاربری را متناسب با وضعیت جدید به‌روزرسانی کند.

یعنی به جای اینکه توسعه‌دهنده تمام تغییرات DOM را به صورت دستی مدیریت کند، React بخش زیادی از این فرآیند را مدیریت می‌کند.

Component در React چیست؟

یکی از مهم‌ترین مفاهیم React، Component یا کامپوننت است.

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

برای مثال، در یک فروشگاه اینترنتی می‌توانیم کامپوننت‌های زیر را داشته باشیم:

Header
ProductCard
ProductList
ShoppingCart
SearchBox
Footer

هر کامپوننت مسئول بخش مشخصی از رابط کاربری است.

برای مثال یک ProductCard می‌تواند اطلاعات یک محصول را نمایش دهد.

function ProductCard() {
  return (
    <div>
      <h2>لپ‌تاپ</h2>
      <p>قیمت: 50 میلیون تومان</p>
      <button>افزودن به سبد خرید</button>
    </div>
  );
}

حالا می‌توانیم همین کامپوننت را برای محصولات مختلف استفاده کنیم.

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

چرا Componentها در React مهم هستند؟

فرض کنید یک فروشگاه اینترنتی 100 محصول دارد.

اگر برای هر محصول HTML جداگانه بنویسیم، حجم زیادی از کد تکراری خواهیم داشت.

اما با React می‌توانیم یک ProductCard بسازیم و اطلاعات محصولات مختلف را به آن بدهیم.

مثلاً:

<ProductCard
  title="لپ‌تاپ"
  price="50 میلیون تومان"
/>

<ProductCard
  title="موبایل"
  price="30 میلیون تومان"
/>

در این حالت ساختار نمایش محصول یکسان است، اما اطلاعات آن می‌تواند متفاوت باشد.

این همان چیزی است که در React با مفاهیمی مانند Props با آن سروکار خواهیم داشت.

React و مدیریت تغییرات رابط کاربری

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

فرض کنید یک سایت فروشگاهی داریم.

کاربر یک محصول را به سبد خرید اضافه می‌کند.

قبل از کلیک:

سبد خرید: 0

بعد از کلیک:

سبد خرید: 1

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

در React، این نوع اطلاعات معمولاً به عنوان State مدیریت می‌شوند.

برای مثال:

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

وقتی مقدار State تغییر کند:

setCount(count + 1);

React می‌تواند بخش‌های لازم رابط کاربری را با وضعیت جدید هماهنگ کند.

البته State در React موضوع بسیار گسترده‌ای است و در آموزش‌های بعدی به صورت جداگانه با آن آشنا خواهیم شد.

آیا React یک زبان برنامه‌نویسی است؟

خیر.

React یک زبان برنامه‌نویسی نیست.

همچنین React یک جایگزین برای JavaScript نیست.

React یک کتابخانه JavaScript برای ساخت رابط کاربری است.

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

به همین دلیل اگر قصد دارید React را به صورت اصولی یاد بگیرید، بهتر است قبل از آن با مفاهیم مهم JavaScript مانند موارد زیر آشنا باشید:

• متغیرها

• توابع

• آرایه‌ها

• آبجکت‌ها

• شرط‌ها

• حلقه‌ها

• متدهای آرایه

• مفهوم Scope

• توابع Arrow

• Destructuring

• ماژول‌ها

• مفاهیم پایه DOM

• مفاهیم پایه Asynchronous JavaScript

هرچه JavaScript را بهتر بدانید، یادگیری React نیز برایتان ساده‌تر خواهد بود.

React Library است یا Framework؟

یکی از سؤال‌های رایج هنگام شروع React این است:

React کتابخانه است یا فریم‌ورک؟

React به طور رسمی یک JavaScript Library برای ساخت رابط کاربری است.

تمرکز اصلی React روی UI است.

البته در پروژه‌های واقعی معمولاً به قابلیت‌های دیگری نیز نیاز داریم؛ برای مثال:

• Routing

• مدیریت داده

• درخواست‌های API

• احراز هویت

• SEO

• مدیریت State

• Rendering سمت سرور

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

برای مثال Next.js یک فریم‌ورک مبتنی بر React است که امکانات بیشتری برای ساخت اپلیکیشن‌های وب در اختیار توسعه‌دهنده قرار می‌دهد.

React چه مزایایی دارد؟

React به دلیل چند ویژگی مهم در پروژه‌های مختلف مورد استفاده قرار می‌گیرد.

1. ساخت رابط کاربری به صورت Component-Based

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

این موضوع باعث می‌شود:

• کد خواناتر شود.

• نگهداری پروژه ساده‌تر شود.

• استفاده مجدد از کد راحت‌تر شود.

• توسعه پروژه‌های بزرگ مدیریت‌پذیرتر شود.

2. استفاده مجدد از کامپوننت‌ها

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

برای مثال:

<Button />

می‌تواند در چندین صفحه استفاده شود.

این موضوع میزان کد تکراری را کاهش می‌دهد.

3. مدیریت بهتر رابط کاربری پویا

اپلیکیشن‌های امروزی دائماً در حال تغییر هستند.

برای مثال:

• کاربر وارد حساب خود می‌شود.

• محصولی به سبد خرید اضافه می‌کند.

• فیلتر محصولات را تغییر می‌دهد.

• فرم ارسال می‌کند.

• پیام جدید دریافت می‌کند.

React ابزارها و الگوهایی در اختیار ما قرار می‌دهد که ساخت چنین رابط‌های کاربری تعاملی را ساده‌تر می‌کنند.

4. اکوسیستم بزرگ

React تنها یک کتابخانه نیست که جداگانه استفاده شود.

در طول زمان اکوسیستم بزرگی در اطراف آن شکل گرفته است.

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

• مدیریت State

• Routing

• درخواست‌های API

• فرم‌ها

• انیمیشن

• تست

• توسعه اپلیکیشن‌های بزرگ

در کنار React استفاده می‌شوند.

آیا React باعث سریع‌تر شدن وب‌سایت می‌شود؟

این تصور که:

«اگر از React استفاده کنیم، سایت حتماً سریع‌تر می‌شود»

دقیق نیست.

React یک ابزار برای ساخت رابط کاربری است و عملکرد نهایی یک وب‌سایت به عوامل زیادی بستگی دارد.

برای مثال:

• حجم JavaScript

• تعداد درخواست‌ها

• بهینه‌سازی تصاویر

• نحوه دریافت داده

• ساختار کد

• Rendering

• Caching

• سرور

• شبکه

• نحوه استفاده از React

همگی می‌توانند روی Performance تأثیر بگذارند.

بنابراین React به خودی خود تضمین نمی‌کند که یک وب‌سایت سریع باشد.

حتی اگر React به شکل نادرست استفاده شود، می‌تواند باعث ایجاد مشکلات Performance شود.

React چگونه با JavaScript ارتباط دارد؟

اگر JavaScript را زبان اصلی برنامه‌نویسی وب در نظر بگیریم، React یکی از ابزارهایی است که با استفاده از JavaScript به ما کمک می‌کند رابط کاربری پیچیده‌تری بسازیم.

به همین دلیل معمولاً روند یادگیری به این شکل است:

HTML
   ↓
CSS
   ↓
JavaScript
   ↓
React
   ↓
Next.js

البته این مسیر تنها مسیر ممکن نیست، اما برای بسیاری از توسعه‌دهندگان Frontend مسیر منطقی و قابل فهمی است.

آیا برای یادگیری React باید JavaScript بلد باشیم؟

بله، حداقل باید JavaScript را در سطح قابل قبولی بلد باشید.

اگر بدون یادگیری JavaScript مستقیماً سراغ React بروید، ممکن است در ابتدا بتوانید با کپی کردن کدها پروژه بسازید، اما درک اینکه React دقیقاً چه کاری انجام می‌دهد برایتان دشوار خواهد شد.

برای مثال در React مرتب با مواردی مثل این‌ها مواجه می‌شوید:

map()

filter()

find()

destructuring

arrow functions

async / await

اگر این مفاهیم را از قبل بدانید، بخش زیادی از کدهای React برایتان قابل فهم‌تر خواهد بود.

React برای چه پروژه‌هایی مناسب است؟

React می‌تواند برای طیف وسیعی از پروژه‌های رابط کاربری استفاده شود.

برای مثال:

• فروشگاه‌های اینترنتی

• داشبوردهای مدیریتی

• پنل‌های کاربری

• شبکه‌های اجتماعی

• سیستم‌های رزرو

• اپلیکیشن‌های SaaS

• وب‌اپلیکیشن‌های تعاملی

• سایت‌های شرکتی

• پلتفرم‌های آموزشی

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

React برای چه چیزی ساخته نشده است؟

React قرار نیست همه مشکلات یک پروژه وب را به تنهایی حل کند.

React به طور مستقیم یک سیستم مدیریت دیتابیس نیست.

React به تنهایی Backend نیست.

React جایگزین JavaScript نیست.

React به تنهایی سیستم احراز هویت کامل نیست.

React همچنین یک راه‌حل کامل برای تمام نیازهای یک وب‌سایت نیست.

React بیشتر روی ساخت و مدیریت رابط کاربری تمرکز دارد.

برای ساخت یک اپلیکیشن کامل، ممکن است در کنار React به ابزارهای دیگری نیز نیاز داشته باشیم.

جمع‌بندی؛ React چیست و چه مشکلی را حل می‌کند؟

React یک کتابخانه JavaScript برای ساخت رابط کاربری است.

اما اگر فقط همین تعریف را به خاطر بسپاریم، دلیل اهمیت React را به خوبی متوجه نمی‌شویم.

مسئله اصلی این است که با بزرگ‌تر شدن یک اپلیکیشن، مدیریت رابط کاربری و هماهنگ نگه داشتن آن با وضعیت برنامه می‌تواند پیچیده شود.

React با ارائه مفاهیمی مانند Component، State و Props و یک مدل مناسب برای ساخت رابط‌های کاربری، کمک می‌کند این پیچیدگی بهتر مدیریت شود.

پس می‌توانیم خیلی ساده بگوییم:

React آمده است تا ساخت و مدیریت رابط‌های کاربری پیچیده و تعاملی را ساده‌تر، ساختاریافته‌تر و قابل استفاده مجدد کند.

در مقاله بعدی می‌توانیم وارد اولین بخش عملی React شویم و ببینیم Component در React چیست، چگونه ساخته می‌شود و چرا یکی از مهم‌ترین مفاهیم React محسوب می‌شود.

اگر JavaScript را به خوبی یاد گرفته باشید، از این مرحله به بعد وارد بخش جذاب‌تری از مسیر Frontend خواهید شد.

سوالات متداول درباره React

React چیست؟

React یک کتابخانه JavaScript برای ساخت رابط کاربری است که به توسعه‌دهندگان کمک می‌کند رابط‌های کاربری تعاملی را با استفاده از کامپوننت‌های قابل استفاده مجدد بسازند.

React چه مشکلی را حل می‌کند؟

React مدیریت رابط‌های کاربری پویا و پیچیده را ساده‌تر می‌کند. به جای مدیریت دستی تمام تغییرات رابط کاربری، می‌توانیم UI را بر اساس وضعیت برنامه با استفاده از Componentها و Stateها طراحی کنیم.

آیا React یک زبان برنامه‌نویسی است؟

خیر. React یک کتابخانه JavaScript است و برای استفاده از آن باید JavaScript را بلد باشید.

آیا React یک Framework است؟

React به طور رسمی یک کتابخانه برای ساخت رابط کاربری است. فریم‌ورک‌هایی مانند Next.js امکانات بیشتری را در کنار React ارائه می‌کنند.

آیا برای یادگیری React باید JavaScript بلد باشیم؟

بله. برای یادگیری اصولی React بهتر است ابتدا مفاهیم مهم JavaScript مانند توابع، آرایه‌ها، آبجکت‌ها، متدهای آرایه، Destructuring و Async/Await را یاد بگیرید.

React چه کاربردی دارد؟

React برای ساخت رابط‌های کاربری تعاملی در پروژه‌هایی مانند فروشگاه‌های اینترنتی، داشبوردها، پنل‌های مدیریتی، SaaSها و وب‌اپلیکیشن‌های مختلف استفاده می‌شود.