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

React یک کتابخانه متن‌باز JavaScript برای ساخت رابط‌های کاربری، به‌ویژه رابط‌های کاربری تعاملی وب است.

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

React بخشی از یک اکوسیستم بزرگ‌تر است. React می‌تواند همراه با React DOM برای ساخت برنامه‌های وب استفاده شود و فریمورک‌هایی مانند Next.js قابلیت‌هایی در سطح اپلیکیشن مانند Routing، Data Fetching، Rendering و Caching را اضافه می‌کنند.

React چیست؟

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

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

function Welcome() {
  return <h1>Hello React</h1>;
}

این کامپوننت یک بخش کوچک از رابط کاربری را توصیف می‌کند. React مسئول Rendering کامپوننت و به‌روزرسانی رابط کاربری در صورت تغییر داده یا State است.

چرا React ساخته شد؟

با تعاملی‌تر و پیچیده‌تر شدن وب‌اپلیکیشن‌ها، روش‌های مدیریت UI و هماهنگ نگه‌داشتن رابط کاربری با داده‌های برنامه اهمیت بیشتری پیدا کردند.

React یک رویکرد Declarative و Component-Based ارائه کرد که به توسعه‌دهندگان کمک می‌کند:

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

React به‌تنهایی تمام نیازهای سطح اپلیکیشن را حل نمی‌کند. مواردی مانند Routing، Data Fetching، Authentication، Deployment و برخی نیازهای معماری ممکن است به ابزارهای اضافی یا یک فریمورک نیاز داشته باشند.

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

یکی از مفاهیم اصلی React، معماری مبتنی بر کامپوننت است.

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

برای مثال:

• Navbar
• بخش Hero
• Footer
• فرم تماس
• کارت پروژه

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

JSX چیست؟

JSX یک Syntax Extension است که معمولاً همراه React استفاده می‌شود و به توسعه‌دهنده اجازه می‌دهد درون JavaScript، رابط کاربری را با Syntax شبیه HTML توصیف کند.

function Welcome({ name }) {
  return <h1>Hello, {name}</h1>;
}

JSX خود HTML نیست. ابزارهای Build آن را به JavaScript تبدیل می‌کنند تا React بتواند از آن برای ساخت و به‌روزرسانی UI استفاده کند.

State چیست؟

State داده‌ای است که می‌تواند در طول زمان تغییر کند و روی چیزی که کامپوننت Render می‌کند تأثیر بگذارد.

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

وقتی State تغییر می‌کند، React می‌تواند کامپوننت را با مقدار جدید دوباره Render کند.

State می‌تواند برای مواردی مانند زیر استفاده شود:

• مقادیر فرم
• وضعیت باز و بسته بودن بخش‌های UI
• آیتم انتخاب‌شده
• اطلاعات سبد خرید
• تنظیمات رابط کاربری

Props چیست؟

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

function ProjectCard({ title }) {
  return <h2>{title}</h2>;
}

export default function Projects() {
  return <ProjectCard title="My Portfolio" />;
}

Props باعث می‌شوند کامپوننت‌ها قابل استفاده مجدد و قابل تنظیم باشند.

Hooks چیستند؟

Hooks توابعی هستند که به کامپوننت‌ها اجازه می‌دهند از قابلیت‌هایی مانند State و Context در React استفاده کنند.

برخی از Hooksهای معروف عبارت‌اند از:

• useState
• useEffect
• useMemo
• useCallback
• useRef

Hooks قوانین مشخصی دارند. برای مثال، Hooks باید در سطح بالای توابع React فراخوانی شوند و نباید داخل Loop یا شرط‌ها قرار بگیرند.

Virtual DOM چیست؟

Virtual DOM اصطلاحی رایج برای توضیح نحوه مدیریت تغییرات UI در React است، اما بهتر است این مفهوم را دقیق‌تر بیان کنیم.

React یک نمایش داخلی از UI را مدیریت می‌کند و از فرآیند Rendering و Reconciliation برای مشخص کردن تغییرات موردنیاز استفاده می‌کند.

در یک برنامه وب، React از طریق React DOM با DOM مرورگر کار می‌کند.

یک مدل ساده برای درک این فرآیند:

1. کامپوننت شما یک توصیف از UI تولید می‌کند.
2. تغییر Props یا State می‌تواند باعث Render مجدد شود.
3. React نتیجه جدید را با نتیجه قبلی مقایسه می‌کند.
4. React DOM تغییرات لازم را روی DOM مرورگر اعمال می‌کند.

نکته مهم این است که توسعه‌دهنده معمولاً مجبور نیست تمام تغییرات DOM را به‌صورت دستی مدیریت کند.

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

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

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

function Status({ loggedIn }) {
  return <p>{loggedIn ? "Welcome back!" : "Please sign in."}</p>;
}

وقتی مقدار loggedIn تغییر کند، React می‌تواند UI مناسب را Render کند.

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

مزایای React

React مزایای مهمی دارد:

