آموزش دوره جامع توسعه‌دهنده React 19 (شامل Next.js 16) [ویدئویی] - آخرین آپدیت

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

راه اندازی React 19 و JSX React 19 Setup & JSX

• معرفی دوره Course Introduction

• نحوه راه اندازی React 19 با Vite How to Setup React 19 with Vite

• اولین کامپوننت ریکت شما Your First React Component

• خروجی گرفتن (Export) از کامپوننت های ریکت Exporting React Components

• ساخت رابط کاربری با JSX: نوشتن مارک آپ در ریکت Building UIs with JSX: Writing Markup in React

• یکپارچه سازی جاوااسکریپت در JSX با استفاده از آکولاد Integrating JavaScript in JSX with Curly Braces

• استایل دهی به کامپوننت های ریکت Styling React Components

• کار با پراپ ها (Props) در کامپوننت های ریکت Working with Props in React Components

• رندرینگ شرطی - بخش اول Conditional Rendering 1

• رندرینگ شرطی - بخش دوم Conditional Rendering 2

• رندر کردن لیست ها Rendering Lists

• خالص نگه داشتن کامپوننت ها (Pure Components) Keeping Components Pure

• مثال پراپ های خالص Purity Props Example

مرور JSX، اشتباهات رایج و بهترین روش‌ها JSX Review - Common mistakes - Best practices

• مرور JSX JSX Review

• اشتباهات رایج و بهترین روش ها Common Mistakes - Best Practices

پروژه حرفه ای: اجاره خانه کمبریج Professional Project - Cambridge Rentals

• معرفی پروژه Introduction

• درخت کامپوننت ها Component Tree

• ساخت ساختار فایل ها Building the File Structure

• ساخت هدر (Header) Build the Header

• ساخت عنوان Build the Title

• ساخت فوتر (Footer) Build the Footer

• ساخت لیست املاک Build the List of Properties

• ساخت کامپوننت PropertyTypeLabel Build the PropertyTypeLabel Component

• ساخت کامپوننت PropertyBanner Build the PropertyBanner Component

• ساخت کامپوننت IconWithText Build the IconWithText Component

• ساخت کامپوننت PropertyAttribute Build the PropertyAttribute Component

افزودن تعاملات Adding Interactivity

• پاسخ به رویدادها (Events) Responding to Events

• انتقال هندلرهای رویداد از والد به فرزند Passing Event Handlers from a Parent to a Child

• درک انتشار رویداد (Event Propagation) Understanding Event Propagation

• جلوگیری از رفتار پیش فرض (Prevent Default) Preventing Default Behaviour

• استیت در ریکت (React State) React State

• دسته‌بندی استیت (Batching) و آپدیت استیت با مقدار در مقابل تابع State Batching + Updating State Using a Value vs Function

• آپدیت کردن آبجکت ها در استیت Updating Objects in State

• آپدیت کردن آرایه ها در استیت Updating Arrays in State

• ساخت یک سبد خرید Create a Shopping Cart

• چرخه: Trigger -> Render -> VirtualDOM -> Commit Trigger => Render => VirtualDOM => Commit

مرور تعاملات، اشتباهات رایج و بهترین روش‌ها Adding Interactivity Review - Common mistakes - Best practices

• مرور افزودن تعاملات Adding Interactivity - Review

پروژه حرفه ای: اپلیکیشن لیست انجام کارها (To Do List) Professional Project: To Do List App

• معرفی پروژه Introduction

• درخت کامپوننت ها Component Tree

• ساخت ساختار فایل ها Building the File Structure

• رندر کردن تسک ها Rendering Tasks

• ساخت کامپوننت TaskControls Building the TaskControls Component

• ساخت کامپوننت TaskForm Building the TaskForm Component

• تغییر وضعیت تکمیل تسک (Toggle) Toggle Task Completion

• حذف تسک ها Delete Tasks

• ویرایش تسک ها Edit Tasks

• ماندگار کردن تغییرات با استفاده از localStorage Make Changes Persistent Using localStorage

ریکت ردیوسر (React Reducer) React Reducer

• معرفی Introduction

• ساخت تابع ردیوسر (Reducer) Create the Reducer Function

