React چیست؟ آموزش کامل و جامع React

React یک کتابخانه JavaScript متن‌باز است که توسط فیسبوک (متا) برای ساخت رابط‌های کاربری تعاملی و تک‌صفحه‌ای (SPA) توسعه داده شده است. این کتابخانه با استفاده از مفهوم کامپوننت‌ها، توسعه رابط‌های کاربری پیچیده را ساده‌تر می‌کند.

import React from 'react';

function App() {
  return (
    <div>
      <h1>سلام دنیا!</h1>
      <p>این اولین کامپوننت React من است.</p>
    </div>
  );
}

React در سال ۲۰۱۱ توسط جردن والکه در فیسبوک ایجاد شد و در سال ۲۰۱۳ به صورت متن‌باز منتشر شد. از آن زمان تاکنون، این کتابخانه تکامل یافته و ویژگی‌های جدیدی مانند Hooks و Concurrent Mode به آن اضافه شده است.

یک پروژه React معمولاً از ساختار زیر تشکیل شده است:

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

کامپوننت‌ها بلوک‌های سازنده اصلی در React هستند. دو نوع اصلی کامپوننت وجود دارد: کامپوننت‌های تابعی و کلاس.

function Welcome({ name }) {
  return <h1>سلام، {name}</h1>;
}

// استفاده از کامپوننت
<Welcome name="علی" />

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

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

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

  useEffect(() => {
    document.title = `شما ${count} بار کلیک کرده‌اید`;
  }, [count]);

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

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

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

چرخه حیات کامپوننت‌ها در React شامل سه فاز اصلی است: نصب (Mounting)، به‌روزرسانی (Updating) و حذف (Unmounting).

function LifecycleExample() {
  useEffect(() => {
    console.log('کامپوننت نصب شد');
    
    return () => {
      console.log('کامپوننت حذف شد');
    };
  }, []);

React Router کتابخانه استاندارد برای مدیریت مسیریابی در اپلیکیشن‌های React است.

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

برای مدیریت state در اپلیکیشن‌های بزرگ، می‌توانید از Redux یا Context API استفاده کنید.

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

رعایت اصول و بهترین شیوه‌های کدنویسی React به بهبود کیفیت و نگهداری کد کمک می‌کند:

۱. استفاده از کامپوننت‌های کوچک و قابل استفاده مجدد

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

۲. مدیریت صحیح state

از state فقط برای داده‌های متغیر استفاده کنید.

۳. استفاده از PropTypes

برای اعتبارسنجی prop‌ها از PropTypes استفاده کنید.

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

const MyComponent = React.memo(function MyComponent(props) {
  /* رندر کامپوننت */
  return (
    <div>
      <h2>{props.title}</h2>
      <p>{props.content}</p>
    </div>
  );
});

برای توسعه بهتر با React، ابزارهای مفید زیر را در نظر بگیرید:

ابزارهای توسعه

– Create React App
– Vite
– React Developer Tools
– ESLint

کتابخانه‌های مفید

– Redux برای مدیریت state
– React Router برای مسیریابی
– Axios برای درخواست‌های HTTP
– Material-UI و Chakra UI برای رابط کاربری