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

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

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

• سورس کد React 19 React 19 Source Code

• سورس کد Next.js 16 Next.js 16 Source Code

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

• اولین کامپوننت ری‌اکت شما Your first react component

• اکسپورت کردن کامپوننت‌های ری‌اکت Exporting React Components

• ساخت UI با JSX: نوشتن Markup در ری‌اکت 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

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

• مثال خلوص Props Purity props example

مرور JSX - اشتباهات رایج و بهترین متدها JSX Review - Common mistakes - Best practises

• مرور JSX JSX Review

• اشتباهات رایج و بهترین متدها Common mistakes - Best practises

پروژه حرفه‌ای - املاک Cambridge Rentals Professional Project - Cambridge Rentals

• مقدمه Introduction

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

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

• ساخت هدر Build the Header

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

• ساخت فوتر 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

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

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

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

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

• وضعیت (State) در ری‌اکت React State

• بچینگ وضعیت + به‌روزرسانی وضعیت با مقدار در مقابل تابع 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 practises

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

پروژه حرفه‌ای - اپلیکیشن لیست To-do 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 task completion

• حذف تسک‌ها Delete Tasks

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

• ماندگاری تغییرات با استفاده از localStorage Make changes persistent using localStorage

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

• مقدمه Introduction

• ساخت تابع reducer Create the reducer function

مرور ردیوسر - اشتباهات رایج و بهترین متدها React reducer Review - Common mistakes and best practises

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

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

• مقدمه Introduction

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

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

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

• نمای سوال: QuestionHeader QuestionView: QuestionHeader

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

• نمای سوال: AnswerOptions QuestionView: AnswerOptions

• نمای سوال: MediaDisplay QuestionView: MediaDisplay

• نمای سوال: NavigationControls QuestionView: NavigationControls

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

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

• نمای نتیجه (ResultView) ResultView

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

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

• پیاده‌سازی React Context در اپلیکیشن To-do Applying React Context to To do List App

مرور کانتکست - اشتباهات رایج و بهترین متدها React Context Review - Common mistakes and best practises

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

پروژه حرفه‌ای - وب‌سایت پورتفولیو با حالت تاریک/روشن و 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

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

• ساخت لایوت بخش توصیه‌نامه‌ها Building the Layout of RecommendationsSection

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

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

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

• ساخت بخش تماس (Contact) 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 با refها Best practices for DOM manipulation with refs

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

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

پروژه حرفه‌ای - بازی تطبیق کارت‌ها با 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

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

• دکمه ریست Reset Button

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

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

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

• افزودن منطق چرخش به کامپوننت Card 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 Google maps resizing

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

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

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

• مقدمه و بررسی کاربرد Introduction - User Walkthrough

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

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

• هدر Header

• ساخت SearchBar و دریافت شهرهای واقعی از API جی‌وکدینگ 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

پروژه حرفه‌ای - مجموعه داستان‌ها با UI چندزبانه و 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 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

• پیاده‌سازی درگ اند دراپ برای تسک‌ها Implementing Drag and Drop for Tasks

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

• اعمال استایل‌های اسکرول‌بار سفارشی با استفاده از utility class Apply custom scrollbar styles using a utility class

• ذخیره وضعیت کانبان در localStorage Persisting Kanban State to localStorage

هوک‌های سفارشی (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، Virtualization و Suspense Optimising React Performance with Memoization, Virtualisation, Suspense, ...

• مقدمه‌ای بر عملکرد (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

• 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

• مسیرهای تودرتو و لایوت‌ها (با استفاده از <Outlet>) Nested Routes & Layouts (using <Outlet>)

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

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

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

• مسیرهای محافظت‌شده (مثال احراز هویت) 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

• اعتبارسنجی Schema با 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 Bounday + 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 Prop-based behaviour

• تست رندرینگ شرطی Testing conditional rendering

• تست مقادیر اولیه فیلدهای فرم Testing Form field initial values

• تست Snapshot 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

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

• لایوت تودرتو Nested Layout

• Next.js 16: SSR / ISR / SSG Next.js 16: SSR / ISR / SSG

• Client Components و Server Components Client Components & Server Components

• ارسال داده‌ها از سرور به Client Components Passing Data from Server to Client Components

• ترکیب Server و Client Components Interleaving Server and Client Components

• Context Providerها Context providers

• کامپوننت‌های Third-party Third-party components

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

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

• Server Sent Events در 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 Nextjs feature

• افزودن Metadata به Client و Server Components Add Metadata to Client and Server Components

• ساخت یک نمایش‌دهنده دیتابیس Build a database viewer

• ساخت جدول دوره‌ها و مقداردهی اولیه داده‌ها Build a Courses Table and seed it with courses data

• تغییر از API به داده‌های دیتابیس + بهینه‌سازی تصاویر Switching from API to database data + Image Optimisation

• پارامترهای Next.js Nextjs params

• احراز هویت - ایجاد جدول کاربران و مقداردهی اولیه Authentication - users table creation and seeding

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

• ساخت نوار ناوبری آگاه از وضعیت احراز هویت 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

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

• گنجاندن کاربر و دوره هنگام ارسال پیام Include user and course when posting a Message

• پخش پیام جدید برای کاربران متصل Broadcast new Message to connected users

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

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

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

• Middleware در Next.js 16 - محدود کردن صفحه ادمین Nextjs 16 Middleware - Restrict admin page