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

Custom Hooks Custom Hooks

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

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

الگوهای پیشرفته React 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

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

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

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

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

• استفاده از useCallback برای Memoizing توابع useCallback — Memoizing Functions

• استفاده از useMemo برای محاسبات سنگین useMemo — Memoizing Expensive Calculations

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

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

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

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

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

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

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

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

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

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

• جداسازی کد (Code Splitting) و Lazy Loading مسیرها Code Splitting & Lazy Loading Routes

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

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

• مدیریت فرم‌ها در React (مقدماتی) 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 Boundary + Suspense (Asynchronous Error Handling)

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

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

• مقدمه‌ای بر تست React و رندرینگ پایه Introduction to React Testing - Basic Rendering

• جستجوی المان‌ها (Querying Elements) Querying Elements

• رفتار مبتنی بر Prop 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

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

مفاهیم و مقایسه SSR، SSG و ISR Client/Server Side Rendering - SSG - ISR Concepts and Comparisons

• مفاهیم و مقایسه SSR، 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ها با کامپوننت قدیمی App Layouts vs Old Custom App Component

• 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 و ویژگی‌های Fullstack 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 Next.js Feature

• افزودن Metadata به کامپوننت‌های کلاینت و سرور 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) پیام و اطلاع‌رسانی آنی به همه Optimistically Delete a Message and Notify All Users in Real Time

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

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

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