آموزش تسلط بر React 19 و Next.js 16 با پروژه‌های عملی و کاربردهای واقعی - آخرین آپدیت

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

نصب React 19 و JSX React 19 Setup and JSX

• نحوه نصب React 19 با Vite How to setup React 19 with Vite

• رندرینگ شرطی ۱ Conditional rendering 1

• رندرینگ شرطی ۲ Conditional rendering 2

• کار با props در کامپوننت‌های ری‌اکت Working with props in React components

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

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

• مثال Purity props Purity props example

• یکپارچه‌سازی جاوااسکریپت در JSX با براکت‌ها Integrating JavaScript in JSX with curly braces

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

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

• ساده و خالص نگه داشتن کامپوننت‌ها Keeping components pure

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

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

1. مرور JSX: اشتباهات رایج و بهترین روش‌ها 1. JSX Review: Common Mistakes and Best Practices

• اشتباهات رایج: بهترین روش‌ها Common mistakes: Best practices

• مرور JSX JSX review

2. پروژه حرفه‌ای: اجاره‌های کمبریج (Cambridge Rentals) 2. Professional Project: Cambridge Rentals

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

• ساخت عنوان (title) Build the title

• مقدمه Introduction

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

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

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

• ساخت لیست املاک Build the list of properties

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

• ساخت ساختار فایل‌ها Building the file structure

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

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

3. افزودن تعاملات (Interactivity) 3. Adding Interactivity

• به‌روزرسانی آبجکت‌ها در state Updating objects in state

• مراحل Trigger, render, VirtualDOM, commit Trigger, render, VirtualDOM, commit

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

• به‌روزرسانی آرایه‌ها در state Updating arrays in state

• دسته‌بندی وضعیت (State batching) + به‌روزرسانی با مقدار در مقابل تابع State batching + updating state using a value vs function

• جلوگیری از رفتار پیش‌فرض (Prevent default) Preventing default behaviour

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

• ساخت یک سبد خرید Create a shopping cart

• انتقال هندلرهای رویداد از والد به فرزند Passing event handlers from a parent to a child

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

4. مرور افزودن تعاملات: اشتباهات رایج و بهترین روش‌ها 4. Adding Interactivity Review: Common Mistakes and Best Practices

• افزودن تعاملات: مرور Adding interactivity: Review

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

• ساخت ساختار فایل‌ها Building the file structure

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

• مقدمه Introduction

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

• تغییر وضعیت تکمیل تسک Toggle task completion

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

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

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

• رندر کردن تسک‌ها Rendering tasks

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

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

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

• مقدمه Introduction

7. مرور React Reducer: اشتباهات رایج و بهترین روش‌ها 7. React Reducer Review: Common Mistakes and Best Practices

• مرور React reducer: اشتباهات رایج و بهترین روش‌ها React reducer review: Common mistakes and best practices

8. پروژه حرفه‌ای: آزمون رانندگی بریتانیا —React Reducer 8. Professional Project: UK Driving Test — React Reducer

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

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

• ساخت ساختار فایل‌ها Building the file structure

• مقدمه Introduction

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

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

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

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

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

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

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

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

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

• اعمال React context در اپلیکیشن لیست انجام کار Applying React context to to-do list app

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

10. مرور React Context: اشتباهات رایج و بهترین روش‌ها 10. React Context Review: Common Mistakes and Best Practices

• مرور React context: اشتباهات رایج و بهترین روش‌ها React context review: Common mistakes and best practices

11. پروژه حرفه‌ای: وب‌سایت پورتفولیو: حالت تاریک/روشن —React Context 11. Professional Project: Portfolio Website: Dark/Light Mode — React Context

• ساخت لایه بخش توصیه‌ها Building the layout of recommendations section

• افزودن دکمه تغییر حالت روشن/تاریک Adding light/dark mode toggle

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

• مقدمه Introduction

• منوی موبایل با آیکون همبرگری Mobile menu with hamburger icon

• ساخت بخش Hero Building the hero section

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

• کارت رضایت مشتری (TestimonialCard) TestimonialCard

• ساخت بخش تماس با ما Building the contact section

• لینک‌های ناوبری دسکتاپ Desktop navigation links

• ساخت لایه بخش مهارت‌ها و تجربیات Building the skills and experience section layout

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

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

• تنظیم لایه نوار ناوبری (Navbar) Setting up the navbar layout

• ساخت ساختار فایل‌ها Building the file structure

