آموزش ساخت اپلیکیشن‌های وب مدرن با React، هوک‌ها، مدیریت State و APIها با استفاده از Vite یا Next.js - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• تریلر دوره React JS React JS course trailer

1. مبانی React و راه‌اندازی محیط توسعه مدرن 1. Foundations of React and Modern Development Setup

• مزایا: عملکرد، قابلیت استفاده مجدد، جامعه کاربری قوی، سئو (با SSR/SSG) Benefits: Performance, reusability, strong community, SEO (with SSR/SSG)

• راه‌اندازی محیط توسعه مدرن Set up modern development environment

• فلسفه‌های اصلی React Core philosophies of React

• ابزارهای توسعه‌دهنده مرورگر (DevTools) Browser developer tools

• DOM مجازی: نحوه عملکرد و مزایا The virtual DOM: How it works, its advantages

• React چیست؟ What is React?

• اجرای اولین پروژه React Running your first React project

• موارد استفاده: SPAs، PWAs، اپلیکیشن‌های موبایل (با React Native)، اپلیکیشن‌های دسکتاپ Use cases: SPAs, PWAs, mobile apps (with React Native), desktop apps

• رویکرد Feature-first و Domain-driven Feature-first/domain-driven

• طراحی اتمیک (Atomic Design) Atomic design

• انتخاب استارتر پروژه Choosing your project starter

• VS Code و افزونه‌های کاربردی VS Code and extensions

• الگوریتم Reconciliation: توضیح دقیق فرآیند Diffing Reconciliation algorithm: Detailed explanation of the diffing process

• معماری React Fiber React Fiber architecture

• ساختار استاندارد پروژه‌های Vite/Next.js Standard Vite/Next.js project structure

• معماری لایه‌ای (Layered Architecture) Layered architecture

2. اصول بنیادی و مفاهیم اصلی React 2. React Fundamentals and Core Concepts

• خلاصه: بهترین روش‌ها (Best Practices) Summary: Best practices

• مقایسه کامپوننت‌های تابعی و کلاسی Functional vs class component

• تفاوت‌ها با HTML Differences from HTML

• کامپوننت‌ها: تابعی و کلاسی Components: Functional and class

• درک مفاهیم Props Understanding props

• مقدمه‌ای بر Prop Drilling Introduction to prop drilling

• بهترین روش‌های پیاده‌سازی شمارنده Counter best practices

• لیست‌ها در React Lists in React

• کامپوننت‌های کلاسی Class components

• بهترین روش‌های طراحی کارت کاربر User card best practices

• انواع Props (Prop Types) Prop types

• راهکار: Context API Solution: Context API

• بهترین روش‌ها برای نوشتن JSX تمیز Best practices for writing clean JSX

• مدیریت رویدادهای کاربر Handling user events

• رندرینگ شرطی: Ternary Operators Conditional rendering: Ternaries

• کلیدها (Keys)، Reconciliation و جمع‌بندی Keys, reconciliation, and summary

• راهکار: ترکیب کامپوننت‌ها (Component Composition) Solution: Component composition

• کامپوننت‌های تابعی Functional components

• سینتکس، جاسازی عبارت‌ها، اتریبیوت‌ها و Children Syntax, embedding expressions, attributes, children

• دسترسی به Props Accessing props

• مقدمه‌ای بر useState Introduction to the useState

3. استایل‌دهی در اپلیکیشن‌های React 3. Styling in React Applications

• کتابخانه Emotion Emotion library

• پشتیبانی از تمینگ (Theming) Theming support

• راه‌اندازی Tailwind CSS در پروژه React (Vite) Setting up Tailwind CSS in a React project (Vite)

• مزایا و معایب CSS-in-JS Pros and cons of CSS-in-JS

• فایل‌های استایل: CSS سراسری و ایمپورت کردن CSS CSS stylesheets: Global CSS and importing CSS

• معرفی Tailwind Introducing Tailwind

• بهترین روش‌های Mobile-first Mobile-first best practices

• CSS Modules: محدوده محلی و مزایا برای پروژه‌های بزرگ CSS modules: Local scope and benefits for larger projects

• مثال‌های طراحی ریسپانسیو Responsive design examples