• کامپوننت‌های قابل استفاده مجدد
• توسعه Declarative رابط کاربری
• اکوسیستم بزرگ
• جامعه کاربری گسترده
• معماری انعطاف‌پذیر
• ابزارهای توسعه مناسب
• امکان استفاده در معماری‌های مختلف

React یک کتابخانه است، نه یک فریمورک کامل برای ساخت تمام بخش‌های یک اپلیکیشن. بنابراین در پروژه‌های واقعی ممکن است نیاز به تصمیم‌های معماری و ابزارهای بیشتری داشته باشید.

React در مقایسه با JavaScript معمولی

در روش‌های سنتی DOM Manipulation، توسعه‌دهنده ممکن است عناصر DOM را مستقیماً انتخاب و تغییر دهد.

document.querySelector("#message").textContent = "Hello";

در React، رویکرد اصلی این است که UI را بر اساس State و داده توصیف کنیم:

function Message({ text }) {
  return <p>{text}</p>;
}

تفاوت اصلی این نیست که React تمام عملیات DOM را حذف می‌کند. React یک مدل Declarative برای توصیف UI ارائه می‌دهد و فرآیند Rendering را مدیریت می‌کند.

ارتباط React و Next.js

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

Next.js یک فریمورک مبتنی بر React است که قابلیت‌ها و Conventionهای سطح اپلیکیشن را برای ساخت وب‌اپلیکیشن‌های Full-Stack ارائه می‌دهد.

برای مثال، Next.js قابلیت‌هایی مانند موارد زیر را فراهم می‌کند:

• File-Based Routing
• Server و Client Components
• روش‌های مختلف Rendering
• الگوهای Data Fetching
• Route Handlers
• Caching و Revalidation
• Metadata API
• Image Optimization

React را می‌توان بدون Next.js استفاده کرد، در حالی که Next.js از React به‌عنوان پایه رابط کاربری خود استفاده می‌کند.

React در مقایسه با Next.js

React

• کتابخانه رابط کاربری
• تمرکز اصلی روی ساخت رابط‌های کاربری
• معمولاً برای Routing به ابزارهای اضافی نیاز دارد
• معماری اپلیکیشن به Setup انتخاب‌شده بستگی دارد
• می‌تواند به‌صورت مستقل استفاده شود
• برای یک اپلیکیشن کامل ممکن است به ابزارهای اضافی یا یک فریمورک نیاز داشته باشد

Next.js

• فریمورک مبتنی بر React
• ارائه قابلیت‌های سطح اپلیکیشن
• دارای File-Based Routing
• پشتیبانی از روش‌های مختلف Rendering
• ساخته‌شده بر پایه React
• ارائه Conventionها و قابلیت‌های مناسب برای پروژه‌های Production

آیا یادگیری React هنوز ارزش دارد؟

بله.

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

React می‌تواند برای ساخت موارد زیر استفاده شود:

• وب‌اپلیکیشن‌ها
• داشبوردها
• محصولات SaaS
• رابط فروشگاه‌های اینترنتی
• Design Systemها
• رابط‌های کاربری تعاملی

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

اگر قصد دارید به‌صورت حرفه‌ای با React کار کنید، ابتدا JavaScript را به‌خوبی یاد بگیرید و سپس روی Components، JSX، Props، State، Hooks و الگوهای مدرن React تمرکز کنید.

قبل از React چه چیزهایی یاد بگیریم؟

یک مسیر یادگیری منطقی می‌تواند شامل موارد زیر باشد:

1. مبانی HTML
2. مبانی CSS
3. مبانی JavaScript
4. JavaScript مدرن
5. Components و JSX در React
6. Props و State
7. Hooks
8. Forms و Events
9. Data Fetching
10. Routing و معماری اپلیکیشن
11. Accessibility
12. Testing و Performance

همچنین بهتر است مفاهیم زیر را نیز بلد باشید:

• Arrays و Objects
• Functions
• Modules
• Promises
• async / await
• مبانی DOM
• HTTP و API
• Git

React و SEO

React به‌تنهایی باعث SEO-friendly شدن یک سایت نمی‌شود.

SEO به عوامل مختلفی مانند موارد زیر وابسته است:

• محتوای ارزشمند
• Metadata صحیح
• HTML معنایی
• قابل Crawl بودن محتوا
• لینک‌سازی داخلی
• Performance
• Accessibility
• Mobile Usability
• Canonical URL
• Structured Data در صورت نیاز

بسته به معماری پروژه، React می‌تواند در محیط‌های مختلف Render شود. فریمورک‌هایی مانند Next.js نیز قابلیت‌های Rendering و Metadata بیشتری ارائه می‌دهند که برای سایت‌های محتوامحور و SEO-focused می‌توانند مفید باشند.

جمع‌بندی

React یک کتابخانه JavaScript برای ساخت رابط‌های کاربری با رویکرد Component-Based و Declarative است.

مفاهیم اصلی React شامل موارد زیر هستند:

• Components
• JSX
• Props
• State
• Hooks
• Declarative Rendering

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

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

ادامه مسیر یادگیری

• JavaScript چیست؟
• Next.js چیست؟
• الگوریتم چیست؟