مرور React Reducer، اشتباهات رایج و بهترین روش‌ها React Reducer Review - Common mistakes and best practices

• مرور React Reducer، اشتباهات رایج و بهترین روش ها React Reducer Review - Common mistakes and best practices

پروژه حرفه ای: آزمون رانندگی انگلیس با React Reducer Professional Project: UK Driving Test - React Reducer

• معرفی پروژه Introduction

• درخت کامپوننت ها Component Tree

• ساخت ساختار فایل ها Building the File Structure

• مدیریت استیت کوییز با useReducer Managing Quiz State with useReducer

• نمای سوال: هدر سوال QuestionView: QuestionHeader

• نمای سوال: متن سوال QuestionView: QuestionText

• نمای سوال: گزینه‌های پاسخ QuestionView: AnswerOptions

• نمای سوال: نمایش رسانه QuestionView: MediaDisplay

• نمای سوال: کنترل های ناوبری QuestionView: NavigationControls

• نوار پیشرفت (ProgressBar) ProgressBar

• بنر اپلیکیشن AppBanner

• نمای نتیجه ResultView

ریکت کانتکست (React Context) React Context

• آشنایی با React Context Introduction to React Context

• به‌کارگیری React Context در اپلیکیشن لیست انجام کارها Applying React Context to To-Do List App

مرور React Context، اشتباهات رایج و بهترین روش‌ها React Context Review - Common mistakes and best practices

• مرور React Context، اشتباهات رایج و بهترین روش ها React Context Review - Common mistakes and best practices

پروژه حرفه ای: وب سایت پورتفولیو، حالت تیره/روشن و React Context Professional Project: Portfolio Website - Dark/Light Mode, React Context

• معرفی پروژه Introduction

• درخت کامپوننت ها Component Tree

• ساخت ساختار فایل ها Building the File Structure

• تنظیم چیدمان نوار ناوبری (Navbar) Setting Up the Navbar Layout

• لینک های ناوبری دسکتاپ Desktop Navigation Links

• افزودن دکمه تغییر حالت تیره/روشن Adding Light/Dark Mode Toggle

• منوی موبایل با آیکون همبرگری Mobile Menu with Hamburger Icon

• ساخت نقاط پیمایش (ScrollDots) برای ناوبری Building ScrollDots for Navigation

• ساخت بخش Hero Building the Hero Section

• چیدمان بخش پروژه‌ها Projects Section Layout

• ساخت کامپوننت ProjectCard Create the ProjectCard Component

• فیلتر کردن پروژه‌ها بر اساس نوع Filtering Projects by Type

• ساخت چیدمان بخش مهارت‌ها و تجربیات Building the Skills & Experience Section Layout

• شبکه مهارت‌ها (Skills Grid) Skills Grid

• تایم‌لاین تجربیات Experience Timeline

• ساخت چیدمان بخش توصیه‌ها Building the Layout of Recommendations Section

• کارت توصیه‌نامه (TestimonialCard) TestimonialCard

• ناوبری فلشی (ArrowNavigation) ArrowNavigation

• ردیف لوگوی شرکت‌ها با کامپوننت CompanyLogo Company Logos Row with CompanyLogo Component

• ساخت بخش تماس با ما Building the Contact Section

• ساخت فوتر Building the Footer

• ماندگار کردن حالت تیره/روشن Dark/Light Mode Persisting

مقادیر مرجع با Refs Reference values with Refs

• معرفی Introduction

• ساخت یک تایمر با استفاده از Ref Creating a Timer Using Ref

• دسترسی به گره DOM با Ref Accessing a DOM Node with Ref

• دسترسی به گره‌های DOM کامپوننت‌های دیگر Accessing Another Component's DOM Nodes

• بهترین روش‌ها برای دستکاری DOM با Refs Best Practices for DOM Manipulation with Refs

مرور Refs، اشتباهات رایج و بهترین روش‌ها Reference values with Refs Review - Common mistakes and best practices

• مرور مقادیر مرجع با Refs، اشتباهات رایج و بهترین روش ها Reference values with Refs Review - Common mistakes and best practices

پروژه حرفه ای: بازی ورق گردان با useRef Professional Project: Card Flip Game - useRef