• استایل‌دهی پویا (Dynamic Styling) Dynamic styling

• مفاهیم اصلی و تمینگ با tailwind.config.js Core concepts and theming with tailwind.config.js

• تمرین عملی کارت کاربر ریسپانسیو Responsive user card practical

• استایل‌های Inline: موارد استفاده و محدودیت‌ها Inline styles: Use cases and limitations

• توضیحات کارت کاربر ریسپانسیو Responsive user card explanation

• کامپوننت‌های استایل‌دار (Styled Components): بخش دوم Styled Components: Part 2

• کامپوننت‌های استایل‌دار (Styled Components): بخش اول Styled Components: Part 1

4. تسلط بر هوک‌های React 4. Mastering React Hooks

• معرفی useCallback useCallback introduction

• معرفی و سینتکس useReducer useReducer introduction and syntax

• موارد استفاده: خلاصه Use cases: Summary

• خلاصه useCallback و اشتباهات رایج useCallback summary and pitfalls

• مثال و کاربردهای useImperative useImperative example and uses

• مقدمه‌ای بر مشکل Hooks Wrapper Hell Introduction to hooks wrapper hell

• مثال‌های رایج و جمع‌بندی useImperative useImperative common use case and summary

• سردرگمی در مورد کلمه کلیدی this This keyword confusion

• مثال تایمر با useRef: مقادیر Mutable useRef timer example: Mutable values

• آرایه‌های وابستگی در useEffect useEffect dependency arrays

• معرفی useContext useContext introduction

• مشکلات useEffect useEffect problem

• مثال و درک عمیق useCallback useCallback example and understanding

• منطق‌های پیچیده چرخه حیات (Lifecycle) Complex lifecycle logic

• مدیریت اشیاء (Objects) Managing objects

• هوک useState useState hook

• مقایسه useReducer و useState: مثال پایه useReducer vs useState: Basic example

• معرفی هوک‌های سفارشی (Custom Hooks) Custom hook introduction

• اصول طراحی هوک‌های سفارشی Custom hook design principles

• مقداردهی اولیه تنبل (Lazy Initialization) Lazy initialization

• تابع Cleanup در useEffect و جمع‌بندی useEffect cleanup function and summary

• مثال مدیریت وضعیت با useReducer useReducer status manager example

• معرفی useImperativeHandle useImperativeHandle introduction

• مدیریت آرایه‌ها: خلاصه Managing arrays: Summary

• معرفی useMemo useMemo introduction

• مقایسه useReducer و Redux: خلاصه useReducer vs Redux: Summary

• مثال و نحوه استفاده از هوک سفارشی Custom hook example and usage

• اشتباهات رایج و جمع‌بندی هوک‌های سفارشی Custom hook pitfalls and summary

• بایدها و نبایدهای useMemo: خلاصه useMemo dos and don'ts: Summary

• معرفی useRef: عناصر DOM useRef introduction: DOM elements

• کانتکست تم: پیاده‌سازی Provider Theme context: Implementing the provider

• معرفی هوک useEffect useEffect hook: Introduction

• فراخوانی API با useEffect useEffect API calling

• مثال واقعی از useMemo useMemo real-world example

• تغییردهنده تم و کامپوننت Header Theme switcher and header component

• موارد رایج useRef و مقایسه با useState useRef common cases and comparison with useState

5. فرم‌ها و اعتبارسنجی در React 5. Forms and Validation in React

• خلاصه: UseForm Summary: UseForm

• مزایای Yup و Zod Benefits of Yup and Zod

• مثال Text area و Select Text area and select example

• کنترل شده در مقابل کنترل نشده (Controlled vs Uncontrolled): بررسی عمیق Controlled vs uncontrolled: In depth

• مزایا و معایب هر رویکرد Pros and cons of each approach

• دموی استفاده از Zod Zod demo usage

• وضعیت فرم ثبت‌نام و ارسال (Submission) Signup form state and submission

• مقدمه‌ای بر فرم‌ها Forms introduction

• بررسی watch در useForm Watch useForm

• مثال Checkbox Checkbox example

• نصب وابستگی‌ها و تعریف Schema Install dependencies and schema

