راهنمای شروع با React در ۲۰۲۴

React بدون شک یکی از محبوب‌ترین و پرتقاضاترین کتابخانه‌های جاوااسکریپت برای ساخت رابط کاربری است. این کتابخانه که توسط فیسبوک (متا) توسعه یافته، با معماری مبتنی بر کامپوننت و رویکرد اعلامی (Declarative) خود، انقلابی در توسعه Front-end ایجاد کرده است. اگر به تازگی قصد ورود به دنیای React را دارید، این راهنما دقیقاً برای شما نوشته شده است. در این مقاله قدم‌به‌قدم پیش می‌رویم تا بتوانید اولین پروژه React خود را بسازید و مفاهیم پایه‌ای آن را به خوبی درک کنید.

پیش‌نیازها: قبل از React چه چیزهایی باید بدانیم؟

قبل از شیرجه زدن به React، تسلط نسبی بر سه تکنولوژی پایه‌ای وب ضروری است:

• HTML: برای ساختاردهی به اسکلت صفحات (حداقل آشنایی با تگ‌های معنایی).
• CSS: برای استایل‌دهی و زیباسازی کامپوننت‌ها (Flexbox و Grid بسیار کاربردی هستند).
• JavaScript (ES6+): مهم‌ترین پیش‌نیاز. مفاهیمی مانند let/const، Arrow Functions، Destructuring، Spread Operator و به خصوص متدهای آرایه مانند map، filter و reduce را باید به خوبی بشناسید.

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

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

سیدایمان خرازانی تفرشی، توسعه‌دهنده فول‌استک

گام اول: راه‌اندازی محیط توسعه (Development Environment)

ساده‌ترین و سریع‌ترین راه برای شروع یک پروژه React، استفاده از ابزار Vite است. Vite یک ابزار ساخت (Build Tool) فوق‌العاده سریع است که جایگزین مدرنی برای Create React App محسوب می‌شود. برای شروع، مطمئن شوید که Node.js روی سیستم شما نصب است (نسخه ۱۸ یا بالاتر). سپس ترمینال را باز کرده و دستور زیر را اجرا کنید:

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

پس از اجرای دستور، وارد پوشه پروژه شوید (cd my-first-react-app)، وابستگی‌ها را نصب (npm install) و سرور توسعه را اجرا کنید (npm run dev). حالا در مرورگر خود آدرس http://localhost:5173 را باز کنید. تبریک! شما اولین پروژه React خود را راه‌اندازی کردید.

گام دوم: آشنایی با ساختار پروژه

وقتی پروژه را در VS Code باز می‌کنید، چند پوشه و فایل مهم می‌بینید:

• index.html: فایل اصلی HTML که کل اپلیکیشن درون یک div با id="root" بارگذاری می‌شود.
• src/main.jsx: نقطه ورود جاوااسکریپتی برنامه که کامپوننت اصلی (App) را به DOM متصل می‌کند.
• src/App.jsx: کامپوننت اصلی برنامه. بیشتر کار ما در این فایل (و کامپوننت‌هایی که خودمان می‌سازیم) انجام می‌شود.

گام سوم: درک مفهوم کامپوننت (Component) و JSX

قلب React از کامپوننت‌ها می‌تپد. یک کامپوننت در ساده‌ترین حالت، یک تابع جاوااسکریپت است که خروجی JSX برمی‌گرداند. JSX یک افزونه نحوی (Syntax Extension) برای جاوااسکریپت است که به شما اجازه می‌دهد کدی شبیه HTML را درون جاوااسکریپت بنویسید. این ترکیب شاید در ابتدا عجیب به نظر برسد، اما خیلی زود به آن عادت می‌کنید. یک مثال ساده از یک کامپوننت:

function WelcomeMessage() {
  const name = "ایمان";
  return (
    <div>
      <h1>سلام {name}!</h1>
      <p>به اولین کامپوننت React خودت خوش اومدی.</p>
    </div>
  );
}

نکته مهم: در JSX، به جای class از className و برای نوشتن عبارات جاوااسکریپت از { } استفاده می‌کنیم.

