# راهنمای جامع React.js در 2025: از مبتدی تا متخصص React.js همچنان یکی از محبوب‌ترین و قدرتمندترین کتابخانه‌های JavaScript برای ساخت رابط‌های کاربری است. در این راهنمای جامع، تمام جنبه‌های React.js را از مفاهیم پایه تا تکنیک‌های پیشرفته بررسی خواهیم کرد. --- ## مفاهیم پایه React.js React.js بر اساس چند مفهوم کلیدی ساخته شده است که درک آن‌ها برای شروع ضروری است. ### کامپوننت‌ها (Components) کامپوننت‌ها بلوک‌های سازنده اصلی React هستند. هر کامپوننت یک تابع یا کلاس است که props دریافت می‌کند و JSX برمی‌گرداند. ```jsx // Functional Component function Welcome(props) { return

سلام، {props.name}!

; } // Class Component class Welcome extends React.Component { render() { return

سلام، {this.props.name}!

; } } ``` ### JSX JSX ترکیبی از JavaScript و XML است که به شما امکان می‌دهد HTML-like markup در JavaScript بنویسید. ```jsx const element = (

عنوان

متن پاراگراف

); ``` ### Props و State Props داده‌هایی هستند که از کامپوننت والد به کامپوننت فرزند منتقل می‌شوند، در حالی که State داده‌های داخلی کامپوننت است. ```jsx function Counter() { const [count, setCount] = useState(0); return (

شمارنده: {count}

); } ``` --- ## 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 (

شمارنده: {count}

setName(e.target.value)} />

); } ``` ### 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 ?

{user.name}

در حال بارگذاری...

; } ``` ### 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 (

); } function Header() { const { theme, setTheme } = useContext(ThemeContext); return (

); } ``` ### 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 (

شمارنده: {count}

); } ``` --- ## Performance Optimization ### React.memo برای جلوگیری از re-render غیرضروری کامپوننت‌ها استفاده می‌شود. ```jsx const ExpensiveComponent = React.memo(({ data }) => { // محاسبات پیچیده return

{/* محتوا */}

; }); ``` ### 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 (

نتیجه: {expensiveValue}

); } ``` --- ## 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 (

{name}

{email}

{isActive ? 'فعال' : 'غیرفعال'}

); } ``` ### Generic Components ```tsx interface ListProps { items: T[]; renderItem: (item: T) => React.ReactNode; } function List({ items, renderItem }: ListProps) { return (

{renderItem(item)}

); } ``` --- ## 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(); 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

صفحه اصلی

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

{user.name}

; } 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 ```

آخرین مقالات ما