آموزش مسترکلاس توسعه‌دهنده React: از مبتدی تا حرفه‌ای ۲۰۲۶ [ویدئویی] - آخرین آپدیت

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

مقدمه Introduction

• تریلر دوره React JS React JS Course Trailer

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

• React چیست؟ What Is React?

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

• مزایا – عملکرد، قابلیت استفاده مجدد، جامعه کاربری قوی، SEO (با SSR/SSG) Benefits – Performance, Reusability, Strong Community, SEO (with SSR/SSG)

• موارد استفاده – SPAs، PWAs، اپلیکیشن‌های موبایل (با React Native)، اپلیکیشن‌های دسکتاپ Use Cases – SPAs, PWAs, Mobile Apps (with React Native), Desktop Apps

• Virtual DOM – نحوه عملکرد و مزایای آن The Virtual DOM – How It Works, Its Advantages

• الگوریتم Reconciliation – توضیح دقیق فرآیند Diffing Reconciliation Algorithm – Detailed Explanation of the Diffing Process

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

• راه‌اندازی محیط توسعه مدرن Set Up Modern Development Environment

• VS Code و افزونه‌ها VS Code and Extensions

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

• انتخاب استارتر پروژه Choosing Your Project Starter

• ساختار استاندارد پروژه Vite/Next.js Standard Vite/Next.js Project Structure

• ساختار Feature First / Domain Driven Feature-First/Domain-Driven

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

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

• اجرای اولین پروژه React Running Your First React Project

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

• سینتکس، جاسازی عبارت‌ها، ویژگی‌ها و Children Syntax, Embedding Expressions, Attributes, Children

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

• بهترین روش‌ها برای نوشتن JSX تمیز Best Practices for Writing Clean JSX

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

• کامپوننت‌های تابعی (Functional Components) Functional Components

• کامپوننت‌های کلاسی (Class Components) Class Components

• مقایسه کامپوننت تابعی در مقابل کلاسی Functional vs Class Component

• درک مفهوم Props Understanding Props

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

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

• بهترین روش‌ها برای ساخت User Card User Card Best Practices

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

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

• راهکار دوم – Context API Solution – Context API

• جمع‌بندی – بهترین روش‌ها Summary – Best Practices

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

• مدیریت رویدادهای کاربر Handling User Events

• بهترین روش‌ها برای ساخت شمارنده (Counter) Counter Best Practices

• رندرینگ شرطی – عملگرهای سه تایی Conditional Rendering – Ternaries

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

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

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

• استایل‌های Inline – موارد استفاده و محدودیت‌ها Inline Styles – Use Cases and Limitations

• شیت‌های CSS – CSS سراسری و Import کردن CSS CSS Stylesheets – Global CSS and Importing CSS

• CSS Modules – محدوده محلی و مزایا برای پروژه‌های بزرگ CSS Modules – Local Scope and Benefits for Larger Projects

• Styled Components – بخش اول Styled Components – Part 1

• Styled Components – بخش دوم Styled Components – Part 2

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

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

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

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

• معرفی Tailwind CSS Introducing Tailwind

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

• مفاهیم اصلی و تم‌دهی با tailwind.config.js Core Concepts and Theming with tailwind.config.js

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

• بهترین روش‌های Mobile-First Mobile-First Best Practices

• توضیحات User Card ریسپانسیو Responsive User Card Explanation

• تمرین عملی User Card ریسپانسیو Responsive User Card Practical

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

• مقدمه‌ای بر جهنم Wrapperهای هوک (Hooks Wrapper Hell) Introduction to Hooks Wrapper Hell

• منطق پیچیده چرخه عمر (Lifecycle) Complex Lifecycle Logic

• سردرگمی با کلمه کلیدی "this" "This" Keyword Confusion

• هوک useState useState Hook

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

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

• مدیریت آرایه‌ها – جمع‌بندی Managing Arrays – Summary

• هوک useEffect – مقدمه useEffect Hook – Introduction

• مشکلات useEffect useEffect Problem

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

• آرایه‌های وابستگی (Dependency Arrays) در useEffect useEffect Dependency Arrays

• تابع Cleanup در useEffect و جمع‌بندی useEffect Cleanup Function and Summary

• مقدمه‌ای بر useContext useContext Introduction

• کانتکست تم – پیاده‌سازی Provider Theme Context – Implementing the Provider