• معرفی و بررسی تجربه کاربر Introduction - User Walkthrough

• درخت کامپوننت ها Component Tree

• ساخت ساختار فایل ها Building the File Structure

• تنظیم استیت بازی در App و تولید/بر هم زدن آیکون‌ها با الگوریتم Fisher Yates Set Up the Game State in App - Generate and Shuffle Icons Using the Fisher-Yates Algorithm

• ساخت کامپوننت تنظیمات و تعریف reInitialiseGame Build the Settings Component and Define reInitialiseGame in the Process

• دکمه بازنشانی (Reset) Reset Button

• تابلو امتیازات (ScoreBoard) ScoreBoard

• نمایش شرطی پیام پیروزی هنگام برنده شدن در بازی Conditionally Show Graffiti When the Game Is Won

• ساخت کامپوننت GameBoard Building the GameBoard Component

• افزودن منطق چرخش (Flipping) به کامپوننت کارت Add Flipping Logic to the Card Component

• انتقال منطق چرخش به GameBoard با استفاده از Refs Move Flipping Logic to GameBoard Using Refs

• پخش صدای پیروزی هنگام تطبیق تمام جفت کارت‌ها Play a Victory Sound When the Player Matches All Card Pairs

• پخش صدای چرخش هنگام ورق زدن کارت Play Flipping Sound on Card Flip

• بازنشانی GameBoard Reset the GameBoard

افکت های ریکت (React Effects) React Effects

• آشنایی با useEffect Introduction to useEffect

• وابستگی‌های (Dependencies) useEffect useEffect Dependencies

• توابع پاک‌سازی (Cleanup) در useEffect useEffect Cleanup Functions

• گوش دادن به کلیدهای کیبورد Listening for a Keyboard Key

• تغییر اندازه گوگل مپ (Google Maps Resizing) Google Maps Resizing

مرور Effects، اشتباهات رایج و بهترین روش‌ها React Effects Review - Common mistakes and best practices

• مرور افکت‌های ریکت، اشتباهات رایج و بهترین روش ها React Effects Review - Common mistakes and best practices

پروژه حرفه ای: اپلیکیشن هواشناسی با useEffect Professional Project: Weather App - useEffect

• معرفی و بررسی تجربه کاربر Introduction - User Walkthrough

• درخت کامپوننت ها Component Tree

• ساختار پروژه - ایجاد فایل‌ها و پوشه‌ها Project Structure – Creating Files and Folders

• هدر (Header) Header

• ساخت SearchBar و دریافت شهرهای واقعی از API Geocoding Open Meteo Build SearchBar and Retrieve Real Cities from the Open-Meteo Geocoding API

• ساخت useEffect برای دریافت داده‌های هواشناسی هنگام انتخاب شهر Build a useEffect to Fetch Weather Data When a City Is Selected

• ساخت useEffect برای تبدیل داده‌های API هنگام تغییر داده‌ها Build a useEffect that Transforms the API Data When Data Changes

• ساخت کامپوننت CurrentWeather Build the CurrentWeather Component

• ساخت کامپوننت HumidityCard Build the HumidityCard Component

• ساخت کامپوننت WindSpeedCard Build the WindSpeedCard Component

• ساخت کامپوننت HourlyForecast Build the HourlyForecast Component

• ساخت کامپوننت Forecast Build the Forecast Component

پروژه حرفه ای: مجموعه داستان، رابط کاربری چندزبانه و React Context Professional Project: Story Collection - Multi-language UI, React Context, React

• معرفی و بررسی تجربه کاربر Introduction - User Walkthrough

• درخت کامپوننت ها Component Tree

• ساختار پروژه - ایجاد فایل‌ها و پوشه‌ها Project Structure – Creating Files and Folders

• ساخت Language Context و قرار دادن App در Provider Building the Language Context and Wrapping App in the Provider

• مسیریابی و چیدمان با App.jsx Routing & Layout with App.jsx

• ساخت هدر Building the Header

• ساخت کامپوننت LanguageToggle Building the LanguageToggle Component

• ساخت کامپوننت فوتر Building the Footer Component

• پیکربندی Supabase و تنظیمات محیطی (Environment) Supabase Configuration & Environment Setup

