دوره فرانت پیشرفته با ReactJs

⚛️ بخش اول: React مقدماتی

📘 جلسه 1: مقدمات جاوااسکریپت مدرن (ES6+)، ابزارها، ساختار پروژه
🔹 مرور سریع مفاهیم پایه JS (let, const, function, scope)
🔹 آشنایی با ویژگی‌های ES6+:
arrow function
template literals
destructuring
spread & rest operator
import/export
promises & async/await
🔹 معرفی ابزارهای توسعه: Node.js، npm/yarn، VS Code، Prettier
🔹 ساختاردهی پوشه‌ها در پروژه‌های مدرن (src، components، assets و ...)
🔹 معرفی Git و GitHub برای کنترل نسخه

📘 جلسه 2: نصب و راه‌اندازی پروژه React، کامپوننت‌ها و props
🔹 نصب اولین پروژه با Vite
🔹 آشنایی با ساختار پروژه React (index.js، App.js، public و src)
🔹 ایجاد اولین کامپوننت
🔹 تفاوت JSX و HTML
🔹 props و انتقال داده بین کامپوننت‌ها
🔹 تمرین: ساخت کامپوننت Card و ارسال داده از والد

📘 جلسه 3: state و event handling، شرطی‌سازی و حلقه‌ها در JSX
🔹 تعریف state و استفاده از useState
🔹 مدیریت داده‌ها در کامپوننت‌ها
🔹 event handling در React (onClick، onChange و ...)
🔹 شرطی‌سازی در JSX (?:، &&، if-else بیرون JSX)
🔹 حلقه‌ها در JSX (map)
🔹 تمرین: ساخت لیست داینامیک

📘 جلسه 4: useEffect و lifecycle در React
🔹 مفهوم lifecycle در کامپوننت‌ها
🔹 useEffect و سناریوهای استفاده
🔹 fetch داده از API (axios / fetch)
🔹 dependency array و performance
🔹 cleanup function

📘 جلسه 5: React Router و مدیریت route‌ها
🔹 نصب react-router-dom
🔹 SPA و routing
🔹 Route و Link
🔹 useParams و useNavigate
🔹 nested routes و layout
🔹 تمرین: پروژه چندصفحه‌ای

📘 جلسه 6: پروژه Todo ساده
🔹 ساخت پروژه با Vite
🔹 CRUD (Add, Delete, Toggle)
🔹 localStorage
🔹 state و props و event handling
🔹 طراحی ساده با CSS یا Tailwind

⚛️ بخش دوم: React پیشرفته

📘 جلسه 1: TypeScript در React
🔹 معرفی TypeScript
🔹 تنظیم پروژه با TS
🔹 تایپ props و state
🔹 interface vs type
🔹 تمرین: تبدیل Todo به TS

📘 جلسه 2: React Query
🔹 query و mutation
🔹 cache و refetch
🔹 QueryClient و Provider
🔹 Devtools
🔹 تمرین API

📘 جلسه 3: مدیریت state (Context vs Zustand)
🔹 Context API
🔹 Zustand
🔹 مقایسه performance
🔹 ساخت global state

📘 جلسه 4: react-hook-form و validation
🔹 register و handleSubmit
🔹 validation
🔹 Yup
🔹 فرم لاگین/ثبت‌نام

📘 جلسه 5: React Table
🔹 column definition
🔹 pagination و sorting
🔹 اتصال به API
🔹 custom cell

📘 جلسه 6: Material UI
🔹 کامپوننت‌های آماده
🔹 theme customization
🔹 ساخت داشبورد

📘 جلسه 7: i18n در React
🔹 چندزبانه‌سازی
🔹 react-i18next
🔹 فایل‌های ترجمه
🔹 تغییر زبان در runtime
🔹 lazy loading ترجمه‌ها