• لایه بخش پروژه‌ها Projects section layout

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

• ردیف لوگوی شرکت‌ها با کامپوننت CompanyLogo Company logos row with CompanyLogo component

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

• ماندگاری حالت روشن/تاریک Dark/light mode persisting

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

• ساخت ScrollDots برای ناوبری Building ScrollDots for navigation

12. مقادیر مرجع با Refs 12. Reference Values with Refs

• بهترین روش‌ها برای دستکاری DOM با refs Best practices for DOM manipulation with refs

• مقدمه Introduction

• دسترسی به یک گره DOM با ref Accessing a DOM node with ref

• ساخت تایمر با استفاده از ref Creating a timer using ref

• دسترسی به گره‌های DOM کامپوننت‌های دیگر Accessing another component's DOM nodes

13. مرور مقادیر مرجع با Refs: اشتباهات رایج و بهترین روش‌ها 13. Reference Values with Refs Review: Common Mistakes and Best Practices

• مرور مقادیر مرجع با refs: اشتباهات رایج و بهترین روش‌ها Reference values with refs review: Common mistakes and best practices

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

• دکمه ریست Reset button

• نمایش شرطی گرافیکی هنگام پیروزی در بازی Conditionally show graffiti when the game is won

• انتقال منطق چرخش به GameBoard با استفاده از refs Move flipping logic to GameBoard using refs

• پخش صدای چرخش هنگام جابجایی کارت Play flipping sound on card flip

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

• پخش صدای پیروزی هنگام پیدا کردن تمام جفت‌ها Play a victory sound when the player matches all card pairs

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

• مقدمه: راهنمای کاربر Introduction: User walkthrough

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

• ریست کردن GameBoard Reset the GameBoard

• افزودن منطق چرخش به کامپوننت Card Add flipping logic to the Card component

• تنظیم وضعیت بازی: تولید و مخلوط کردن آیکون‌ها با الگوریتم Fisher Yates Set up the game state in app: Generate and shuffle icons using the Fisher-Yates algorithm

• ساخت ساختار فایل‌ها Building the file structure

• ساخت کامپوننت تنظیمات و تعریف reInitialiseGame Build the settings component and define reInitialiseGame in the process

15. افکت‌های ری‌اکت (React Effects) 15. React Effects

• شنود کلیدهای کیبورد Listening for a keyboard key

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

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

• تغییر اندازه Google Maps Google Maps resizing

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

16. مرور React Effects: اشتباهات رایج و بهترین روش‌ها 16. React Effects Review: Common Mistakes and Best Practices

• مرور React effects: اشتباهات رایج و بهترین روش‌ها React effects review: Common mistakes and best practices

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

• ساخت کامپوننت پیش‌بینی (Forecast) Build the Forecast component

• ساخت useEffect برای دریافت داده‌های هواشناسی هنگام انتخاب شهر Build a useEffect to fetch weather data when a city is selected

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

• مقدمه: راهنمای کاربر Introduction: User walkthrough

• ساختار پروژه: ایجاد فایل‌ها و پوشه‌ها Project structure: Creating files and folders

• هدر Header

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

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

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

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

• ساخت useEffect برای تبدیل داده‌های API هنگام تغییر داده‌ها Build a useEffect that transforms the API data when data changes

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

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

• مقدمه: راهنمای کاربر Introduction: User walkthrough

• ساخت کامپوننت فوتر Building the footer component

• ساخت صفحه یافت نشد (NotFound) Building the NotFound page

• ساختار پروژه: ایجاد فایل‌ها و پوشه‌ها Project structure: Creating files and folders

• ساخت یک اسکرول‌بار سفارشی زیبا Build a beautiful custom scrollbar

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

• ساخت کانتکست زبان و قرار دادن اپلیکیشن در Provider Building the language context and wrapping app in the provider

• ساخت هدر Building the header

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

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

• پیکربندی Supabase و تنظیمات محیطی (Environment) Supabase configuration and environment setup

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

• صفحه جزئیات داستان: ساخت بخش محتوای داستان StoryDetail page: Building the story content section

• مسیریابی و لایه با App.jsx Routing and layout with App.jsx

• صفحه StoryList: دریافت و نمایش داده‌ها StoryList page: Fetching and displaying data

19. پروژه حرفه‌ای: تخته کانبان با قابلیت کشیدن و رها کردن مشابه Trello —useEffect 19. Professional Project: Kanban Board with Drag and Drop like Trello — useEffect