• صفحه StoryList - دریافت و نمایش داده‌ها StoryList Page – Fetching & Displaying Data

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

• صفحه جزئیات داستان (StoryDetail) StoryDetail Page

• صفحه StoryDetail: ساخت بخش محتوای داستان StoryDetail Page: Building the Story Content Section

• ساخت صفحه NotFound Building the NotFound Page

• ساخت یک اسکرول‌بار سفارشی زیبا Build a Beautiful Custom Scrollbar

پروژه حرفه ای: تخته کانبان با قابلیت کشیدن و رها کردن (مانند Trello) با useEffect Professional Project: Kanban Board with Drag & Drop like Trello - useEffect

• معرفی و بررسی تجربه کاربر Introduction - User Walkthrough

• درخت کامپوننت ها Component Tree

• ساختار پروژه - ایجاد فایل‌ها و پوشه‌ها Project Structure – Creating Files and Folders

• افزودن حالت تیره با Theme Toggle و useEffect Adding Dark Mode with Theme Toggle and useEffect

• ساخت تخته کانبان: مدیریت استیت ستون‌ها و رندر کردن تسک‌ها Building the Kanban Board: Managing Column State and Rendering Tasks

• افزودن و حذف ستون‌ها Adding & Deleting Columns

• افزودن تسک‌ها Adding Tasks

• ویرایش عناوین ستون‌ها Editing Column Titles

• ویرایش درون‌خطی (Inline) تسک‌ها Editing Tasks Inline

• استفاده از useRef برای فوکوس و اسکرول به انتهای Textarea هنگام ویرایش Use useRef to Focus and Scroll to the End of the Textarea When Editing Starts

• پیاده‌سازی حذف تسک در تخته کانبان Implementing Task Deletion in the Kanban Board

• پیاده‌سازی قابلیت کشیدن و رها کردن (Drag and Drop) برای تسک‌ها Implementing Drag and Drop for Tasks

• مدیریت جابجایی تسک در پایان کشیدن (Drag End) Handling Task Movement on Drag End

• اعمال استایل‌های اسکرول‌بار سفارشی با کلاس Utility Apply Custom Scrollbar Styles Using a Utility Class

• ماندگار کردن استیت کانبان در localStorage Persisting Kanban State to localStorage

هوک های سفارشی (Custom Hooks) Custom Hooks

• آشنایی با هوک‌های سفارشی (Custom Hooks) Introduction to Custom Hooks

• ساخت یک هوک سفارشی برای فرم‌ها Building a Custom Hook for Forms

الگوهای پیشرفته ریکت Advanced React Patterns

• الگوی Render Props Render Props Pattern

• کامپوننت‌های Controlled در مقابل Uncontrolled Controlled vs Uncontrolled Components

• الگوی Compound Components Compound Components Pattern

• کامپوننت‌های مرتبه بالاتر (HOCs) Higher Order Components (HOCs)

• الگوی Function as Children Function as Children Pattern

• مفاهیم Prop Getters و Prop Collections Prop Getters & Prop Collections

• الگوی State Reducer State Reducer Pattern

• الگوی Controlled Props Controlled Props Pattern

بهینه سازی عملکرد ریکت با Memoization، مجازی سازی، Suspense و غیره Optimising React Performance with Memoization, Virtualization, Suspense, etc.

• آشنایی با عملکرد (Performance) در ریکت Introduction to Performance in React

• React.memo - مموئیز کردن کامپوننت‌ها React.memo — Memoizing Components

• مثال دیگری از React.memo Another Example Using React.memo

• useCallback - مموئیز کردن توابع useCallback — Memoizing Functions

• useMemo - مموئیز کردن محاسبات سنگین useMemo — Memoizing Expensive Calculations

• مجازی‌سازی در ریکت (React Virtualization) React Virtualization

• بارگذاری تنبل کامپوننت‌ها (React.lazy + Suspense) Lazy Loading Components (React.lazy + Suspense)

• پروفایلینگ اپلیکیشن‌های ریکت با React DevTools Profiler Profiling React Apps with React DevTools Profiler

مسیریابی و ناوبری در ریکت (با React Router 7 و سینتکس جدید React 19) Routing & Navigation in React (with React Router 7 / latest React 19 syntax)