• تغییردهنده تم و کامپوننت Header Theme Switcher and Header Component

• موارد استفاده – جمع‌بندی Use Cases – Summary

• مقدمه‌ای بر useRef – المان‌های DOM useRef Introduction – DOM Elements

• مثال تایمر با useRef – مقادیر تغییرپذیر (Mutable) useRef Timer Example – Mutable Values

• موارد رایج useRef و مقایسه با useState useRef Common Cases and Comparison with useState

• مقدمه و سینتکس useReducer useReducer Introduction and Syntax

• مقایسه useReducer و useState – مثال ساده useReducer vs useState – Basic Example

• مثال مدیریت وضعیت (Status Manager) با useReducer useReducer Status Manager Example

• مقایسه useReducer و Redux – جمع‌بندی useReducer vs Redux – Summary

• مقدمه‌ای بر useMemo useMemo Introduction

• مثال واقعی از useMemo useMemo Real-World Example

• بایدها و نبایدهای useMemo – جمع‌بندی useMemo Dos and Don'ts – Summary

• مقدمه‌ای بر useCallback useCallback Introduction

• مثال و درک مفهوم useCallback useCallback Example and Understanding

• جمع‌بندی و تله‌های useCallback useCallback Summary and Pitfalls

• مقدمه‌ای بر useImperativeHandle useImperativeHandle Introduction

• مثال و کاربردهای useImperative useImperative Example and Uses

• مورد استفاده رایج useImperative و جمع‌بندی useImperative Common Use Case and Summary

• مقدمه‌ای بر هوک‌های سفارشی (Custom Hooks) Custom Hook Introduction

• مثال و نحوه استفاده از Custom Hook Custom Hook Example and Usage

• اصول طراحی هوک‌های سفارشی Custom Hook Design Principles

• اشتباهات رایج و جمع‌بندی Custom Hooks Custom Hook Pitfalls and Summary

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

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

• مثال ورودی متنی (Text Input) Text Input Example

• مثال Text Area و Select Text Area and Select Example

• مثال Checkbox Checkbox Example

• جمع‌بندی Radio Button Radio Button Summary

• کنترل شده در مقابل کنترل نشده – بررسی عمیق Controlled vs Uncontrolled – In Depth

• مزایا و معایب هر روش Pros and Cons of Each Approach

• چه زمانی کدام روش را انتخاب کنیم؟ When to Choose Which

• کتابخانه React Hook Form React Hook Form

• مثال useForm useForm Example

• استفاده از watch در useForm Watch useForm

• جمع‌بندی – useForm Summary – useForm

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

• دموی کتابخانه Yup Yup Library Demo

• دموی استفاده از Zod Zod Demo Usage

• پروژه فرم ثبت‌نام – مقدمه Signup Form Project – Introduction

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

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

• تکمیل فرم ثبت‌نام Completing Signup Form

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

• مقدمه‌ای بر SPAها و مزایای آن‌ها Introduction to SPAs and Benefits

• نصب React Router React Router Installation

• بررسی BrowserRouter، Routes و Route BrowserRouter, Routes, and Route

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

• کامپوننت NavLink NavLink

• مسیرهای تو در تو (Nested Routes) – مقدمه Nested Routes – Introduction

• مسیرهای تو در تو – مثال پیاده‌سازی Nested Routes – Implementation Example

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

• پشتیبانی از مسیریابی در React 19 React 19 Routing Support

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

• هوک useParams useParams Hook

• مثال مسیریابی پویا Dynamic Routing Example

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

• هوک useNavigate useNavigate Hook

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

• مقدمه‌ای بر Data Loader Data Loader – Introduction

• استفاده از Data Loader در کامپوننت محصولات Data Loader and Products Component

• چیدمان ریشه (Root Layout) با Data Loader – مثال کاربردی Data Loader Root Layout – Working Example

• مسیرهای محافظت شده (Protected Routes) – مقدمه Protected Routes – Introduction

• مثال مسیر محافظت شده Protected Route Example

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

• مقدمه و مرور – وضعیت محلی در مقابل وضعیت سراسری Introduction and Recap – Local State and Global State

• مرور useState و useContext و نقاط ضعف آن‌ها useState and useContext – Recap and Pitfalls

• مشکلاتی که توسط کتابخانه‌های Global State حل می‌شوند Problems Solved by Global State Libraries