گام چهارم: مدیریت State با useState

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

import { useState } from 'react';

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

  return (
    <div>
      <p>شما {count} بار کلیک کردید.</p>
      <button onClick={() => setCount(count + 1)}>
        کلیک کن
      </button>
    </div>
  );
}

useState(0) یک آرایه با دو عضو برمی‌گرداند: مقدار فعلی State (در اینجا count) و تابعی برای به‌روزرسانی آن (setCount). هر بار که setCount فراخوانی شود، React کامپوننت را مجدداً رندر می‌کند.

گام پنجم: ارسال داده به کامپوننت‌ها با Props

Props (مخفف Properties) راهی برای ارسال داده از یک کامپوننت والد (Parent) به کامپوننت فرزند (Child) است. Props فقط خواندنی (Read-Only) هستند و نباید در کامپوننت فرزند تغییر داده شوند. این مفهوم باعث ایجاد جریان داده یک‌طرفه (One-way Data Flow) در React می‌شود که اشکال‌زدایی و درک برنامه را آسان‌تر می‌کند.

function Greeting({ name }) {
  return <h2>خوش آمدی، {name}!</h2>;
}

function App() {
  return <Greeting name="ایمان" />;
}

گام ششم: رندر لیست‌ها با map

یکی از رایج‌ترین کارها در React، نمایش لیستی از داده‌ها است. برای این کار، از متد map آرایه‌ها در جاوااسکریپت استفاده می‌کنیم. نکته حیاتی: هر آیتم در لیست باید یک prop به نام key داشته باشد که مقداری یکتا و پایدار (مثلاً id از پایگاه داده) است. این key به React کمک می‌کند تا رندر لیست را بهینه‌تر انجام دهد.

const products = [
  { id: 1, name: 'لپ‌تاپ', price: '۲۵ میلیون' },
  { id: 2, name: 'موبایل', price: '۱۵ میلیون' },
];

function ProductList() {
  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>
          {product.name} - {product.price} تومان
        </li>
      ))}
    </ul>
  );
}

گام هفتم: مدیریت اثرات جانبی با useEffect

اثرات جانبی (Side Effects) به هرگونه عملیاتی گفته می‌شود که خارج از چرخه رندر React اتفاق می‌افتد، مانند دریافت داده از API، تنظیم تایمر، یا به‌روزرسانی مستقیم DOM. هوک useEffect برای مدیریت این موارد استفاده می‌شود. یک مثال ساده از دریافت داده از یک API فرضی:

import { useState, useEffect } from 'react';

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []); // آرایه وابستگی خالی یعنی فقط یک بار در ابتدا اجرا شود

  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

گام هشتم: آشنایی با React Developer Tools

یک افزونه ضروری برای مرورگر (Chrome/Firefox) به نام React Developer Tools وجود دارد که به شما اجازه می‌دهد ساختار درختی کامپوننت‌ها، مقادیر Props و State هر کامپوننت را به صورت زنده بررسی کنید. نصب این ابزار را به شدت توصیه می‌کنم، چرا که فرآیند اشکال‌زدایی و درک جریان داده در اپلیکیشن‌های React را بسیار ساده‌تر می‌کند.

مسیر یادگیری بعدی چیست؟

تبریک! شما اکنون با مفاهیم پایه‌ای React آشنا شده‌اید. اما این تازه اول راه است. برای تبدیل شدن به یک توسعه‌دهنده حرفه‌ای React، توصیه می‌کنم به ترتیب مباحث زیر را دنبال کنید:

• React Router: برای ایجاد مسیریابی (Routing) در برنامه‌های تک‌صفحه‌ای (SPA).
• مدیریت State پیشرفته: Context API (خود React) یا کتابخانه‌های محبوب مانند Redux Toolkit یا Zustand.
• فریم‌ورک‌های React: Next.js (برای سئو و رندر سمت سرور) یا Remix.
• کتابخانه‌های UI: Material-UI (MUI)، Ant Design یا Chakra UI برای سرعت بخشیدن به توسعه.
• تست نویسی: با Jest و React Testing Library.

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