• آشنایی با مسیریابی (Routing) در ریکت Introduction to Routing in React

• مسیرهای تودرتو و چیدمان‌ها (Nested Routes & Layouts) Nested Routes & Layouts (using )

• پارامترهای URL و useParams URL Parameters & useParams

• پارامترهای جستجو (Search Params) و Query Strings Search Params & Query Strings

• ناوبری برنامه‌نویسی شده با useNavigate Programmatic Navigation with useNavigate

• مسیرهای محافظت شده (مثال Auth) Protected Routes (Auth Example)

• تقسیم کد (Code Splitting) و بارگذاری تنبل مسیرها Code Splitting & Lazy Loading Routes

فرم ها، اعتبارسنجی و مباحث پیشرفته Forms - Validation & Advanced

• مرور ورودی‌های Controlled در مقابل Uncontrolled Review of Controlled vs. Uncontrolled Inputs

• مدیریت فرم‌ها در ریکت (پایه) Handling Forms in React (Basic)

• مدیریت پیشرفته فرم‌ها با react hook form Advanced Form Handling with react-hook-form

• اعتبارسنجی اسکیما با Yup Schema Validation with Yup

• کامپوننت‌های ورودی سفارشی Custom Input Components

دریافت داده ها و مدیریت استیت (React TanStack / Zustand, Redux Toolkit) Data Fetching & State Management (React TanStack / Zustand, Redux Toolkit)

• مرور مبانی دریافت داده‌ها (fetch + useEffect) Review of Data Fetching Basics (fetch + useEffect)

• React Query (TanStack Query) - استفاده از useQuery برای فراخوانی API React Query (TanStack Query) - Using useQuery for API Calls

• کش کردن کوئری‌ها و Refetching Query Caching & Refetching

• استیت گلوبال با Zustand Global State with Zustand

• Redux Toolkit Redux Toolkit

• مرز خطا یا Error Boundary (مدیریت خطاهای همزمان) Error Boundary (Synchronous Error Handling)

• Error Boundary + Suspense (مدیریت خطاهای ناهمزمان) Error Boundary + Suspense (Asynchronous Error Handling)

• مدیریت مدرن خطاها با react error boundary Modern Error Handling with react-error-boundary

تست نویسی در React 19 React 19 Testing

• آشنایی با تست ریکت - رندرینگ پایه Introduction to React Testing - Basic Rendering

• کوئری گرفتن از المان‌ها Querying Elements

• رفتارهای مبتنی بر پراپ Prop-based Behaviour

• تست رندرینگ شرطی Testing Conditional Rendering

• تست مقادیر اولیه فیلدهای فرم Testing Form Field Initial Values

• تست اسنپ‌شات (Snapshot Testing) Snapshot Testing

• رویدادهای کاربر - تست تایپ ورودی با userEvent.type User Events - Testing Input Typing with userEvent.type

• رویدادهای کاربر - تست کلیک دکمه با userEvent.click User Events - Testing Button Clicks with userEvent.click

• رویدادهای کاربر - رندرینگ شرطی با userEvent User Events - Conditional Rendering with userEvent

• استفاده از fireEvent Using fireEvent

• تست تعاملات Toggle (باز و بسته شدن) Testing Toggle Interactions (Expand/Collapse)

• تست دریافت داده‌های ناهمزمان Testing Asynchronous Data Fetching

• تست حالت‌های خطا در کامپوننت‌های ناهمزمان ریکت Testing Error States in Asynchronous React Components

مفاهیم و مقایسه رندرینگ سمت کلاینت/سرور، SSG و ISR Client/Server Side Rendering - SSG - ISR Concepts and Comparisons

• مفاهیم و مقایسه رندرینگ سمت کلاینت/سرور، SSG و ISR Client/Server Side Rendering - SSG - ISR Concepts and Comparisons

دوره جامع Next.js 16 Next.js 16 - A Comprehensive Course

• آشنایی با Next.js و راه اندازی پروژه Introduction to Next.js & Project Setup

• مسیریابی بر اساس فایل و ناوبری File-based Routing & Navigation

• مقایسه Layouts با کامپوننت قدیمی Custom App Layouts vs Old Custom App Component

