راهنمای جامع React.js در 2025: از مبتدی تا متخصص

React.js همچنان یکی از محبوب‌ترین و قدرتمندترین کتابخانه‌های JavaScript برای ساخت رابط‌های کاربری است. در این راهنمای جامع، تمام جنبه‌های React.js را از مفاهیم پایه تا تکنیک‌های پیشرفته بررسی خواهیم کرد.

---

مفاهیم پایه React.js

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

کامپوننت‌ها (Components)

کامپوننت‌ها بلوک‌های سازنده اصلی React هستند. هر کامپوننت یک تابع یا کلاس است که props دریافت می‌کند و JSX برمی‌گرداند.

jsx
// Functional Component
function Welcome(props) {
  return <h1>سلام، {props.name}!</h1>;
}

// Class Component
class Welcome extends React.Component {
  render() {
    return <h1>سلام، {this.props.name}!</h1>;
  }
}

JSX

JSX ترکیبی از JavaScript و XML است که به شما امکان می‌دهد HTML-like markup در JavaScript بنویسید.

jsx
const element = (
  <div className="container">
    <h1>عنوان</h1>
    <p>متن پاراگراف</p>
  </div>
);

Props و State

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

jsx
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>شمارنده: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        افزایش
      </button>
    </div>
  );
}

---

Hooks در React

Hooks یکی از مهم‌ترین ویژگی‌های React هستند که در نسخه 16.8 معرفی شدند.

useState Hook

برای مدیریت state در functional components استفاده می‌شود.

jsx
import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');
  
  return (
    <div>
      <p>شمارنده: {count}</p>
      <input 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
      />
    </div>
  );
}

useEffect Hook

برای اجرای side effects مانند API calls، subscriptions، یا DOM manipulations استفاده می‌شود.

jsx
import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(response => response.json())
      .then(data => setUser(data));
  }, [userId]); // Dependency array
  
  return user ? <div>{user.name}</div> : <div>در حال بارگذاری...</div>;
}

Custom Hooks

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

jsx
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });
  
  const setValue = value => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.log(error);
    }
  };
  
  return [storedValue, setValue];
}

---

مدیریت State پیشرفته

Context API

برای به اشتراک‌گذاری state بین کامپوننت‌ها بدون prop drilling استفاده می‌شود.

jsx
const ThemeContext = React.createContext();

function App() {
  const [theme, setTheme] = useState('light');
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Header />
      <Main />
    </ThemeContext.Provider>
  );
}

function Header() {
  const { theme, setTheme } = useContext(ThemeContext);
  
  return (
    <header className={theme}>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        تغییر تم
      </button>
    </header>
  );
}

Redux و Zustand

برای مدیریت state پیچیده، کتابخانه‌های خارجی مانند Redux یا Zustand استفاده می‌شوند.

jsx
// با Zustand
import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

function Counter() {
  const { count, increment, decrement } = useStore();
  
  return (
    <div>
      <p>شمارنده: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

---

Performance Optimization

React.memo

برای جلوگیری از re-render غیرضروری کامپوننت‌ها استفاده می‌شود.

jsx
const ExpensiveComponent = React.memo(({ data }) => {
  // محاسبات پیچیده
  return <div>{/* محتوا */}</div>;
});

useMemo و useCallback

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

jsx
function ExpensiveCalculation({ items }) {
  const expensiveValue = useMemo(() => {
    return items.reduce((acc, item) => acc + item.value, 0);
  }, [items]);
  
  const handleClick = useCallback(() => {
    console.log('کلیک شد');
  }, []);
  
  return (
    <div>
      <p>نتیجه: {expensiveValue}</p>
      <button onClick={handleClick}>کلیک</button>
    </div>
  );
}

---

TypeScript با React

TypeScript امنیت نوع و تجربه توسعه بهتری را فراهم می‌کند.

تعریف Props با TypeScript

tsx
interface UserProps {
  id: number;
  name: string;
  email: string;
  isActive?: boolean;
}

function User({ id, name, email, isActive = true }: UserProps) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{email}</p>
      <span>{isActive ? 'فعال' : 'غیرفعال'}</span>
    </div>
  );
}

Generic Components

tsx
interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

---

Testing در React

Jest و React Testing Library

jsx
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('increments counter when button is clicked', () => {
  render(<Counter />);
  
  const button = screen.getByText('افزایش');
  const counter = screen.getByText(/شمارنده:/);
  
  fireEvent.click(button);
  
  expect(counter).toHaveTextContent('شمارنده: 1');
});

---

بهترین شیوه‌های برنامه‌نویسی

ساختار پروژه

src/
├── components/
│   ├── common/
│   ├── forms/
│   └── layout/
├── hooks/
├── pages/
├── services/
├── types/
└── utils/

Naming Conventions

• کامپوننت‌ها: PascalCase (UserProfile)
• فایل‌ها: PascalCase یا kebab-case
• متغیرها و توابع: camelCase
• ثابت‌ها: UPPER_SNAKE_CASE

---

ابزارهای مدرن React

Vite

Vite یک build tool سریع و مدرن است که برای React پروژه‌ها عالی است.

bash
npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run dev

Next.js

Next.js یک فریم‌ورک React است که SSR، SSG، و routing را فراهم می‌کند.

jsx
// pages/index.tsx
export default function Home() {
  return <h1>صفحه اصلی</h1>;
}

// pages/users/[id].tsx
export default function User({ user }) {
  return <div>{user.name}</div>;
}

export async function getServerSideProps({ params }) {
  const user = await fetchUser(params.id);
  return { props: { user } };
}

---

جمع‌بندی

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

نکته مهم: تمرین مداوم و ساخت پروژه‌های واقعی بهترین راه برای تسلط بر React است!

bash
# شروع پروژه جدید
npx create-react-app my-app --template typescript
cd my-app
npm start