چرا React؟

React به دلیل رویکرد مبتنی بر کامپوننت، امکان بازاستفاده‌پذیری کد، کارایی بالا از طریق Virtual DOM و اکوسیستم غنی، به انتخاب اول بسیاری از شرکت‌های پیشرو تبدیل شده است. یادگیری React به شما این امکان را می‌دهد که:

• رابط‌های کاربری واکنش‌گرا و مدرن بسازید.
• عملکرد وب‌اپلیکیشن‌های خود را به طور قابل توجهی بهبود بخشید.
• در پروژه‌های تیمی بزرگ و پیچیده به طور مؤثر مشارکت کنید.
• از فرصت‌های شغلی فراوان در حوزه توسعه فرانت‌اند بهره‌مند شوید.

آنچه در این دوره خواهید آموخت

این دوره آموزشی به گونه‌ای طراحی شده است که تمامی جنبه‌های کلیدی توسعه با React، از مفاهیم پایه تا تکنیک‌های پیشرفته، را پوشش دهد:

• مبانی React: آشنایی با JSX، کامپوننت‌ها (فانکشنال و کلاس)، Props، State و چرخه حیات کامپوننت‌ها.
• React Hooks: یادگیری عمیق Hooks محبوب مانند useState، useEffect، useContext، useReducer و custom Hooks برای مدیریت منطق و وضعیت در کامپوننت‌های فانکشنال.
• مدیریت وضعیت با Redux: درک کامل مفاهیم Redux، Action، Reducer، Store و اتصال React به Redux با Redux Toolkit.
• React Router: پیاده‌سازی ناوبری (Routing) در برنامه‌های Single Page Application (SPA) با استفاده از React Router.
• فرم‌ها در React: مدیریت ورودی‌های فرم، اعتبارسنجی (Validation) و ارسال داده‌ها.
• Fetch API و Axios: کار با APIها برای دریافت و ارسال داده‌ها، مدیریت درخواست‌های HTTP.
• Styling در React: روش‌های مختلف استایل‌دهی مانند CSS Modules، Styled Components و Inline Styles.
• Context API: جایگزینی مناسب برای Redux در پروژه‌های کوچک‌تر یا برای مدیریت وضعیت‌های سراسری ساده.
• Testing: معرفی و استفاده از ابزارهای تست مانند Jest و React Testing Library برای اطمینان از صحت عملکرد کد.
• پروژه‌های عملی: ساخت چندین پروژه واقعی از ابتدا تا انتها، از جمله یک اپلیکیشن فروشگاهی، یک داشبورد مدیریتی و یک وبلاگ.
• Deployment: نحوه آماده‌سازی و انتشار (Deploy) برنامه‌های React بر روی پلتفرم‌های مختلف.

ساختار دوره و سرفصل‌های کلیدی

این دوره آموزشی به بخش‌های مجزا تقسیم شده است تا یادگیری به صورت سازمان‌یافته و مرحله به مرحله انجام شود:

بخش ۱: مقدمات و راه‌اندازی محیط

• معرفی React و مزایای آن
• نصب Node.js و npm/Yarn
• ایجاد پروژه React با Create React App
• آشنایی با ساختار پروژه

بخش ۲: اصول اولیه React

• JSX و نحو آن
• کامپوننت‌های فانکشنال و کلاس
• Props و نحوه انتقال داده
• State و مدیریت وضعیت داخلی کامپوننت
• مدیریت رویدادها (Events)
• Conditional Rendering و List Rendering

بخش ۳: React Hooks – قلب تپنده React مدرن

• مفهوم Hooks و دلایل استفاده
• useState: مدیریت وضعیت ساده
• useEffect: مدیریت Side Effects (مانند فراخوانی API، اشتراک‌گذاری‌ها)
• useContext: اشتراک‌گذاری داده‌ها در سراسر درخت کامپوننت
• useReducer: مدیریت وضعیت پیچیده‌تر
• Custom Hooks: ایجاد Hooks سفارشی برای منطق قابل بازاستفاده
• دیگر Hooks مهم: useRef، useMemo، useCallback