• مشکلات نبود وضعیت سراسری – جمع‌بندی Problems Without Global State – Summary

• مرور مفهوم Lifting State Up Lifting State Up – Recap

• سناریوی پیشرفته ۱ – وابستگی‌های متعدد Advanced Scenario 1 – Multiple Dependents

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

• جمع‌بندی Summary

• مرور Context API Context API – Recap

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

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

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

• راه‌اندازی پروژه Redux Setting Up Redux Project

• تعریف تایپ‌ها برای Action Setting Up Types for Action

• ساخت Actionها برای شمارنده Setting Up Actions for Counter

• ساخت Reducer برای شمارنده Setting Up Reducer for Counter

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

• کامپوننت شمارنده (Counter) Counter Component

• مقدمه‌ای بر RTK (Redux Toolkit) Introduction to RTK

• مثال‌های دنیای واقعی – مفاهیم کلیدی Real-World Analogy – Key Concepts

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

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

• راه‌اندازی هوک سفارشی و کامپوننت Custom Hook and Component Setup

• اتصال Store جدید و دموی Dev Tools Plug New Store and Dev Tools Demo

• مقدمه‌ای بر Async Thunk در RTK Introduction to Async Thunk in RTK

• توضیح کد با Async Thunk و Slice Explanation of Code with Async Thunk and Slice

• تابع Fetch Users Fetch Users Function

• راه‌اندازی User Slice User Slice Setup

• کامپوننت کاربران و دمو Users Component and Demo

• مقدمه‌ای بر RTK Query RTK Query – Introduction

• استفاده و دموی Reselect Reselect Usage and Demo

• مقایسه Caching و Refetching Caching and Refetching Comparison

• مشکلات useSelector useSelector Problems

• هوک‌های تولید شده و مثال Generated Hooks and Example

• مزایای Reselect Benefits of Reselect

• مقدمه‌ای بر Custom Middleware Custom Middleware – Introduction

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

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

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

• مثال مبتنی بر Domain Domain-Based Example

• مزایای Storeهای ساختاریافته Benefits of Structured Stores

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

• مثال کد Zustand Zustand Code Example

• مثال کد Jotai Jotai Code Example

• مثال کد Recoil Recoil Code Example

• مقایسه – چه زمانی از کدام استفاده کنیم؟ Comparison – When to Use Which

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

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

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

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

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

• راه‌اندازی پروژه و نصبات Project Setup and Installations

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

• کامپوننت لیست محصولات Products List Component

• کامپوننت کارت محصول Product Card Component

• اسلایس سبد خرید (Cart Slice) Cart Slice

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

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

• همگام‌سازی سمت سرور Server-Side Sync

اتصال به API و ارتباط با سرور API Integration and Server Communication

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

• نصب Axios و مثال Axios Installation and Example

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

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

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

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

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

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

• بهبود وضعیت لودینگ با کامپوننت Loader Enhancing the Loading State with Loader Component

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

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

• جمع‌بندی Summary

• چرا useEffect مهم است – بررسی کلی Why useEffect Matters – Overview

• روش‌های صحیح مدیریت وابستگی‌ها Correct Ways of Dependency Management

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

• اشتباهاتی که باید از آن‌ها دوری کرد – جمع‌بندی Mistakes to Avoid – Summary

• عملیات CRUD – مقدمه CRUD Operations – Introduction

• بررسی کلی راه‌اندازی پروژه Project Setup Overview

• دریافت محصولات – GET Fetching Products – GET

• افزودن محصول – POST Adding a Product – POST

• به‌روزرسانی محصول – PUT Updating a Product – PUT

• حذف محصول – DELETE Deleting a Product – DELETE

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

• اشتباهات رایج – تمرینات و جمع‌بندی Common Mistakes – Practices and Summary

• اتصال پیشرفته API – مرور RTK و TanStack Advanced API Integration – RTK and TanStack Recap

• مرور – دریافت داده‌ها با useQuery در TanStack Query Recap – useQuery Fetching Data Using TanStack Query

• مرور – Mutation و به‌روزرسانی‌های Optimistic با TanStack Query Recap – Mutation and Optimistic Updates with TanStack Query

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

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

• راه‌اندازی API Client API Client Setup

• دریافت تمامی پست‌ها Fetching All Posts

• ایجاد پست جدید Creating a New Post

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

• حذف پست Deleting a Post