• مثال Text input Text input example

• زمان انتخاب هر روش When to choose which

• تکمیل فرم ثبت‌نام Completing signup form

• خلاصه Radio button Radio button summary

• دموی کتابخانه Yup Yup library demo

• React Hook Form React Hook Form

• مثال useForm useForm example

• پروژه فرم ثبت‌نام: مقدمه Signup form project: Introduction

6. مسیریابی در React با React Router 6. Routing in React with React Router

• پشتیبانی از مسیریابی در React 19 React 19 routing support

• معرفی Data loader Data loader: Introduction

• مثال عملی Data loader در Root Layout Data loader root layout: Working example

• مقدمه‌ای بر مسیرهای تو در تو (Nested Routes) Nested routes: Introduction

• مرور: مسیریابی با Link Recap: Routing with Link

• مثال مسیرهای محافظت شده (Protected Route) Protected route example

• ناوبری برنامه‌نویسی شده (Programmatic Navigation) Programmatic navigation

• کامپوننت Outlet Outlet component

• هوک useNavigate useNavigate hook

• هوک useParams useParams hook

• معرفی مسیرهای محافظت شده Protected routes: Introduction

• BrowserRouter، Routes و Route BrowserRouter, routes, and route

• نصب React Router React Router installation

• مقدمه‌ای بر مسیریابی پویا (Dynamic Routing) Dynamic routing: Introduction

• معرفی SPAها و مزایای آن‌ها Introduction to SPAs and benefits

• مثال مسیریابی پویا Dynamic routing example

• استفاده از NavLink NavLink

• مثال پیاده‌سازی مسیرهای تو در تو Nested routes: Implementation example

• Data loader و کامپوننت محصولات Data loader and products component

• مثال ناوبری برنامه‌نویسی شده Programmatic navigation example

7. مدیریت پیشرفته وضعیت (State Management) 7. Advanced State Management

• مثال کد Zustand Zustand code example

• بررسی کلی پروژه Project overview

• راه‌اندازی هوک سفارشی و کامپوننت Custom hook and component setup

• راه‌اندازی Reducer برای شمارنده Setting up reducer for counter

• بخش سبد خرید (Cart Slice) Cart slice

• چالش‌های اپلیکیشن‌های بزرگ Challenges with large apps

• راه‌اندازی بخش کاربر (User Slice) User slice setup

• مثال TanStack React Query TanStack React Query example

• مقدمه‌ای بر مدیریت وضعیت سرور (Server State) Introduction to server state management

• مشکلات نبود وضعیت سراسری: خلاصه Problems without global state: Summary

• مرور Context API Context API: Recap

• بهترین روش‌ها Best practices

• مشکلاتی که توسط کتابخانه‌های Global State حل می‌شوند Problems solved by global state libraries

• مزایا و جمع‌بندی Benefits and summary

• ملاحظات مربوط به عملکرد (Performance) Performance considerations

• کامپوننت کارت محصول Product card component

• استفاده و دموی Reselect Reselect usage and demo

• مثال کد Recoil Recoil code example

• معرفی RTK (Redux Toolkit) Introduction to RTK

• کامپوننت شمارنده Counter component

• راه‌اندازی Store و API Store setup and API

• معرفی RTK Query RTK Query: Introduction

• مزایای Reselect Benefits of Reselect

• هوک‌های تولید شده و مثال Generated hooks and example

• سناریوی پیشرفته ۲: وضعیت مشتق شده (Derived State) Advanced scenario 2: Derived state

• مثال مبتنی بر دامین (Domain-based) Domain-based example

• همگام‌سازی سمت سرور Server-side sync

• تعریف تایپ‌ها برای Actionها Setting up types for action

• آنالوگ دنیای واقعی: مفاهیم کلیدی Real-world analogy: Key concepts

• مثال کد Jotai Jotai code example

• معرفی Middleware سفارشی Custom middleware: Introduction

• راه‌اندازی Reducer Reducer setup

• مثال SWR (Stale While Revalidate) SWR (Stale-While-Revalidate) example

• مثال Middleware تحلیلی (Analytic) Analytic middleware example

• کامپوننت لیست محصولات Products list component