• افزودن و حذف ستون‌ها Adding and deleting columns

• پیاده‌سازی حذف تسک در تخته کانبان Implementing task deletion in the Kanban board

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

• ساخت تخته کانبان: مدیریت وضعیت ستون‌ها و رندر تسک‌ها Building the Kanban board: Managing column state and rendering tasks

• استفاده از useRef برای فوکوس و اسکرول به انتهای textarea هنگام ویرایش Use useRef to focus and scroll to the end of the textarea when editing starts

• ویرایش تسک‌ها به صورت درون‌خطی (inline) Editing tasks inline

• ساختار پروژه: ایجاد فایل‌ها و پوشه‌ها Project structure: Creating files and folders

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

• مقدمه: راهنمای کاربر Introduction: User walkthrough

• مدیریت جابجایی تسک در پایان Drag Handling task movement on drag end

• ماندگار کردن وضعیت کانبان در localStorage Persisting Kanban state to localStorage

• افزودن حالت تاریک با toggle تم و useEffect Adding dark mode with theme toggle and useEffect

• ویرایش عناوین ستون‌ها Editing column titles

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

• پیاده‌سازی Drag and Drop برای تسک‌ها Implementing drag and drop for tasks

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

• ساخت یک هوک سفارشی برای فرم‌ها Building a custom hook for forms

• مقدمه‌ای بر هوک‌های سفارشی Introduction to custom hooks

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

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

• الگوی Compound Components Compound components pattern

• کامپوننت‌های کنترل‌شده در مقابل کنترل‌نشده Controlled vs uncontrolled components

• الگوی تابع به عنوان فرزند (Function as children) Function as children pattern

• الگوی Render props Render props pattern

• الگوی Controlled props Controlled props pattern

• Prop getters و Prop collections Prop getters & prop collections

• الگوی State reducer State reducer pattern

22. بهینه‌سازی عملکرد ری‌اکت با Memorization، Virtualization، Suspense و غیره 22. Optimising React Performance with Memorization, Virtualization, Suspense, Etc.

• useCallback —مموایز کردن توابع useCallback — memoizing functions

• مقدمه‌ای بر عملکرد (Performance) در ری‌اکت Introduction to performance in React

• useMemo —مموایز کردن محاسبات سنگین useMemo — memoizing expensive calculations

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

• React.memo —مموایز کردن کامپوننت‌ها React.memo — memoizing components

• مثال دیگری با استفاده از React.memo Another example using React.memo

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

• آنالیز اپلیکیشن‌های ری‌اکت با React DevTools Profiler Profiling React apps with React DevTools Profiler

23. مسیریابی و ناوبری در ری‌اکت (با React Router 7 / آخرین سینتکس React 19) 23. Routing and Navigation in React (with React Router 7 / Latest React 19 Syntax)

• مقدمه‌ای بر مسیریابی (Routing) در ری‌اکت Introduction to routing in React

• پارامترهای جستجو (Search params) و Query strings Search params & query strings

• ناوبری برنامه‌ریزی شده با useNavigate Programmatic navigation with useNavigate

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

• مسیرهای محافظت شده (مثال احراز هویت) Protected routes (auth example)

• مسیرهای تودرتو و لایه‌ها (با استفاده از Outlet) Nested routes & layouts (using )

• تقسیم کد (Code splitting) و بارگذاری تنبل مسیرها Code splitting & lazy loading routes

24. فرم‌ها: اعتبار‌سنجی و مباحث پیشرفته 24. Forms: Validation and Advanced

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

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

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

• مرور ورودی‌های کنترل‌شده در مقابل کنترل‌نشده Review of controlled vs. uncontrolled inputs

• اعتبار‌سنجی Schema با Yup Schema validation with Yup

25. دریافت داده‌ها و مدیریت وضعیت (React TanStack / Zustand, Redux Toolkit) 25. Data Fetching and State Management (React TanStack / Zustand, Redux Toolkit)

• مرز خطا (Error boundary) - مدیریت خطاهای همزمان Error boundary (synchronous error handling)

• کش کردن کوئری‌ها و refetching Query caching & refetching

• مرور مبانی دریافت داده‌ها (fetch + useEffect) Review of data fetching basics (fetch + useEffect)

• وضعیت جهانی (Global state) با Zustand Global state with Zustand