بخش ۴: ناوبری و مسیریابی با React Router

• نصب و پیکربندی React Router
• تعریف مسیرها (Routes)
• لینک‌دهی (Links) و ناوبری برنامه‌نویسی
• پارامترهای مسیر (Route Parameters)
• Nested Routes و Private Routes

بخش ۵: مدیریت وضعیت پیشرفته با Redux و Redux Toolkit

• چالش‌های مدیریت وضعیت در برنامه‌های بزرگ
• مفاهیم Redux: Store، Actions، Reducers
• نحوه اتصال React به Redux
• مقدمه‌ای بر Redux Toolkit و مزایای آن
• استفاده از createSlice برای ساده‌سازی Reducerها
• مدیریت Asynchronous Actions با createAsyncThunk
• سلکتورها (Selectors) برای استخراج داده از Store

بخش ۶: کار با فرم‌ها و اعتبارسنجی

• فرم‌های کنترل شده (Controlled Components)
• فرم‌های غیرکنترل شده (Uncontrolled Components)
• اعتبارسنجی سمت کلاینت
• استفاده از کتابخانه‌هایی مانند Formik و Yup

بخش ۷: تعامل با APIها

• استفاده از Fetch API برای درخواست‌های HTTP
• معرفی Axios و مزایای آن
• مدیریت خطاهای شبکه
• نمایش داده‌های دریافتی در UI

بخش ۸: استایل‌دهی در React

• CSS Modules برای استایل‌دهی محلی
• Styled Components برای CSS-in-JS
• Inline Styles و مزایا و معایب آن
• استفاده از کتابخانه‌های UI مانند Material-UI یا Ant Design

بخش ۹: پروژه‌های عملی و کاربردی

• ساخت یک فروشگاه آنلاین کامل با امکان افزودن به سبد خرید و پرداخت (شبیه‌سازی شده)
• توسعه یک داشبورد مدیریتی با نمودارها و جداول پویا
• ایجاد یک وبلاگ با قابلیت افزودن، ویرایش و حذف پست‌ها

بخش ۱۰: تست و انتشار برنامه

• مقدمه‌ای بر تست واحد (Unit Testing) و تست یکپارچگی (Integration Testing)
• نوشتن تست برای کامپوننت‌ها و Hooks
• استفاده از Jest و React Testing Library
• بهینه‌سازی برنامه برای Production
• نحوه Deploy کردن برنامه React

پیش‌نیازها

برای استفاده حداکثری از این دوره، آشنایی اولیه با مفاهیم زیر توصیه می‌شود:

• HTML و CSS: درک پایه‌ای از ساختار صفحات وب و استایل‌دهی.
• JavaScript: تسلط بر مفاهیم پایه JavaScript مانند متغیرها، توابع، آرایه‌ها، اشیاء، ES6+ (مانند Arrow Functions، Classes، Modules، Destructuring).
• مفاهیم توسعه وب: آشنایی کلی با نحوه کار وب، HTTP و APIها.

اگر در JavaScript تازه‌کار هستید، پیشنهاد می‌شود ابتدا دوره‌های مقدماتی JavaScript را پشت سر بگذارید.

مزایای این دوره

• دسترسی آسان و همیشگی: محتوا بر روی فلش مموری 32 گیگابایتی ارائه شده و نیاز به دانلودهای مکرر یا اینترنت پرسرعت برای دسترسی به فایل‌ها ندارید.
• جامعیت: پوشش کامل React از مبانی تا مباحث پیشرفته با تمرکز بر Hooks و Redux.
• آموزش عملی: تاکید بر پروژه‌های واقعی و کاربردی برای درک عمیق‌تر مفاهیم.
• به‌روز بودن: استفاده از جدیدترین تکنولوژی‌ها و بهترین روش‌ها در توسعه React.
• یادگیری به زبان فارسی: توضیحات و مثال‌ها به زبان فارسی ارائه شده است تا درک مطلب را آسان‌تر کند.