• معرفی Async Thunk در RTK Introduction to async thunk in RTK

• راه‌اندازی پروژه و نصب‌ها Project setup and installations

• مزایای Storeهای ساختاریافته Benefits of structured stores

• راه‌اندازی پروژه Redux Setting up Redux project

• مقایسه Caching و Refetching Caching and refetching comparison

• راه‌اندازی Redux Store Setting up Redux store

• اتصال Store جدید و دموی DevTools Plug new store and dev tools demo

• کامپوننت کاربران و دمو Users component and demo

• مشکلات useSelector useSelector problems

• راه‌اندازی Actionها برای شمارنده Setting up actions for counter

• جمع‌بندی Summary

• کامپوننت App App component

• تابع Fetch Users Fetch users function

• سناریوی پیشرفته ۱: وابستگی‌های متعدد Advanced scenario 1: Multiple dependents

• مقایسه TanStack و SWR Comparison between TanStack and SWR

• مقدمه‌ای بر Redux Introduction to Redux

• معرفی و مرور: وضعیت محلی (Local State) و وضعیت سراسری (Global State) Introduction and recap: Local state and global state

• راه‌اندازی Store Store setup

• مرور Lifting State Up Lifting state up: Recap

• توضیح کد با Async Thunk و Slice Explanation of code with async thunk and slice

• مقایسه: چه زمانی از کدام استفاده کنیم Comparison: When to use which

• کامپوننت سبد خرید Cart component

• جایگزین‌های Redux Redux alternatives

• مرور useState و useContext و اشتباهات رایج useState and useContext: Recap and pitfalls

8. یکپارچه‌سازی API و ارتباط با سرور 8. API Integration and Server Communication

• نصب Axios و مثال Axios installation and example

• بررسی کلی و مثال Fetch API Overview and fetch API example

• مرور: دریافت داده‌ها با UseQuery در TanStack Query Recap: UseQuery fetching data using TanStack Query

• روش‌های صحیح مدیریت وابستگی‌ها Correct ways of dependency management

• حذف یک پست Deleting a post

• راه‌اندازی Axios Interceptors Setting up Axios interceptors

• بررسی کلی و راه‌اندازی پروژه Project overview and setup

• چرا useEffect مهم است: بررسی کلی Why useEffect matters: Overview

• یکپارچه‌سازی پیشرفته API: مرور RTK و TanStack Advanced API integration: RTK and TanStack recap

• ترکیب همه موارد در قالب یک SPA Combining everything as an SPA

• مزایای کلیدی و جمع‌بندی Key benefits and summary

• درک عمیق Fetch و Axios Deep understanding of fetch and Axios

• بهبود وضعیت لودینگ با کامپوننت Loader Enhancing the loading state with loader component

• لودر اسکلتونی (Skeleton Loader) Skeleton loader

• مقایسه و جمع‌بندی Comparison and summary

• راه‌اندازی Axios Client Setting up Axios client

• بهبود وضعیت خطا با کامپوننت Error Enhancing the error state with error component

• به‌روزرسانی یک پست Updating a post

• الگوهای UI برای لودینگ و خطا Loading and error UI patterns

• اشتباهات رایج که باید از آن‌ها اجتناب کرد: خلاصه Mistakes to avoid: Summary

• مرور: Mutation و به‌روزرسانی‌های خوش‌بینانه (Optimistic Updates) با TanStack Query Recap: Mutation and optimistic updates with TanStack Query

• مرور کلی راه‌اندازی پروژه Project setup overview

• به‌روزرسانی محصول: متد PUT Updating a product: PUT

• درخواست‌های GET GET requests

• حذف محصول: متد DELETE Deleting a product: DELETE

• دریافت تمامی پست‌ها Fetching all posts

• دریافت محصولات: متد GET Fetching products: GET

• افزودن محصول: متد POST Adding a product: POST

• مدیریت Race Conditions Handling race conditions

• اشتباهات رایج: تمرین‌ها و جمع‌بندی Common mistakes: Practices and summary

• جمع‌بندی نهایی Summary

• ایجاد پست جدید Creating a new post

• مقدمه‌ای بر عملیات CRUD CRUD operations: Introduction

• راه‌اندازی API Client API client setup