• Error boundary + Suspense - مدیریت خطاهای ناهمزمان Error boundary + Suspense (asynchronous error handling)

• Redux Toolkit Redux Toolkit

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

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

26. تست‌نویسی در React 19 26. React 19 Testing

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

• تست حالت‌های خطا در کامپوننت‌های ناهمزمان ری‌اکت Testing error states in asynchronous React components

• تست تعاملات Toggle (بستن/باز کردن) Testing toggle interactions (expand/collapse)

• رویدادهای کاربر: تست کلیک دکمه با userEvent.click User events: Testing button clicks with userEvent.click

• مقدمه‌ای بر تست ری‌اکت: رندرینگ پایه Introduction to React testing: Basic rendering

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

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

• رویدادهای کاربر: تست تایپ ورودی با userEvent.type User events: Testing input typing with userEvent.type

• رویدادهای کاربر: رندرینگ شرطی با userEvent User events: Tonditional rendering with userEvent

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

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

• تست دریافت داده‌های ناهمزمان Testing asynchronous data fetching

• تست Snapshot Snapshot testing

27. رندرینگ سمت کلاینت/سرور: مفاهیم SSG —ISR و مقایسه‌ها 27. Client/Server Side Rendering: SSG — ISR Concepts and Comparisons

• رندرینگ سمت کلاینت/سرور: مفاهیم SSG —ISR و مقایسه‌ها Client/server side rendering: SSG — ISR concepts and comparisons

28. Next.js 16: یک دوره جامع 28. Next.js 16: A Comprehensive Course

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

• احراز هویت: تایید ایمیل Authentication: Email verification

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

• لایه تودرتو (Nested layout) Nested layout

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

• افزودن متادیتا به کامپوننت‌های کلاینت و سرور Add metadata to client and server components

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

• احراز هویت: ورود با گیت‌هاب Authentication: GitHub login

• احراز هویت: ایجاد جدول کاربران و Seed کردن داده‌ها Authentication: Users table creation and seeding

• افزودن کلیدهای خارجی برای دوره‌ها در پیام‌ها Adding foreign keys for course in messages

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

• لایه‌ها در مقابل کامپوننت قدیمی custom app Layouts vs. old custom app component

• احراز هویت: بازیابی رمز عبور Authentication: Password reset

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

• میدل‌ور Next.js 16: محدود کردن صفحه ادمین Next.js 16 middleware: Restrict admin page

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

• انتقال داده‌ها از کامپوننت سرور به کلاینت Passing data from server to client components

• روابط دیتابیس (کاربران + پیام‌ها) Database relationships (users + messages)

• محدود کردن اتاق‌های چت به یک دوره خاص Restrict chat rooms to a single course

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

• استفاده از دیتابیس در Next.js (ماندگاری داده‌های Fullstack) Using a database in Next.js (fullstack data persistence)

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

• دریافت پیام‌ها با استفاده از Server Action Pull messages using a server action

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

• ترکیب کامپوننت‌های سرور و کلاینت Interleaving server and client components

• احراز هویت: ساخت نوار ناوبری آگاه از وضعیت احراز هویت Authentication: Building an auth-aware navigation bar

• مقدمه‌ای بر Next.js و نصب پروژه Introduction to Next.js and project setup

• استفاده از ErrorBoundary و Suspense برای رندر ایمن کامپوننت‌ها Using ErrorBoundary and Suspense for safe component rendering

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

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

• Server actions، یک ویژگی قدرتمند در Next.js Server actions, a powerful Next.js feature

• کامپوننت‌های کلاینت و کامپوننت‌های سرور Client components and server components

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

• مسیریابی و ناوبری مبتنی بر فایل File-based routing and navigation

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

• افزودن اعتبار‌سنجی Zod به فرم پیام Add Zod validation to message form

• ساخت جدول دوره‌ها و Seed کردن داده‌های دوره‌ها Build a courses table and seed it with courses data

• ساخت یک فرم تماس کاربردی Building a functional contact form

• Context providers Context providers

• حذف خوش‌بینانه (Optimistic) پیام و اطلاع‌رسانی آنی به کاربران Optimistically delete a message and notify all users in real time

• احراز هویت: ورود با گوگل Authentication: Google login

• ویرایش خوش‌بینانه پیام و اطلاع‌رسانی آنی به کاربران Optimistically edit a message and notify all users in real time

• مسیرهای API در Next.js 16 و قابلیت‌های Fullstack Next.js 16 API routes and fullstack features