• چیدمان تودرتو (Nested Layout) Nested Layout

• Next.js 16: مباحث SSR / ISR / SSG Next.js 16: SSR / ISR / SSG

• کامپوننت‌های کلاینت و کامپوننت‌های سرور Client Components & Server Components

• انتقال داده‌ها از سرور به کامپوننت‌های کلاینت Passing Data from Server to Client Components

• ترکیب کامپوننت‌های سرور و کلاینت Interleaving Server and Client Components

• Context Providers Context Providers

• کامپوننت‌های شخص ثالث (Third party) Third-party Components

• مسیرهای API در Next.js 16 و ویژگی‌های فول‌استک Next.js 16 API Routes & Fullstack Features

• استفاده از پایگاه داده در Next.js (ماندگاری داده‌های فول‌استک) Using a Database in Next.js (Fullstack Data Persistence)

• رویدادهای ارسالی سرور در Next.js (SSE) Server-Sent Events in Next.js (SSE)

• روابط پایگاه داده (کاربران + پیام‌ها) Database Relationships (Users + Messages)

• ساخت یک فرم تماس کاربردی Building a Functional Contact Form

• Server Actions - یک ویژگی قدرتمند Next.js Server Actions - A Powerful Next.js Feature

• افزودن متادیتا به کامپوننت‌های کلاینت و سرور Add Metadata to Client and Server Components

• ساخت یک نمایشگر پایگاه داده (Database Viewer) Build a Database Viewer

• ساخت جدول دوره‌ها و مقداردهی اولیه با داده‌های دوره‌ها Build a Courses Table and Seed it with Courses Data

• تغییر از API به داده‌های پایگاه داده + بهینه‌سازی تصاویر Switching from API to Database Data + Image Optimization

• پارامترهای Next.js Next.js Params

• احراز هویت - ایجاد و مقداردهی جدول کاربران Authentication - Users Table Creation and Seeding

• احراز هویت - پیکربندی با JWT Authentication - Configuration with JWT

• احراز هویت - ساخت نوار ناوبری آگاه از وضعیت احراز هویت Authentication - Building an Auth-Aware Navigation Bar

• احراز هویت - ورود (Login) Authentication - Login

• احراز هویت - ثبت نام (Signup) Authentication - Signup

• احراز هویت - تایید ایمیل Authentication - Email Verification

• احراز هویت - محدود کردن صفحات Authentication - Restrict Pages

• احراز هویت - بازنشانی رمز عبور Authentication - Password Reset

• احراز هویت - ورود با گوگل Authentication - Google Login

• احراز هویت - ورود با گیت‌هاب Authentication - Github Login

• افزودن کلیدهای خارجی برای دوره‌ها در پیام‌ها Adding Foreign Keys for Course in Messages

• افزودن اعتبارسنجی Zod به فرم پیام Add Zod Validation to Message Form

• محدود کردن اتاق‌های چت به یک دوره واحد Restrict Chat Rooms to a Single Course

• استفاده از ErrorBoundary و Suspense برای رندرینگ امن کامپوننت‌ها Using ErrorBoundary and Suspense for Safe Component Rendering

• دریافت پیام‌ها با استفاده از Server Action Pull Messages Using a Server Action

• پیاده‌سازی صفحه‌بندی (Pagination) برای تاریخچه پیام‌ها Implementing Pagination for Message History

• گنجاندن کاربر و دوره هنگام ارسال پیام Include User and Course When Posting a Message

• پخش (Broadcast) پیام جدید برای کاربران متصل Broadcast New Message to Connected Users

• حذف خوش‌بینانه (Optimistic Delete) پیام و اطلاع‌رسانی آنی به همه کاربران Optimistically Delete a Message and Notify All Users in Real Time

• ویرایش خوش‌بینانه پیام و اطلاع‌رسانی آنی به همه کاربران Optimistically Edit a Message and Notify All Users in Real Time

• میدل‌ور Next.js 16 - محدود کردن مسیرهای محافظت شده Next.js 16 Middleware - Restrict Protected Route

• میدل‌ور Next.js 16 - محدود کردن صفحه ادمین Next.js 16 Middleware - Restrict Admin Page