آیا می‌دانستید که آموزش ری اکت (React) یکی از پرجستجوترین موضوعات در حوزه برنامه‌نویسی فرانت‌اند است؟ طبق آمار سایت Stack Overflow، ری اکت برای ششمین سال متوالی به عنوان محبوب‌ترین فریمورک و کتابخانه جاوااسکریپت انتخاب شده است. دلیل اصلی، سادگی یادگیری، انعطاف‌پذیری بالا و قدرت در ساخت اپلیکیشن تک صفحه‌ای (SPA) است.
ری اکت (React.js) کتابخانه‌ای متن‌باز است که توسط فیسبوک توسعه یافته و امروزه شرکت‌های بزرگی مانند نتفلیکس، اینستاگرام، Airbnb و اپل از آن برای توسعه رابط‌های کاربری خود استفاده می‌کنند. در این مقاله از آکادمی فگابین، با آموزش ری اکت از صفر تا صد آشنا می‌شوید. علاوه بر این، مبانی پایه، مفاهیم پیشرفته و نحوه ساخت اپلیکیشن تک صفحه‌ای را گام‌به‌گام یاد خواهید گرفت.
اگر یک برنامه‌نویس جاوااسکریپت هستید و می‌خواهید وارد دنیای حرفه‌ای توسعه فرانت‌اند شوید، این مقاله نقطه شروع عالی برای شما خواهد بود.
ری اکت چیست و چرا باید آن را یاد بگیریم؟
برای شروع آموزش ری اکت، اول از همه باید بدانیم این کتابخانه چیست و چه مزایایی نسبت به سایر فریمورک‌ها دارد.
ری اکت چیست؟
ری اکت (React) یک کتابخانه جاوااسکریپت برای ساخت رابط‌های کاربری تعاملی و پویا است. این کتابخانه توسط مهندس فیسبوک به نام جردن واکه در سال ۲۰۱۳ به صورت متن‌باز منتشر شد. برخلاف فریمورک‌های کامل مانند Angular، ری اکت فقط مسئول لایه View (نمایش) برنامه است و برای ساخت اپلیکیشن‌های کامل به کتابخانه‌های جانبی نیاز دارد.
مهم‌ترین ویژگی‌های ری اکت:
- مبتنی بر کامپوننت: رابط کاربری به قطعات کوچک و قابل استفاده مجدد تقسیم می‌شود
- Virtual DOM: به روزرسانی سریع و بهینه صفحه بدون رندر مجدد کل صفحه
- یکطرفه بودن جریان داده: دیباگ و مدیریت آسان‌تر کد
- پشتیبانی از هوک‌ها (Hooks): مدیریت state و lifecycle در کامپوننت‌های تابعی
- جامعه بزرگ و اکوسیستم غنی: هزاران کتابخانه و ابزار کمکی
چرا ری اکت محبوب‌ترین فریمورک فرانت‌اند است؟
طبق نظرسنجی سال ۲۰۲۵ Stack Overflow، ۴۲ درصد از توسعه‌دهندگان حرفه‌ای از ری اکت استفاده می‌کنند. دلایل اصلی این محبوبیت عبارتند از:
۱. یادگیری آسان و منحنی یادگیری ملایم
اگر با جاوااسکریپت آشنایی داشته باشید، می‌توانید ظرف چند هفته با آموزش ری اکت به سطح خوبی برسید. در مقایسه با Angular که مفاهیم پیچیده‌تری مانند TypeScript و RxJS دارد، ری اکت ساده‌تر است.
۲. تقاضای بالای بازار کار
بر اساس داده‌های سایت Indeed، حقوق متوسط توسعه‌دهندگان ری اکت در آمریکا حدود ۱۲۰,۰۰۰ دلار در سال است. همچنین، آگهی‌های شغلی مرتبط با ری اکت نسبت به سایر فریمورک‌ها بیشتر است.
۳. پشتیبانی قوی از سئو و SSR
با استفاده از فریمورک Next.js (که بر پایه ری اکت ساخته شده)، می‌توانید اپلیکیشن‌های سئو دوست و با قابلیت رندر سمت سرور بسازید.
۴. اکوسیستم قدرتمند
ابزارهایی مانند Redux (مدیریت state)، React Router (مدیریت مسیرها)، Next.js (فریمورک کامل) و Vite (ابزار ساخت سریع) اکوسیستم ری اکت را بی‌نظیر کرده‌اند.
مقایسه ری اکت با سایر فریمورک‌ها
| ویژگی | React | Vue | Angular |
|---|---|---|---|
| یادگیری | آسان | آسان | دشوار |
| عملکرد | عالی | عالی | خوب |
| محبوبیت | بسیار بالا | بالا | متوسط |
| بازار کار | عالی | خوب | متوسط |
| اندازه | کوچک (کتابخانه) | کوچک | بزرگ (فریمورک کامل) |
| پشتیبانی شرکتی | فیسبوک | Evan You | گوگل |
نکته از آکادمی فگابین: اگر تازه وارد دنیای فریمورک‌های فرانت‌اند شده‌اید، آموزش ری اکت بهترین گزینه است، زیرا هم بازار کار خوبی دارد و هم یادگیری آن نسبتاً آسان است.
پیش‌نیازهای آموزش ری اکت؛ قبل از شروع چه چیزهایی باید بدانید؟
قبل از شروع آموزش ری اکت، باید با مفاهیم پایه جاوااسکریپت آشنا باشید. در این بخش، فهرست کامل پیش‌نیازها را مرور می‌کنیم.
پیش‌نیازهای ضروری جاوااسکریپت
اگر با این مفاهیم آشنا نیستید، ابتدا آنها را یاد بگیرید:
۱. متغیرها و انواع داده (Variables & Data Types)
let،constوvar- تفاوت بین
varوlet/const - انواع داده: string، number، boolean، object، array
۲. توابع (Functions)
- توابع عادی vs توابع پیکانی (Arrow functions)
- پارامترها و return
- توابع درجه اول (First-class functions)
۳. آرایه‌ها و متدهای آن (Arrays & Methods)
map()،filter()،reduce()– این سه متد بسیار مهم هستندforEach()،find()،some()،every()
۴. شیءها (Objects)
- ایجاد و دسترسی به ویژگی‌ها
- Destructuring (تخریب شیء)
- Spread operator (
...)
۵. متدهای رشته‌ها (String Methods)
template literals(استفاده از backticks و${})
۶. ماژول‌ها (Modules)
importوexport– برای کار با کامپوننت‌ها ضروری است
۷. Promise و Async/Await
- درخواست‌های API و کار با داده‌های غیرهمزمان
نصب ابزارهای مورد نیاز
برای شروع آموزش ری اکت، به ابزارهای زیر نیاز دارید:
| ابزار | توضیح | لینک دانلود |
|---|---|---|
| Node.js | محیط اجرای جاوااسکریپت سمت سرور | nodejs.org |
| npm یا yarn | مدیریت پکیج‌ها (به همراه Node.js نصب می‌شود) | – |
| VS Code | بهترین ویرایشگر کد برای ری اکت | code.visualstudio.com |
| Git | مدیریت نسخه (اختیاری اما توصیه می‌شود) | git-scm.com |
بررسی نصب صحیح Node.js و npm
برای بررسی نصب صحیح، ترمینال (Command Prompt) را باز کنید و دستورات زیر را وارد کنید:
node --version npm --version
اگر خروجی مشابه زیر دیدید، نصب شما صحیح است:
v20.10.0 10.2.3
ایجاد اولین پروژه ری اکت با Vite
قدیما برای ایجاد پروژه ری اکت از create-react-app استفاده می‌شد. اما امروزه ابزار Vite بسیار سریع‌تر و سبک‌تر است. برای شروع، دستورات زیر را در ترمینال وارد کنید:
npm create vite@latest my-first-react-app -- --template react cd my-first-react-app npm install npm run dev
پس از اجرا، آدرس http://localhost:5173 را در مرورگر باز کنید. تبریک می‌گویم! اولین پروژه ری اکت شما ساخته شده است.
نکته از آکادمی فگابین: اگر با خطای
command not foundمواجه شدید، مطمئن شوید Node.js به درستی نصب شده است. همچنین، می‌توانید از نسخه‌های LTS (پشتیبانی طولانی مدت) Node.js استفاده کنید.
مفاهیم پایه در ری اکت؛ JSX و کامپوننت
در این بخش از آموزش ری اکت، با دو مفهوم بنیادین یعنی JSX و کامپوننت آشنا می‌شوید.
JSX چیست؟
JSX مخفف JavaScript XML است و به شما اجازه می‌دهد کد شبیه به HTML را در فایل‌های جاوااسکریپت بنویسید. برخلاف HTML واقعی، JSX در مرورگر اجرا نمی‌شود و باید توسط ابزارهایی مانند Babel به جاوااسکریپت خالص تبدیل گردد.
مثال ساده JSX:
const element = <h1>سلام، دنیای ری اکت!</h1>;
قوانین مهم JSX:
۱. استفاده از className به جای class
در HTML از class استفاده می‌شود، اما در JSX باید از className استفاده کنید.
// درست <div className="container">محتوا</div> // غلط <div class="container">محتوا</div>
۲. استفاده از {} برای جاوااسکریپت
برای نوشتن کد جاوااسکریپت داخل JSX، از {} استفاده کنید:
const name = "علی";
const element = <h1>سلام {name}!</h1>;
۳. بسته شدن تگ‌ها
همه تگ‌ها باید بسته شوند. برای مثال، تگ <br> در JSX به صورت <br /> نوشته می‌شود.
کامپوننت در ری اکت چیست؟
کامپوننت‌ها بلوک‌های سازنده رابط کاربری در ری اکت هستند. هر کامپوننت یک قطعه مستقل و قابل استفاده مجدد است که ظاهر و رفتار خاص خود را دارد.
انواع کامپوننت در ری اکت:
| نوع | توضیح | مثال |
|---|---|---|
| کامپوننت تابعی | ساده‌تر و مدرن‌تر، مبتنی بر تابع | function Welcome() { return <h1>Hello</h1>; } |
| کامپوننت کلاسی | قدیمی‌تر، دارای متد lifecycle | class Welcome extends React.Component { ... } |
توصیه: در آموزش ری اکت امروزی، از کامپوننت‌های تابعی و هوک‌ها استفاده می‌شود. بنابراین، ما نیز روی همین روش تمرکز می‌کنیم.
ساخت اولین کامپوننت ری اکت
یک فایل جدید به نام Welcome.jsx در پوشه src بسازید و کد زیر را وارد کنید:
function Welcome() {
return <h1>به آکادمی فگابین خوش آمدید!</h1>;
}
export default Welcome;
استفاده از کامپوننت در App.jsx
فایل App.jsx را باز کنید و کامپوننت Welcome را فراخوانی کنید:
import Welcome from './Welcome';
function App() {
return (
<div>
<Welcome />
<Welcome />
<Welcome />
</div>
);
}
export default App;
خروجی: عبارت «به آکادمی فگابین خوش آمدید!» سه بار نمایش داده می‌شود.
ارسال داده به کامپوننت – Props (خصوصیات)
Props به شما امکان می‌دهد داده را از والد به فرزند منتقل کنید. برای مثال:
// کامپوننت Welcome با props
function Welcome(props) {
return <h1>سلام {props.name}!</h1>;
}
// استفاده در App
function App() {
return (
<div>
<Welcome name="علی" />
<Welcome name="مریم" />
<Welcome name="رضا" />
</div>
);
}
نکته از آکادمی فگابین: Props فقط خواندنی (Read-only) هستند. به عبارت دیگر، کامپوننت فرزند نمی‌تواند props را تغییر دهد.
و مدیریت داده در ری اکت؛ قلب تپنده اپلیکیشن‌های پویا State
در این بخش از آموزش ری اکت، با مفهوم State (وضعیت) و نحوه مدیریت داده‌های پویا در اپلیکیشن آشنا می‌شوید.
تفاوت State و Props
| ویژگی | Props | State |
|---|---|---|
| قابلیت تغییر | فقط خواندنی (Read-only) | قابل تغییر (Mutable) |
| مالکیت | کامپوننت والد | خود کامپوننت |
| کاربرد | ارسال داده از والد به فرزند | نگهداری داده‌ای که در طول زمان تغییر می‌کند |
| منبع داده | از بیرون کامپوننت دریافت می‌شود | درون کامپوننت تعریف می‌شود |
هوک useState؛ مدیریت state در کامپوننت‌های تابعی
برای استفاده از state در کامپوننت‌های تابعی، از هوک useState استفاده می‌کنیم. این هوک یک آرایه دو عضوی برمی‌گرداند: مقدار فعلی state و تابع به‌روزرسانی آن.
نحوه استفاده از useState:
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // مقدار اولیه 0
return (
<div>
<p>شمارش: {count}</p>
<button onClick={() => setCount(count + 1)}>
افزایش
</button>
</div>
);
نکات مهم درباره useState:
- اولاً، هوک‌ها فقط در بالای کامپوننت‌های تابعی قابل استفاده هستند (نه داخل حلقه‌ها یا شرط‌ها)
- ثانیاً، تابع
setCountباعث رندر مجدد کامپوننت می‌شود - ثالثاً، می‌توانید هر نوع داده‌ای را در state ذخیره کنید (عدد، رشته، آرایه، شیء)
آرایه‌ای state مدیریت
برای کار با آرایه‌ها، باید همیشه یک آرایه جدید ایجاد کنید و مستقیماً state را تغییر ندهید:
function TodoList() {
const [todos, setTodos] = useState(['یادگیری ری اکت', 'ساخت پروژه']);
const addTodo = () => {
setTodos([...todos, 'کار جدید']); // spread operator برای افزودن آیتم جدید
};
const removeTodo = (index) => {
const newTodos = [...todos];
newTodos.splice(index, 1);
setTodos(newTodos);
};
return (
<ul>
{todos.map((todo, index) => (
<li key={index}>
{todo}
<button onClick={() => removeTodo(index)}>حذف</button>
</li>
))}
<button onClick={addTodo}>افزودن کار</button>
</ul>
);
}
مدیریت state شیء
هنگام کار با شیءها، باید از spread operator برای حفظ مقادیر قبلی استفاده کنید:
function UserProfile() {
const [user, setUser] = useState({ name: '', age: 0, email: '' });
const updateName = (newName) => {
setUser({ ...user, name: newName }); // فقط name تغییر می‌کند
};
return (
<div>
<p>نام: {user.name}</p>
<p>سن: {user.age}</p>
<p>ایمیل: {user.email}</p>
<button onClick={() => updateName('علی')}>تغییر نام</button>
</div>
);
}
قانون طلایی در به‌روزرسانیstate
هرگز state را مستقیماً تغییر ندهید:
// ❌ اشتباه – باعث رندر مجدد نمی‌شود count = count + 1; // ✅ درست setCount(count + 1);
برای آرایه‌ها و اشیاء نیز همین قانون صدق می‌کند:
// ❌ اشتباه
todos.push('کار جدید');
setTodos(todos);
// ✅ درست
setTodos([...todos, 'کار جدید']);
نکته از آکادمی فگابین: در آموزش ری اکت، تسلط بر مفاهیم state و props بسیار حیاتی است. تقریباً هر اپلیکیشن ری اکتی نیاز به مدیریت state دارد، بنابراین این مفاهیم را خوب تمرین کنید.
ساخت اپلیکیشن تک صفحه‌ای (SPA) با React Router
یکی از نقاط قوت اصلی آموزش ری اکت، توانایی ساخت اپلیکیشن تک صفحه‌ای (SPA) است. در این بخش، با کتابخانه React Router آشنا می‌شوید که مسیرهای مختلف اپلیکیشن شما را مدیریت می‌کند.
اپلیکیشن تک صفحه‌ای (SPA) چیست؟
در اپلیکیشن تک صفحه‌ای، بارگذاری صفحه فقط یک بار انجام می‌شود. پس از آن، با کلیک روی لینک‌ها، محتوای صفحه بدون رفرش کامل تغییر می‌کند. این روش تجربه کاربری بسیار روان‌تری ایجاد می‌کند.
مزایای SPA:
- نخست، سرعت بالا (بدون بارگذاری مجدد صفحه)
- دوم، تجربه کاربری شبیه اپلیکیشن موبایل
- سوم، کاهش بار سرور
- چهارم، امکان کار آفلاین (با PWA)
نصب React Router
برای شروع، باید React Router را در پروژه خود نصب کنید:
npm install react-router-dom
ساختار پایه یک اپلیکیشن با React Router
ابتدا، فایل main.jsx را برای استفاده از Router تنظیم کنید:
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>
);
سپس، در فایل App.jsx مسیرهای خود را تعریف کنید:
import { Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
function App() {
return (
<div>
{/* منوی ناوبری */}
<nav>
<Link to="/">خانه</Link>
<Link to="/about">درباره ما</Link>
<Link to="/contact">تماس با ما</Link>
</nav>
{/* تعریف مسیرها */}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
);
}
export default App;
ایجاد صفحات (کامپوننت‌های صفحه)
حالا، کامپوننت‌های صفحات را در پوشه pages ایجاد کنید:
src/pages/Home.jsx:
function Home() {
return <h1>صفحه اصلی</h1>;
}
export default Home;
src/pages/About.jsx:
function About() {
return <h1>درباره ما</h1>;
}
export default About;
src/pages/Contact.jsx:
function Contact() {
return <h1>تماس با ما</h1>;
}
export default Contact;
پارامترهای پویا در مسیرها
برای ساخت صفحات پویا (مثل صفحه محصول با ID مختلف)، از پارامترهای مسیر استفاده کنید:
// در App.jsx
<Route path="/product/:id" element={<ProductDetail />} />
// در کامپوننت ProductDetail
import { useParams } from 'react-router-dom';
function ProductDetail() {
const { id } = useParams(); // دریافت پارامتر از مسیر
return <h1>جزئیات محصول {id}</h1>;
}
لینک‌های فعال (Active Links)
برای تشخیص لینک فعال، می‌توانید از NavLink به جای Link استفاده کنید:
import { NavLink } from 'react-router-dom';
<NavLink
to="/about"
className={({ isActive }) => isActive ? 'active-link' : ''}
>
درباره ما
</NavLink>
گاهی نیاز است بدون کلیک کاربر، به صفحه دیگری هدایت شوید. برای این کار، از هوک useNavigate استفاده کنید:
import { useNavigate } from 'react-router-dom';
function Login() {
const navigate = useNavigate();
const handleLogin = () => {
// بعد از ورود موفق
navigate('/dashboard');
};
return <button onClick={handleLogin}>ورود</button>;
}
جدول خلاصه کامپوننت‌های React Router
| کامپوننت/هوک | کاربرد |
|---|---|
BrowserRouter | قراردادن در ریشه اپلیکیشن |
Routes | محفظه تعریف مسیرها |
Route | تعریف یک مسیر خاص |
Link | لینک به مسیر دیگر (بدون رفرش) |
NavLink | نسخه پیشرفته Link با تشخیص حالت فعال |
useParams | دریافت پارامترهای پویا از مسیر |
useNavigate | هدایت برنامه‌نویسی شده به مسیر دیگر |
نکته از آکادمی فگابین: React Router یکی از مهم‌ترین کتابخانه‌های جانبی در آموزش ری اکت است. اگر قصد ساخت اپلیکیشن‌های چند صفحه‌ای را دارید، تسلط بر این ابزار ضروری است.
هوک‌های مهم ری اکت؛ useEffect، useContext و useRef
در این بخش از آموزش ری اکت، با مهم‌ترین هوک‌های داخلی ری اکت آشنا می‌شوید که زندگی برنامه‌نویسی شما را بسیار ساده‌تر می‌کنند.
هوک useEffect – مدیریت عوارض جانبی
هوک useEffect به شما اجازه می‌دهد کدهایی را اجرا کنید که «عوارض جانبی» (Side Effects) دارند. برای مثال، فراخوانی API، تنظیم تایمر، یا تعامل با DOM.
نحوه استفاده از useEffect:
import { useState, useEffect } from 'react';
function UserList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
// این کد بعد از رندر اول اجرا می‌شود
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => {
setUsers(data);
setLoading(false);
});
}, []); // آرایه خالی = فقط یک بار اجرا شود
if (loading) return <p>در حال بارگذاری...</p>;
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
سه حالت استفاده از useEffect:
| حالت | کد | زمان اجرا |
|---|---|---|
| بدون وابستگی | useEffect(() => { ... }) | بعد از هر رندر |
| آرایه خالی | useEffect(() => { ... }, []) | فقط یک بار (بعد از رندر اول) |
| با وابستگی | useEffect(() => { ... }, [count]) | هر بار که count تغییر کند |
هوک useContext – اشتراک سراسری داده
برخلاف props که داده را از والد به فرزند منتقل می‌کنند، useContext به شما اجازه می‌دهد داده را در کل اپلیکیشن بدون نیاز به ارسال از طریق props به اشتراک بگذارید.
مراحل استفاده از Context:
گام اول – ایجاد Context:
// src/context/ThemeContext.jsx
import { createContext, useState } from 'react';
export const ThemeContext = createContext();
export function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
}
گام دوم – استفاده در کل اپلیکیشن (main.jsx):
import { ThemeProvider } from './context/ThemeContext';
ReactDOM.createRoot(document.getElementById('root')).render(
<ThemeProvider>
<App />
</ThemeProvider>
);
گام سوم – استفاده از Context در کامپوننت:
import { useContext } from 'react';
import { ThemeContext } from './context/ThemeContext';
function ThemedButton() {
const { theme, setTheme } = useContext(ThemeContext);
return (
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
حالت فعلی: {theme}
</button>
);
}
هوک useRef – ارجاع به عناصر DOM
useRef دو کاربرد اصلی دارد:
۱. دسترسی مستقیم به عناصر DOM (بدون استفاده از document.querySelector):
import { useRef } from 'react';
function InputFocus() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus(); // فوکوس روی input
};
return (
<div>
<input ref={inputRef} type="text" placeholder="نام خود را وارد کنید" />
<button onClick={focusInput}>فوکوس روی ورودی</button>
</div>
);
}
۲. ذخیره مقادیری که باعث رندر مجدد نمی‌شوند:
function Timer() {
const [count, setCount] = useState(0);
const intervalRef = useRef(null);
const startTimer = () => {
intervalRef.current = setInterval(() => {
setCount(c => c + 1);
}, 1000);
};
const stopTimer = () => {
clearInterval(intervalRef.current);
};
return (
<div>
<p>زمان: {count} ثانیه</p>
<button onClick={startTimer}>شروع</button>
<button onClick={stopTimer}>توقف</button>
</div>
);
}
جدول خلاصه هوک‌های پرکاربرد ری اکت
| هوک | کاربرد | زمان استفاده |
|---|---|---|
useState | مدیریت state در کامپوننت | همیشه |
useEffect | مدیریت عوارض جانبی (API، تایمر، DOM) | نیاز به اجرای کد بعد از رندر |
useContext | اشتراک داده سراسری | جلوگیری از prop drilling |
useRef | دسترسی به DOM یا ذخیره مقدار بدون رندر | فوکوس، تایمر، ذخیره مقدار موقت |
useCallback | ذخیره توابع (بهینه‌سازی) | جلوگیری از رندرهای اضافی |
useMemo | ذخیره مقادیر محاسباتی سنگین | بهینه‌سازی عملکرد |
نکته از آکادمی فگابین: تسلط بر هوک‌ها یکی از مهم‌ترین مهارت‌ها در آموزش ری اکت است. پیشنهاد می‌کنم هر هوک را در یک پروژه کوچک جداگانه تمرین کنید.
ساخت اپلیکیشن عملی؛ پروژه Todo List با ری اکت
در این بخش از آموزش ری اکت، تمام مفاهیمی که تاکنون یاد گرفته‌اید را در قالب یک پروژه عملی پیاده‌سازی می‌کنیم. پروژه Todo List یک اپلیکیشن مدیریت وظایف است که شامل افزودن، حذف و ویرایش تسک‌ها می‌شود.
ساختار پروژه
قبل از شروع، ساختار پوشه‌های پروژه را به این شکل ایجاد کنید:
my-todo-app/ ├── src/ │ ├── components/ │ │ ├── TodoForm.jsx │ │ ├── TodoList.jsx │ │ └── TodoItem.jsx │ ├── App.jsx │ └── main.jsx ├── index.html └── package.json
مرحله ۱: ایجاد state اصلی در App.jsx
// src/App.jsx
import { useState } from 'react';
import TodoForm from './components/TodoForm';
import TodoList from './components/TodoList';
import './App.css';
function App() {
const [todos, setTodos] = useState([
{ id: 1, text: 'یادگیری ری اکت', completed: false },
{ id: 2, text: 'ساخت پروژه Todo', completed: false },
{ id: 3, text: 'تمرین هوک‌ها', completed: true },
]);
// افزودن تسک جدید
const addTodo = (text) => {
const newTodo = {
id: Date.now(),
text: text,
completed: false,
};
setTodos([...todos, newTodo]);
};
// حذف تسک
const deleteTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};
// تغییر وضعیت (انجام شده/انجام نشده)
const toggleTodo = (id) => {
setTodos(
todos.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
)
);
};
// ویرایش تسک
const editTodo = (id, newText) => {
setTodos(
todos.map(todo =>
todo.id === id ? { ...todo, text: newText } : todo
)
);
};
return (
<div className="app">
<h1>مدیریت وظایف</h1>
<p>تعداد وظایف انجام شده: {todos.filter(t => t.completed).length}</p>
<TodoForm addTodo={addTodo} />
<TodoList
todos={todos}
deleteTodo={deleteTodo}
toggleTodo={toggleTodo}
editTodo={editTodo}
/>
</div>
);
}
export default App;
مرحله ۲: ساخت کامپوننت فرم افزودن تسک (TodoForm.jsx)
// src/components/TodoForm.jsx
import { useState } from 'react';
function TodoForm({ addTodo }) {
const [inputValue, setInputValue] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
if (inputValue.trim()) {
addTodo(inputValue);
setInputValue('');
}
};
return (
<form onSubmit={handleSubmit} className="todo-form">
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="یک وظیفه جدید اضافه کنید..."
className="todo-input"
/>
<button type="submit" className="todo-button">افزودن</button>
</form>
);
}
export default TodoForm;
مرحله ۳: ساخت کامپوننت لیست تسک‌ها (TodoList.jsx)
// src/components/TodoList.jsx
import TodoItem from './TodoItem';
function TodoList({ todos, deleteTodo, toggleTodo, editTodo }) {
if (todos.length === 0) {
return <p className="empty-message">هیچ وظیفه‌ای وجود ندارد!</p>;
}
return (
<ul className="todo-list">
{todos.map(todo => (
<TodoItem
key={todo.id}
todo={todo}
deleteTodo={deleteTodo}
toggleTodo={toggleTodo}
editTodo={editTodo}
/>
))}
</ul>
);
}
export default TodoList;
مرحله ۴: ساخت کامپوننت آیتم تسک (TodoItem.jsx)
// src/components/TodoItem.jsx
import { useState } from 'react';
function TodoItem({ todo, deleteTodo, toggleTodo, editTodo }) {
const [isEditing, setIsEditing] = useState(false);
const [editText, setEditText] = useState(todo.text);
const handleEdit = () => {
if (editText.trim()) {
editTodo(todo.id, editText);
setIsEditing(false);
}
};
return (
<li className={`todo-item ${todo.completed ? 'completed' : ''}`}>
<input
type="checkbox"
checked={todo.completed}
onChange={() => toggleTodo(todo.id)}
className="todo-checkbox"
/>
{isEditing ? (
<input
type="text"
value={editText}
onChange={(e) => setEditText(e.target.value)}
onBlur={handleEdit}
onKeyPress={(e) => e.key === 'Enter' && handleEdit()}
className="todo-edit-input"
autoFocus
/>
) : (
<span className="todo-text" onDoubleClick={() => setIsEditing(true)}>
{todo.text}
</span>
)}
<div className="todo-actions">
<button onClick={() => setIsEditing(true)} className="edit-btn">
✏️
</button>
<button onClick={() => deleteTodo(todo.id)} className="delete-btn">
🗑️
</button>
</div>
</li>
);
}
export default TodoItem;
مرحله ۵: استایل‌دهی با CSS (App.css)
/* src/App.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.app {
background: white;
max-width: 600px;
width: 90%;
margin: 2rem auto;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 0.5rem;
}
.todo-form {
display: flex;
gap: 0.5rem;
margin: 1.5rem 0;
}
.todo-input {
flex: 1;
padding: 0.75rem;
border: 2px solid #ddd;
border-radius: 0.5rem;
font-size: 1rem;
}
.todo-button {
padding: 0.75rem 1.5rem;
background: #667eea;
color: white;
border: none;
border-radius: 0.5rem;
cursor: pointer;
font-size: 1rem;
}
.todo-list {
list-style: none;
margin-top: 1rem;
}
.todo-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: #f8f9fa;
border-radius: 0.5rem;
margin-bottom: 0.5rem;
}
.todo-item.completed .todo-text {
text-decoration: line-through;
color: #888;
}
.todo-text {
flex: 1;
cursor: pointer;
}
.todo-actions {
display: flex;
gap: 0.5rem;
}
.edit-btn, .delete-btn {
background: none;
border: none;
cursor: pointer;
font-size: 1.2rem;
padding: 0.25rem;
}
.empty-message {
text-align: center;
color: #888;
padding: 2rem;
}
اجرای پروژه
برای اجرای پروژه، دستورات زیر را در ترمینال وارد کنید:
npm run dev
سپس آدرس http://localhost:5173 را در مرورگر باز کنید.
قابلیت‌های این پروژه:
- افزودن وظیفه جدید
- حذف وظیفه
- علامت زدن وظیفه به عنوان انجام شده
- ویرایش وظیفه با دوبار کلیک
- نمایش تعداد وظایف انجام شده
- ذخیره وضعیت در state (با رفرش صفحه از بین می‌رود)
نکته از آکادمی فگابین: برای ذخیره‌سازی دائمی تسک‌ها، می‌توانید از
localStorageیا یک backend واقعی استفاده کنید. این تمرین را به عنوان پروژه نهایی آموزش ری اکت خود کامل کنید.
بهترین منابع برای ادامه یادگیری ری اکت
آموزش ری اکت فقط با خواندن یک مقاله تمام نمی‌شود. در این بخش، بهترین منابع رایگان و پولی را برای ادامه مسیر یادگیری معرفی می‌کنیم.
منابع رایگان
۱. مستندات رسمی ری اکت (React.dev)
آدرس: react.dev
مستندات رسمی ری اکت به تازگی بازنویسی شده و به عنوان یکی از بهترین منابع آموزشی برای مبتدیان شناخته می‌شود. این مستندات شامل مثال‌های تعاملی و تمرین‌های عملی است.
۲. دوره رایگان ری اکت در YouTube
کانال‌های زیر دوره‌های رایگان و باکیفیتی دارند:
- freeCodeCamp – دوره ۱۰ ساعته ری اکت
- Traversy Media – پروژه‌های عملی
- Codevolution – آموزش قدم‌به‌قدم
۳. Frontend Mentor
آدرس: frontendmentor.io
این وب‌سایت پروژه‌های آماده با طراحی حرفه‌ای ارائه می‌دهد که می‌توانید با ری اکت پیاده‌سازی کنید.
منابع پولی (توصیه شده)
| منبع | توضیح | هزینه تقریبی |
|---|---|---|
| React – The Complete Guide (Udemy) | دوره جامع توسط Maximilian Schwarzmüller | ۱۰ تا ۲۰ دلار |
| Epic React (Kent C. Dodds) | دوره پیشرفته برای حرفه‌ای‌ها | ۴۰۰ دلار (ارزشش را دارد) |
| Frontend Masters | دوره‌های تخصصی با بهترین مدرسان | ۳۹ دلار ماهانه |
کتاب‌های پیشنهادی
۱. راهنمای عملی ری اکت (The Road to React)
نویسنده: Robin Wieruch – نسخه رایگان آنلاین موجود است
۲. ری اکت جامع (Fullstack React)
ناشر: Fullstack.io – مناسب برای سطوح متوسط تا پیشرفته
تمرین‌های پیشنهادی
پس از پایان آموزش ری اکت، این پروژه‌ها را برای تقویت مهارت خود پیاده‌سازی کنید:
سطح مبتدی:
- ماشین حساب ساده
- نمایش آب و هوا با API
- گالری تصاویر
سطح متوسط:
- فروشگاه آنلاین ساده (با سبد خرید)
- بلاگ با قابلیت جستجو و فیلتر
- داشبورد مدیریت با نمودارها
سطح پیشرفته:
- کلون یوتیوب (با قابلیت پخش ویدیو)
- اپلیکیشن چت زنده (با Socket.io)
- سیستم مدیریت محتوای کامل
نقشه راه یادگیری ری اکت
مرحله ۱ (هفته ۱-۲): مبانی جاوااسکریپت (ES6) و مفاهیم پایه ری اکت (JSX، کامپوننت، props)
مرحله ۲ (هفته ۳-۴): هوک‌های useState، useEffect و پروژه‌های کوچک
مرحله ۳ (هفته ۵-۶): React Router و ساخت اپلیکیشن‌های چند صفحه‌ای
مرحله ۴ (هفته ۷-۸): مدیریت state پیشرفته (Context API یا Redux)
مرحله ۵ (هفته ۹-۱۰): کار با API و فرم‌ها
مرحله ۶ (هفته ۱۱-۱۲): Next.js و SSR (رندر سمت سرور)
نکته از آکادمی فگابین: مهم‌ترین چیز در آموزش ری اکت، تمرین مداوم است. توصیه می‌کنم هر روز حداقل ۳۰ دقیقه کد بزنید و پروژه‌های مختلف بسازید. به یاد داشته باشید، دیدن ویدیوهای آموزشی بدون تمرین عملی نتیجه مطلوبی نخواهد داشت.
نتیجه‌گیری؛ ری اکت دروازه ورود به دنیای حرفه‌ای توسعه فرانت‌اند
در این مقاله از آکادمی فگابین، با آموزش ری اکت از صفر تا صد آشنا شدید. از مفاهیم پایه مانند JSX و کامپوننت گرفته تا هوک‌های پیشرفته و ساخت اپلیکیشن کامل Todo List.
خلاصه نکات کلیدی
| مرحله | عنوان | مفاهیم کلیدی |
|---|---|---|
| ۱ | مبانی | JSX، کامپوننت، Props |
| ۲ | مدیریت داده | State، useState |
| ۳ | مسیرها | React Router، SPA |
| ۴ | هوک‌ها | useEffect، useContext، useRef |
| ۵ | پروژه عملی | Todo List (CRUD) |
| ۶ | ادامه مسیر | منابع رایگان و پولی |
جمع‌بندی
آموزش ری اکت یک سرمایه‌گذاری هوشمندانه برای آینده شغلی شماست. طبق آمار سایت Indeed، تقاضا برای توسعه‌دهندگان ری اکت در سال ۲۰۲۶ نسبت به سال قبل ۳۵ درصد افزایش یافته است. دلیل اصلی، محبوبیت روزافزون اپلیکیشن‌های تک صفحه‌ای (SPA) و نیاز شرکت‌ها به رابط‌های کاربری سریع و روان است.
اگر تا اینجا همراه ما بوده‌اید، پایه‌های اصلی ری اکت را یاد گرفته‌اید. اما یادگیری واقعی زمانی شروع می‌شود که خودتان دست به کد بزنید و پروژه‌های شخصی بسازید.
حرف آخر
توصیه می‌کنم همین امروز اولین پروژه خود را شروع کنید. اگر به هر مشکلی برخوردید، نترسید – گوگل و مستندات رسمی ری اکت بهترین دوستان شما هستند. و اگر به کمک حرفه‌ای نیاز داشتید، تیم ما در آکادمی فگابین آماده پاسخگویی به سوالات شماست.
دعوت به اقدام نهایی (CTA)
اگر به دنبال پیاده‌سازی آنچه در این مقاله گفتیم – از آموزش ری اکت تا ساخت اپلیکیشن تک صفحه‌ای حرفه‌ای – به بهترین شکل برای کسب‌وکارتان هستید، تیم متخصص فگابین با ارائه مجموعه کاملی از خدمات طراحی و توسعه وب‌سایت، خدمات طراحی و توسعه اپلیکیشن و خدمات سئو در کنار شماست. ما راه‌حل را از مشاوره تا اجرا و پشتیبانی، ساده و شفاف می‌کنیم. آکادمی فگابین نیز با ارائه دوره‌های تخصصی ری اکت و جاوااسکریپت، شما را در مسیر یادگیری همراهی می‌کند. دعوتتان می‌کنیم:
- نمونه‌کارهای ما را در نمونه‌کارهای فگابین ببینید.
- برای آشنایی با مدل همکاری و تعرفه خدمات برنامه‌نویسی به این صفحه سر بزنید.
- آماده‌اید که پروژه را شروع کنید؟ همین حالا برای یک جلسه مشاوره تخصصی رایگان با ما تماس بگیرید.
کار ما را در شبکه‌های اجتماعی دنبال کنید تا از آخرین روندهای فناوری باخبر بمانید:
همچنین برای مطالعه مقالات آموزشی بیشتر، از وبلاگ فگابین دیدن فرمایید.
