آموزش جامع React – راهنمای کامل ساخت اپلیکیشن‌های واقعی - آخرین آپدیت

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

مقدمه‌ای بر React Intro to React

• React JS چیست و چرا به آن نیاز داریم؟ What is React JS and why is it needed?

• مفاهیم اصلی React React Core Concepts

• اولین قدم‌ها با Code Sandbox First Steps with Code Sandbox

• ساخت محتوای پویا با React Creating Dynamic Content with React

• روش‌های مختلف خروجی JSX و React.Fragment Different Ways of Outputting JSX and React.Fragment

• اولین کامپوننت React ما! Our First React Component!

• افزودن تصویر SVG Adding a SVG Image

• تصاویر در پوشه Src یا Public؟ Images in Src or Public Folder?

• سنجش میزان یادگیری TEST YOUR KNOWLEDGE

مقدمه‌ای بر Properties در React Intro to React Properties

• اولین نگاه به Properties در React First look at React Properties

• چه کارهایی را می‌توانیم با Properties انجام دهیم یا ندهیم؟ What can we do or not do with React Properties?

• استفاده از Spread Operator با Properties Using Spread Operator with Properties

• تخریب (Deconstructing) پراپس‌ها Deconstructing Props

• بازنویسی (Overriding) Properties Overriding Properties

• تنظیم مقادیر پیش‌فرض برای Properties Setting Defaults for Properties

• روش جایگزین برای تنظیم پیش‌فرض‌ها Alternative Way of Setting Defaults

• عبور دادن کامپوننت‌های دیگر در Properties (پراپ خاص Children) Passing other Components in Properties - the special Children Prop

• عبور دادن آبجکت‌ها در Properties Passing Objects in Properties

• عبور دادن آرایه‌ها در Properties Passing Arrays in Properties@

• الگوی Presenter Container: ارسال پارامتر به Callback از فرزند به والد Presenter Container - Pass a Parameter to a Callback from Child to Parent

• الگوی Presenter Container: ارسال چندین پارامتر به Callback Presenter Container - Pass Multiple Parameters to a Callback

• سبد خرید ساده: ارسال آبجکت به کامپوننت‌های والد Simple Basket - Passing Object to Parent Components

مقدمه‌ای بر State در React و هوک useState Intro to React State - useState Hook

• مقدمه‌ای بر State در React Intro to React State

• بایدها و نبایدهای State در React React State - Dos and Donts

• نمایش تعداد محصولات در کامپوننت سبد خرید Displaying Quantities in Basket Component

• ذخیره مقادیر اولیه در State و تابع به‌روزرسان (Updater) Storing Primitives in State and Updater Function

• استفاده از تابع به‌روزرسان برای تغییر آبجکت در State Using Updater Function to update Object in State

• افزودن آبجکت‌ها به آرایه در State Adding Objects to Array in State

• به‌روزرسانی آبجکت‌ها در آرایه در State Updating Objects in Array in State

• حذف آبجکت‌ها از آرایه در State (چالش) Remove Objects from Array in State - Challenge

• حذف آبجکت‌ها از آرایه در State (راه حل) Remove Objects From Array in State - Solution

• آماده‌سازی برای تغییر صفحه Setting the Stage for a Screen Change

• استفاده از شرط‌ها برای تغییر نمایش کامپوننت‌ها Using Conditions to Change Visibility of Components

• بازنویسی برای دستیابی به طراحی Solid و چالش Refactoring to making things more Solid Design and Challenge

• راه حل چالش Solid و چالش جدید Refactoring to Solid Challenge Solution and Another Challenge

• استفاده از useState همراه با useEffect و معرفی هوک جدید Using useState with useEffect Hook, and intro to a new React hook

• ایجاد دو نمای متفاوت برای کامپوننت سبد خرید Creating two views for Basket component

• خلاصه روش‌های مختلف به‌روزرسانی آرایه‌ها در State Summary of Different Methods to update Arrays in State - The Good, Bad and Ugly

مقدمه‌ای بر کامپوننت‌های Uncontrolled Intro to Uncontrolled Components

• ساخت فرم پرداخت Uncontrolled Creating an Uncontrolled Checkout Form

• چالش: ارسال خبر ثبت فرم به کامپوننت والد CHALLENGE: Communicate Form submission to parent component

• راه حل چالش CHALLENGE SOLUTION

• مقدمه‌ای بر هوک useRef در فرم‌های Uncontrolled Intro to useRef Hook with Uncontrolled Form

• اعتبارسنجی فرم با استفاده از useState Form Validation using useState

• ترکیب وضعیت‌های اعتبارسنجی در یک State واحد Combining Validation State into One State

• جدا کردن فایل‌های پروژه Splitting out Project Files

مقدمه‌ای بر کامپوننت‌های Controlled Intro to Controlled Components

• اولین نگاه به کامپوننت‌های Controlled First look at Controlled Components

• کامپوننت‌های Controlled با اعتبارسنجی پویا Controlled Components with Dynamic Validation

• ترکیب وضعیت کامپوننت در یک آبجکت Combining Component State into one object

• کامپوننت Controlled: مدیریت Checkboxها Controlled Component - Handling Checkboxes

• کامپوننت Controlled: مدیریت لیست‌های Select Controlled Component - Handling Select Listboxes

• کامپوننت Controlled: مدیریت Radio Buttonها Controlled Component - Handling Radio Buttons

• مدیریت مقادیر پیش‌فرض در کامپوننت‌های Controlled در مقابل Uncontrolled Handling Default Values in Controlled versus Uncontrolled Components

فراخوانی APIها با React Calling APIs with React

• فراخوانی API با Fetch Promise و useEffect Calling an API with Fetch Promise and useEffect

• افزودن وضعیت Loading و Error به فراخوانی API Adding Loading and Error State to API Fetch Call

• فراخوانی API با الگوی Async/Await و useEffect Calling an API with Async/Await Pattern Promise using Fetch and useEffect

• چالش: فراخوانی API توسط Container دسته‌بندی‌ها CHALLENGE: Categories Container calling API

• راه حل چالش: فراخوانی API توسط Container دسته‌بندی‌ها CHALLENGE SOLUTION: Categories Container calling API

• استفاده از Promise.ALL برای انتظار همزمان چندین API Promise.ALL - waiting for APIS to complete together

• فیلتر کردن محصولات بر اساس دسته‌بندی از طریق API Filtering Products by Category API Call

• درخواست POST به API با Async/Await POST API Request with Async/Await

• درخواست PUT به API با Async/Await PUT API Request with Async/Await

• درخواست DELETE به API با Async/Await DELETE API Request with Async/Await

• تبدیل Async/Await به Fetch Promise برای دسته‌بندی‌ها Convert Async/Await to Fetch Promise Categories

• تبدیل Async/Await به Fetch Promise برای محصولات Convert Async/Await to Fetch Promise Products

• تبدیل Async/Await به Fetch Promise برای ثبت سبد خرید Convert Async/Await to Fetch Promise for Basket Post

• تبدیل Async/Await به Fetch Promise برای به‌روزرسانی/حذف سبد Convert Async/Await to Fetch Promise for Basket Update/Delete

• تبدیل Fetch به Axios Promise برای دسته‌بندی‌ها Convert from Fetch to Axios Promise Categories

• تبدیل Fetch به Axios Promise برای ثبت سبد خرید Convert from Fetch to Axios Promise Basket Post

• تبدیل Fetch به Axios Promise برای محصولات و مدیریت سبد Convert from Fetch to Axios Promise Products and Basket Update Delete

• تبدیل Axios Promise به Await Async برای دسته‌بندی‌ها Convert from Axios Promise to Await Async Categories

• تبدیل Axios Promise به Await Async برای محصولات و مدیریت سبد Convert from Axios Promise to Await Async Products and Basket Update Delete

• رویدادهای OnClick به صورت Asynchronous Asynchronous OnClick Events

• مقایسه Fetch API در مقابل Axios Fetch API Versus Axios

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

• مقدمه‌ای بر Inline Styling Intro to Inline Styling

• استایل‌دهی شرطی Inline Conditional Inline Styling

• جدا کردن استایل‌ها در یک آبجکت استایل Separate styles into style object

• استایل‌دهی شرطی Inline بر اساس متغیر State Conditional Inline Styling from State Variable

• بازنویسی استایل‌های Inline Overriding Inline Styles

• ساخت آبجکت‌های استایل برای دکمه‌های Primary و Secondary Building Primary and Secondary style button objects

• جداسازی دغدغه‌ها: دکمه‌های Primary و Secondary Separating Concerns - Primary and Secondary style buttons

• جداسازی دغدغه‌ها: کامپوننت پایه دکمه (Base Button) Separating Concerns - Base Button Component

• تبدیل استایل‌های Inline به کلاس‌های CSS سراسری Converting Inline Styles to Global CSS Classes

• افزودن شرط CSS برای افکت Hover Adding a CSS Conditional for Hover effect

• مقدمه‌ای بر ClassNames برای مدیریت بهتر کلاس‌ها Intro to ClassNames - better way of handling classes

• مقدمه‌ای بر CLSX جایگزین مدرن ClassNames Intro to CLSX - modern replacement of ClassNames

• مقدمه‌ای بر CSS Modules برای استایل‌دهی SOLID Intro to CSS Modules - easier CSS module styling for SOLID

• مقدمه‌ای بر Styled Components روشی جایگزین برای استایل‌دهی Intro to Styled Components - alternative way to style React components

استایل‌دهی با استفاده از MATERIAL UI (MUI) Styling React Components with MATERIAL UI MUI

• معرفی Material UI و MUI برای استایل‌دهی کامپوننت‌ها Introduction to Material UI and MUI for styling components

• کامپوننت Paper و آیکون‌های Material UI Material UI Paper Component and Material Icons

• کامپوننت Stack در Material UI Material UI Stack Component

• نمایش محصولات به عنوان MUI ListItem Products as MUI ListItem

• کامپوننت‌های Avatar و Box در Material UI Material UI Avatar and Box Components

• افزودن جلوه‌های بصری هنگام Hover در MUI Material UI Adding Visual Effects on Hover

• افزودن دکمه‌های افزودن به سبد با Tooltip و آیکون‌های MUI Adding Add to Cart buttons with Tooltips with Material UI icons

• افزودن Dialog به بخش محصولات Adding a Dialog to Products

• استایل‌دهی به دسته‌بندی‌ها Styling Categories

• برجسته کردن دسته‌بندی انتخاب شده Highlighting the selected Category

• ساخت چیدمان دو ستونه با MUI Flex Box Creating two column layout with MUI Flex Box

• ساخت چیدمان دو ستونه با MUI Flex Grid Creating two column layout with MUI Flex Grid

درک هوک USECONTEXT Understanding the USECONTEXT Hook

• مقدمه‌ای بر هوک USECONTEXT Intro to USECONTEXT Hook

• ساخت کامپوننت‌های سبد خرید Creating Basket Components

• شکستن قوانین هوک‌ها! Breaking the Rule of Hooks!

• ساخت هوک سفارشی useBasket Creating customer useBasket Hook

• افزودن Basket Context به کامپوننت‌های سبد خرید Adding Basket Context to our Basket Components

• محافظت از Context با استفاده از Provider Hook Protecting the Context - a Context Provider Hook

• چالش: ساخت Customer Context CHALLENGE - Creating Customer Context

• راه حل چالش: ساخت Customer Context CHALLENGE SOLUTION - Creating Customer Context

• ترکیب Contextها در کامپوننت AppProviders Combining Contexts Together - AppProviders Component

• پرداخت (Checkout) با استفاده از UseCustomerHook Checkout - using UseCustomerHook

• هوک سفارشی useMutateEntity Custom Hook - useMutateEntity

• بازنویسی Checkout با کامپوننت‌های MUI (بخش TextFields) Refactoring Checkout with MUI Components - the TextFields

• بازنویسی Checkout با کامپوننت‌های MUI (بخش Radio Group) Refactoring Checkout with MUI Components - Radio Group

ساخت تم‌های سفارشی با MATERIAL UI Creating Custom Themes with MATERIAL UI

• ساخت تم سفارشی روشن / تیره Creating Light / Dark custom theme

• ساخت ThemeContextProvider Creating ThemeContextProvider

• ساخت انتخاب‌گر تم (Theme Selector) Creating the Theme Selector

• تغییر انتخاب‌گر تم به Toggle Switch Changing Theme Selector to Toggle Switch

• افزودن آیکون خورشید و ماه به Toggle Switch Adding Sun and Moon Icon to Toggle Switch

• افزودن جلوه بصری به انتخاب‌گر تم (بخش ۱) Adding Visual Effect to Theme Selector Part 1

• افزودن انیمیشن به انتخاب‌گر تم (بخش ۲) Adding Animation Visual Effect to Theme Selector Part 2

• تزریق استایل‌های سراسری به DOM با UseEffect Injecting Global Styles into DOM using UseEffect

• تزریق استایل‌های سراسری با Emotion Global Style Injection Injecting Global Styles into DOM using Emotion Global Style Injection

• ساخت تم‌های سفارشی MUI Creating MUI Custom Themes

• ساخت تغییر‌دهنده تم سفارشی MUI Creating MUI Custom Theme Switcher

• اعمال تم‌های سفارشی بر روی کامپوننت دسته‌بندی‌ها Applying Custom Themes to Categories Component

• همگام‌سازی انتخاب تم با LocalStorage Syncing Theme Choice to LocalStorage

• هوک سفارشی برای همگام‌سازی انتخاب تم Custom Hook to Sync Theme Choice

• جدا کردن انتخاب‌گر تم از Header Separating Theme Selector from Header

مسیریابی در React با REACT ROUTER و VITE Routing in React - REACT ROUTER with VITE

• Visual Studio Code و VITE Visual Studio Code and VITE

• انتقال کدها از CodeSandbox به VITE Migrating CodeSandbox to VITE

• افزودن React Router و ساخت Routeها Adding React Router and building Routes

• تغییر خروجی به React Router Outlets Redirecting Output to React Router Outlets

• ناوبری با React Router (Link) Navigation with React Router - Link

• ناوبری با React Router (NavLink) Navigation with React Router - NavLink

• ناوبری با هوک useNavigate Navigation with React Router - useNavigate Hook

• پیکربندی ESLint و Prettier Configuring ESLint and Prettier

• ساخت کامپوننت LinkBehavior برای مپ کردن خودکار React Router به MUI Creating a LinkBehavior Component to auto map React Router to MUI

• یکپارچه‌سازی LinkBehaviour در استایل‌ها Integrating LinkBehaviour Component into styling

• استفاده از Layout Routeهای متعدد در React Router Multiple Layout Routes with React Router

• چالش: تست خود با ساخت کامپوننت جزئیات محصول CHALLENGE : Test Yourself by Building a Product Detail Component

• راه حل چالش: ساخت کامپوننت جزئیات محصول CHALLENGE SOLUTION: Test Yourself by Building a Product Detail Component

• بخش‌های پویا (Dynamic Segments) اختیاری Optional Dynamic Segments

• مسیرهای Wildcard: مدیریت محصول یافت نشد Wildcard Routes - Handling Product Not Found

• مسیرهای Wildcard: مدیریت چندین صفحه یافت نشد Wildcard Routes - Multiple Not Founds

• جدا کردن Routeها Separating out routes

• تبدیل Routeهای Declarative به Data Mode Converting Declarative Routes to Data Mode Routes

• یکپارچه‌سازی DataMode Route در AppRoutes Integrating DataMode Route to AppRoutes

• محافظت از مسیرها با Route Guard Protecting Routes with Route Guard

• لودر داده‌های جزئیات محصول Product Detail Data Loader

• ترکیب لودرها: محصولات و دسته‌بندی‌ها Combining Loaders Together - Products and Categories

• رفع مشکل دسته‌بندی‌ها با Debugger Fixing Categories Issue with Debugger

• استفاده از Search Parameters در React Router Using React Router Search Parameters

• انتقال دسته‌بندی‌ها و محصولات بدون Outlet Context Passing Categories and Products Without Outlet Context

• ساخت URLهای سئو شده (SEO friendly) برای دسته‌بندی‌ها Making a more SEO-friendly URL for categories

• استفاده از Actionهای React Router در فرم Checkout React Router Actions with Checkout Form

• استفاده از Action در React Router با UseSubmit React Router Action with UseSubmit

• تبدیل از Data Mode به Framework Mode Converting from Data Mode to Framework Mode

• تبدیل به Framework Mode: Actionها و Loaderها Converting to Framework Mode - Actions and Loaders

• Error Boundaries در React Router: مدیریت خطای ساختاریافته برای محصولات React Router Error Boundaries - Structured Error Handling for Products

• Error Boundaries در React Router: مدیریت خطای ساختاریافته برای دسته‌بندی‌ها React Router Error Boundaries - Structured Error Handling for Categories

• رفع خطای ۴۰۴ در Error Boundary Fixing Error Boundary 404

ردوسرهای React و هوک USEREDUCER Reducers in React and the USEREDUCER Hook

• افزودن آیکون سبد خرید Adding a ShoppingCart Icon

• افزودن نشانگر (Badge) به آیکون سبد خرید Adding badge to shopping cart icon

• ساخت تابع BasketReducer برای هوک UseReducer Building a BasketReducer function for UseReducer Hook

• انتقال BasketReducer به Context Moving BasketReducer into Context

• چالش: Reducer برای خالی کردن سبد (ClearBasket) CHALLENGE - Reducer for ClearBasket

• افزودن آیکون‌های افزایش و کاهش تعداد در سبد Adding Increase and Decrease Quantity Icons to Cart

• تست با React: مقدمه‌ای بر JEST Testing with React - Intro to JEST

• تست با JEST: نوشتن اولین Unit Test Testing with JEST - Writing our first unit test

• نوشتن تست‌های واحد بیشتر با JEST Writing further unit tests with JEST

• چالش: Basket Helper Reducer CHALLENGE - Basket Helper Reducer

• راه حل چالش: تست‌های Basket Helper CHALLENGE SOLUTION - Basket Helper Tests

• پیاده‌سازی Basket Helper Reducer Basket Helper Reducer Implementation

• استفاده از Basket Helper در Baskets Basket Helper in Baskets

• چالش: تست‌های مجموع خطوط (Line Totals) در Basket Helper CHALLENGE - Basket Helper Line Totals Tests

• چالش: تست حذف آیتم CHALLENGE - Delete Item Test

• بازنویسی نمای سبد خرید (بخش ۱) Refactoring Basket View Part 1

• بازنویسی نمای سبد خرید (بخش ۲) Refactoring Basket View Part 2

• اعمال درصد تخفیف بر روی آیتم‌ها Applying Discount % to Items

• ساخت تست‌های TDD برای Reducer احراز هویت (بخش ۱) Creating Authentication Reducer TDD Tests First

• ساخت تست‌های TDD برای Reducer احراز هویت (بخش ۲) Creating Authentication Reducer TDD Test Part 2

• استفاده از Authentication Reducer در کامپوننت User Utilising Authentication Reducer with User component

• آیکون حساب کاربری با منوی کاربر Account Icon With User Menu

• همگام‌سازی Auth Reducer با User Context Syncing Auth Reducer with User Context

تست React با Jest و Mock Service Worker TESTING REACT with Jest and Mock Service Worker

• مقدمه‌ای بر روش‌های شبیه‌سازی (Mock) APIها Intro to methods to mock APIs

• نصب و راه‌اندازی MSW Installing and Setting Up MSW

• تنظیم MSW برای جایگزینی لودرها Setting up MSW to replace Loaders

• شبیه‌سازی جزئیات محصول Mocking Product Details

• اصلاح جزئیات محصول Fixing Product Details

• به‌روزرسانی تنظیمات Jest برای Node Updates to Jest Configuration for Node

• تست Product Loader Testing Product Loader

• تست‌های بیشتر لودر محصول و نحوه درک گزارش‌های Jest Further Product Loader Tests and how to understand Jest test reports

• نهایی کردن تست‌های لودر محصول و اجرای تست‌های مجزا Finalising Product Loader Tests and Running Individual tests

• ساخت Actionهای سبد خرید Creating Basket Actions

• به‌روزرسانی هوک useBasket با API Updating useBasket Hook with API

• به‌روزرسانی ProductsPageLoader با API Updating ProductsPageLoader with API

• به‌روزرسانی هندلرهای سبد خرید با API Updating Basket Handlers with API

• مرور ساختار پوشه‌ها Folder Structure Recap

• ساخت هندلرهای شبیه‌سازی شده مشتری برای MSW Building Mock Customer Handlers for MSW

• به‌روزرسانی هوک UseCustomer برای API Updating UseCustomer Hook for API

• به‌روزرسانی هوک همگام‌سازی احراز هویت مشتری برای API Updating Customer Auth Sync Hook for API

• ساخت لایه سرویس (Service Layer): سرویس مشتری Building Service Layer - Customer Service

• ساخت لایه سرویس: سرویس محصول و سبد خرید Building Service Layer - Product and Basket Service

• تست سرویس مشتری با JEST Testing Customer Service with JEST

• تست سرویس محصول با JEST Testing Product Service with JEST

• تست سرویس سبد خرید با JEST Testing Basket Service with JEST

• تست هوک useCustomer با React Testing Library و JEST Testing useCustomer hook with React Testing Library and JEST

• استفاده از Jest SpyOn برای شبیه‌سازی و جاسوسی متدها Jest SpyOn - Mocking and Spying on Methods

جلوه‌های بصری و طراحی ریسپانسیو با هوک‌های USEREF و USELAYOUTEFFECT Visual FX and Responsive Design with USEREF and USELAYOUTEFFECT Hooks

• مقدمه‌ای بر UseRef و UseLayout برای ستون‌های ریسپانسیو Intro to UseRef and UseLayout Hook for Responsive Columns

• ساخت ستون‌های ریسپانسیو Making Responsive Columns

• ساخت دسته‌بندی‌های Sticky با useRef Making Sticky Categories with useRef

• ساخت سبد خرید پاپ‌آپ شناور با useRef و useLayoutEffect Floating Popup Basket with useRef and useLayoutEffect

• افزودن محصولات به سبد پاپ‌آپ Adding Products to Popup Basket

• بهبود ظاهر سبد پاپ‌آپ Making Popup Basket Much Nicer

• افزودن محصولات تخفیف‌دار در صفحه اصلی Adding Products On Sale on Home Page

• ساخت کامپوننت تخفیف محصول Creating Product Discount Component

• اصلاح نمایش تخفیف محصول Fixing Product Discount Display

• جستجوی محصولات: ساخت نوار جستجو Searching for Products - Building a Search Bar

• جستجوی محصولات: نوار جستجو با کلید Enter Searching for Products - Search Bar with Enter

• جستجوی محصولات: پیاده‌سازی عملیات جستجو Searching for Products - Implementing a Search

• جستجوی محصولات: با استفاده از Search Params در React Router Searching for Products - With React Router Search Params

• جستجوی محصولات: افزودن عبارت جستجو به سرویس Search Searching for Products - Adding Search Term to Search Service

• بهبود UI با Loading Skeletons Improving UI with Loading Skeletons

• افزودن صفحه‌بندی (Pagination) برای محصولات Adding Pagination of Products - Setting up the Paging

• همگام‌سازی Skeletons با صفحه‌بندی Getting Skeletons to work with Paging

• اصلاح تست‌ها با Axios Mock Adaptor Fixing Tests with Axios Mock Adaptor

ساخت Server API با EXPRESS JS (در حال تکمیل ۲۰۲۶) Building a Server API with EXPRESS JS (2026 in progress)

• آماده‌سازی برای Express JS: حذف MSW Preparing for Express JS - Removing MSW

• نصب Express JS و راه‌اندازی Server API Installing Express JS - Setting up the Server API

• سازماندهی مجدد ساختار پوشه‌ها برای Express JS API Reorganising folder structure for Express JS API

• مسیرهای (Routes) مشتری برای Express JS Customer Routes for Express JS

• مسیرهای سبد خرید برای Express JS همراه با چالش Basket Routes for Express JS with CHALLENGE

• اجرای نهایی سرور ExpressJS API! Finally running the ExpressJS API Server!

• ساخت اسکریپت‌های استارت‌آپ راحت Convenient Startup Scripts

• پورت پروکسی برای Server API Proxy Port for Server API

• ساخت توابع CRUD برای Server API (محصولات و مشتریان) Creating CRUD functions for Server API - Products and Customers

• عمومی‌تر کردن توابع CRUD Making CRUD functions more generic

• ساخت توابع API عمومی (Public) Making Public API functions

• جدا کردن کلاینت از سرور Separating Client from Server

• اصلاح سرویس سبد خرید Fixing the Basket Service

• مدیریت خطای سراسری (Global Error Handler) برای ExpressJS Global Error Handler for ExpressJS

• جایگزینی Try-Catch با CatchAsync Promise Replace Try Catch with CatchAsync Promise

• جایگزینی GlobalError با Middleware مدل AppError Replacing GlobalError with AppError Middleware

• محافظت از مسیرهای API با اعتبارسنجی Protecting API Routes with Validation

• محافظت از IDهای خصوصی داخلی با Public ID Protecting internal private ID with Public ID

• جلوگیری از حملات DOS و محدود کردن IPها با Helmet Preventing DOS Attacks and Limiting IPs with Helmet

• ثبت لاگ درخواست‌های API با Morgan Logging API Request with Morgan

• تنظیمات لاگینگ Morgan در فایل .ENV Morgan Logging in .ENV file

پروژه: ساخت برنامه‌ریز ثروت بازنشستگی (TYPESCRIPT, VITEJS) (coming 2026) PROJECT: Building a Retirement Wealth Planner (TYPESCRIPT,VITEJS) (Coming 2026)

• ابزارهای مورد نیاز برای TypeScript: Node, ViteJS, Tailwind Bootstrap tools needed for Typescript - Node, ViteJS, Tailwind

• اولین کامپوننت React با TypeScript First Typescript React Component

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

• ساخت فرم با کامپوننت NumberTextField Building a form with NumberTextField component

• تابع تجمیع (Accumulation Function) Accumulation Function

• ساخت جدول تجمیع Building Accumulation Table

پروژه: ساخت یک ماشین حساب کوچک با React PROJECT: Let's build a little React calculator

• ساخت کامپوننت ماشین حساب Creating the Calculator component

• استایل‌دهی کامپوننت با کلاس‌های CSS Styling Component using CSS Classes

• استایل‌دهی پویا با کلاس‌های CSS Dynamic Styling using CSS Classes

• استایل‌دهی پویا با استایل‌ها و عملگر Ternary Dynamic Styling using Styles and Ternary

• مقدمه‌ای بر کتابخانه ClassNames Intro to ClassNames library

• ساخت دکمه‌های ردیف بالا Building the top row buttons

• ساخت نمایشگر (Display) Building the Display

• استفاده از هوک UseState برای نمایشگر UseState hook and Display

• وضعیت (State) به صورت آبجکت JSON State as JSON object

• افزودن مقادیر به نمایشگر Appending the Display

• پیاده‌سازی دکمه‌های عملیاتی Implementing the function buttons

• اصلاح دکمه نقطه اعشار Fixing decimal point button

• پیاده‌سازی دکمه درصد Implementing percent button

پروژه: ساخت بازی Connect 4 PROJECT: Let's have a bit of fun, Building a Connect 4 game

• شروع پروژه بازی Starting the Game project

• چالش: تکرار GameCircle Challenge Yourself - Make the GameCircle repeat

• راه حل چالش: تکرار GameCircle Challenge Yourself Solution - Make the GameCircle repeat

• چالش: رویداد OnClick برای GameCircle Challenge Yourself - OnClick GameCircle

• راه حل چالش: OnClick برای GameCircle Challenge Yourself Solution - OnClick GameCircle

• افزودن ID به دایره‌ها و رفع خطاهای احتمالی Adding Ids to circles, but we broke it

• جابجایی بین بازیکنان Toggling between the players

• محاسبه موقعیت برد (بخش ۱) Calculating Win Position - Part 1

• محاسبه موقعیت برد (بخش ۲) Calculating Win Position - Part 2

• محاسبه موقعیت برد (بخش ۳) Calculating Win Position - Part 3

• محاسبه موقعیت برد (بخش ۴) Calculating Win Position - Part 4

• محاسبه موقعیت برد (بخش ۵ - عمودی‌ها) Calculating Win Position - Part 5 - Verticals

• محاسبه موقعیت برد (بخش ۶ - افقی‌ها) Calculating Win Position - Part 6 - Horizontals

• محاسبه موقعیت برد (بخش ۷ - قطری‌ها) Calculating Win Position - Part 7 - Diagonals

• دیالوگ پیروزی Winning Dialog

• امکان بازی مجدد Let's Play Again

• محاسبه تساوی (آماده‌سازی) Calculating a Draw - Preparation

• بازنویسی CheckForWin Refactoring CheckForWin

• تکمیل CheckForDraw Finishing CheckForDraw

• افزودن دیالوگ تساوی Adding Draw Dialog

• افزودن حرکت تصادفی کامپیوتر Adding Computer Move Random

• افزودن حرکت هوشمندتر کامپیوتر Adding Computer Move Smarter

• افزودن بررسی عمودی برای حرکت کامپیوتر Adding Computer Move Vertical Check

• تکمیل سیستم حرکت کامپیوتر Completing Computer Move

پروژه: ساخت سایت فروشگاهی (E-Commerce) با React PROJECT: Let's build an E-Commerce Site in React

• مقدمه‌ای بر پروژه Intro to Project

• ساختاربندی اولیه پروژه (Scaffolding) Scaffolding the Project

• مقدمه‌ای بر JSON Server Intro to JSON Server

• دریافت داده‌ها با JSON Server و Fetch API Fetching Data with JSON Server and Fetch API

• استایل‌دهی به فروشگاه Styling the Store

• رندر کردن دسته‌بندی‌ها Rendering the Categories

• اتصال محصولات به فروشگاه Binding the Products in the Store

• بازنویسی فراخوانی Fetch API Refactoring the Fetch API Call

• مدیریت خطای Fetch API با Try-Catch Fetch API Error Try Catch

• مدیریت خطای ۴۰۴ با Fetch API Handling 404 with Fetch API

• طراحی کاشی (Tiling) برای نمایش محصولات Tiling our Product Display

• نصب React Router Installing React Router

• رفع هشدار Key Fixing the Key Warning

• ساخت صفحه جزئیات محصول با React Router Making a React Router Product Detail page

• توضیحات محصول Product Description

• مقدمه‌ای بر Styled Components Intro to Styled Components

• استایل‌دهی توضیحات محصول با StyledComponents Styling Product Description with StyledComponents

• تنظیم HTML در توضیحات با DangerouslySetHTML Setting HTML in Description with DangerouslySetHTML

• بازنویسی دسته‌بندی‌ها Refactoring the Categories

• بازنویسی Layout Refactoring the Layout

• بازنویسی صفحه اصلی Refactoring the Home Page

• مقدمه‌ای بر React Context و هوک useContext Intro to React Context with useContext Hook

• ترکیب useContext و useReducer useContext and useReducer Hook

• استفاده از Fetch API برای GetProductById Fetch API - GetProductById

• ساخت کامپوننت سبد خرید Making a Basket Component

• پیاده‌سازی سبد خرید Implementing the Basket

• افزودن آیکون‌های سبد خرید Adding Basket Icons

• پیاده‌سازی مجموع قیمت سبد خرید Implementing Basket Total

• تکمیل صفحه پرداخت (Checkout) Finishing the Checkout page

• اصلاح وضعیت (State) در Checkout Checkout - Fixing the State

• تأیید سفارش در Checkout Checkout - Order Confirmation

• ذخیره سبد خرید در LocalStorage مرورگر Storing Basket in the browser LocalStorage

• پیاده‌سازی جستجو و نتایج جستجو Implementing Search and Search results

• اعمال Debouncing در جستجو Debouncing the Search

• اعتبارسنجی Checkout (روش ۱) Validating Checkout - Method 1

• اعتبارسنجی Checkout (روش ۲) Validating Checkout - Method 2

• اعتبارسنجی Checkout (روش ۳) Validating Checkout - Method 3

• اعتبارسنجی Checkout (روش ۴) Validating Checkout - Method 4

• خلاصه پروژه Project Summary

**دوره جایزه** تسلط بر React Hooks با مثال **BONUS FULL COURSE ** MASTER REACT HOOKS BY EXAMPLE

• هوک UseState: مثال ۱ (شمارنده) UseState Hook - Example 1 - Counter

• هوک UseState: مثال ۲ (تغییر تم) UseState Hook - Example 2 - Theme Toggle

• هوک UseState: مثال ۳ (فرم ساده) UseState Hook - Example 3 - SimpleForm

• هوک UseState: مثال ۴ (آرایه‌ها در State - لیست ToDo) UseState Hook - Example 4 - Arrays in State - ToDo List

• هوک UseState: مثال ۵ (کار با آبجکت‌ها - فرم پروفایل) UseState Hook - Example 5- Dealing with Objects, a Profile Form

• هوک UseState: مثال ۶ (مقادیر قبلی از State) UseState Hook - Example 6 - Previous Values from State

• هوک UseState: مثال ۷ (رندر شرطی) UseState Hook - Example 7 - Conditional Rendering

• ***سنجش دانش: هوک useState ***TEST YOUR KNOWLEDGE - useState Hook***

• هوک UseEffect: مقدمه UseEffect Hook - Intro

• هوک UseEffect: مثال پایه ۱ UseEffect Hook - Basic Example 1

• هوک UseEffect: مثال ۲ (شمارنده ساده) UseEffect Hook - Example 2 - Simple Counter

• هوک UseEffect: مثال ۳ (تغییرات بر اساس State) UseEffect Hook - Example 3 - Changes from State

• هوک UseEffect: نکات ریز و تله‌های useEffect UseEffect Hook - Gotchas with useEffect

• هوک UseEffect: نکات بیشتر useEffect UseEffect Hook - More Gotchas with useEffect

• هوک UseEffect: و باز هم نکات بیشتر! UseEffect Hook - And More Gotchas!

• هوک UseEffect: نکات تکمیلی! UseEffect Hook - And Even More Gotchas!

• هوک UseEffect: مثال ۴ (تغییر اندازه پنجره) UseEffect Hook - Example 4 - Resizing Windows

• هوک UseEffect: مثال ۵ (Polling API) UseEffect Hook - Example 5 - Polling API

• هوک UseEffect: مثال ۶ (همگام‌سازی Local Storage) UseEffect Hook - Example 6 - Sync Local Storage

• هوک UseEffect: مثال ۷ (دریافت داده هنگام تغییر Prop) UseEffect Hook - Example 7 - Fetch Data on Prop Change

• هوک UseEffect: مثال ۸ (شرط‌ها در useEffect) UseEffect Hook - Example 8 - Conditions in useEffect

• هوک UseEffect: مثال ۹ (پروفایل کاربر) UseEffect Hook - Example 9 - User Profile

• هوک UseEffect: مثال ۱۰ (UseEffect شرطی) UseEffect Hook - Example 10 - Conditional UseEffect

• هوک UseEffect: مثال ۱۱ (صفحه‌بندی) UseEffect Hook - Example 11 - Pagination

• ***سنجش دانش: هوک useEffect ***TEST YOUR KNOWLEDGE - useEffect Hook***

• هوک UseContext: Prop Drilling چیست؟ UseContext Hook - What is Prop Drilling?

• هوک UseContext: مثال ۱ (مقدمه‌ای بر useContext) UseContext Hook - Example 1 - Intro to useContext hook

• هوک UseContext: مثال ۲ (تم‌بندی با useContext) UseContext Hook - Example 2 - Theming with useContext

• هوک UseContext: مثال ۳ (پروفایل احراز هویت کاربر) UseContext Hook - Example 3 - User Authentication Profile

• هوک UseContext: مثال ۴ (انتخاب زبان همراه با چالش) UseContext Hook - Example 4 - Language Selection with Challenge

• هوک UseContext: مثال ۴ انتخاب زبان (بخش ۲) UseContext Hook - Example 4 Language Selection Part 2

• هوک UseContext: مثال ۵ (مثال سبد خرید) UseContext Hook - Example 5 - Shopping Cart Example

• هوک UseContext: مثال ۶ (ترکیب Contextها - احراز هویت کاربر) Use Context Hook - Example 6 - Contexts Together - Login User Authentication

• هوک UseReducer: مثال ۱ (شبیه‌سازی حساب بانکی ساده) UseReducer Hook - Example 1 - Simulate a Simple Bank Account

• هوک UseReducer: مثال ۲ (سبد خرید با useReducer) UseReducer Hook - Example 2 - Shopping Cart using useReducer

• هوک UseReducer: مثال ۳ (لیست ToDo با useReducer) UseReducer Hook - Example 3 - ToDoList with useReducer

• هوک UseReducer: مثال ۴ (ارسال فرم ورود) UseReducer Hook - Example 4 - Login Form Submission

• هوک UseReducer: مثال ۵ (تغییر تم) UseReducer Hook - Example 5 - Toggling a Theme

• هوک UseReducer: مثال ۶ (کنترل آکاردئون) UseReducer Hook - Example 6 - Accordion Control

• هوک UseReducer: مثال ۷ (پیاده‌سازی Step Wizard) UseReducer Hook - Example 7 - Implement Step Wizard

• هوک UseRef: مثال ۱ (دستکاری المان DOM) UseRef Hook - Example 1: Manipulating DOM Element with useRef

• هوک UseRef: مثال ۲ (تایمر با UseRef) UseRef Hook - Example 2: Timer with useRef Hook

• هوک UseRef: مثال ۳ (ردیابی وضعیت قبلی) UseRef Hook - Example 3: Tracking Previous State

• هوک UseRef: مثال ۴ (شمارش تعداد رندرها) UseRef Hook - Example 4: Counting number of Renders

• هوک UseRef: مثال ۵ (انیمیشن ساده) UseRef Hook - Example 5: Simple Animation

• هوک UseRef: مثال ۶ (Debouncing برای باکس‌های ورودی) UseRef Hook - Example 6: Debouncing Input Boxes

• هوک UseRef: مثال ۷ (ترکیب useRef با useEffect) UseRef Hook - Example 7: Combining useRef with useEffect

• هوک UseRef: مثال ۸ (اسکرول به المان مورد نظر) UseRef Hook - Example 8: Scroll Element into view

• هوک UseRef: مثال ۹ (useRef با کتابخانه‌های Third-party) UseRef Hook - Example 9: useRef with 3rd party library

• UseMemo/React.Memo: مثال ۱ (مقدمه useMemo و مموئیز کردن تابع) UseMemo/React.Memo - Example 1: Intro to useMemo Hook, memoizing a function

• UseMemo/React.Memo: مثال ۲ (فیلتر کردن لیست آیتم‌ها) UseMemo/React.Memo - Example 2: Filtering a list of items

• UseMemo/React.Memo: مثال ۳ (توابع Aggregate) UseMemo/React.Memo - Example 3: Aggregate Functions

• UseMemo/React.Memo: مثال ۴ (مموئیز کردن آبجکت‌های استایل) UseMemo/React.Memo - Example 4: Memoizing Style Objects

• UseMemo/React.Memo: مثال ۵ (مموئیز کردن فراخوانی API) UseMemo/React.Memo - Example 5: Memoizing API Call

• UseMemo/React.Memo: مثال ۶ (جلوگیری از رندرهای مجدد غیرضروری) UseMemo/React.Memo - Example 6: Avoiding Unnecessary Re-Renders

• هوک UseCallback: مثال ۱ (مقدمه useCallback و مموئیز کردن تابع) UseCallback Hook - Example 1 - Intro to useCallback Hook - Memoizing a function

• هوک UseCallback: مثال ۲ (تابع Event Listener پایدار) UseCallback Hook - Example 2: Stable Event Listener Function

• هوک UseCallback: مثال ۳ (تابع مموئیز شده برای منطق محاسباتی) UseCallback Hook - Example 3: Memoized Function for Computational Logic

• هوک UseCallback: مثال ۴ (تعامل بین توابع) UseCallback Hook - Example 4 - Interaction Between Functions

• هوک UseCallback: مثال ۵ (جلوگیری از رندر مجدد کامپوننت فرزند) UseCallback Hook - Example 5: Preventing Child Component Re-renders

• هوک UseCallback: مثال ۶ (انتقال داده والد-فرزند با useCallback) UseCallback Hook - Example 6: Parent-Child Data Passing with useCallback

• هوک UseCallback: مثال ۷ (تفاوت بین useMemo و useCallback) UseCallback Hook - Example 7 - Difference between useMemo and useCallback

• هوک UseCallback: مثال ۸ (استفاده همزمان از useCallback و useMemo) UseCallback Hook - Example 8 - Using useCallback and useMemo together

• هوک UseLayoutEffect: مثال ۱ (اندازه‌گیری Divها) UseLayoutEffect Hook - Example 1 - Measuring Divs

• هوک UseLayoutEffect: مثال ۲ (جلوگیری از پرش‌های بصری) UseLayoutEffect Hook - Example 12- Avoiding Visual Jumps

• هوک UseLayoutEffect: مثال ۳ (اسکرول همگام شده) UseLayoutEffect Hook - Example 3 - Synchronised Scrolling

• هوک UseLayoutEffect: مثال ۴ (پیاده‌سازی Tooltips) UseLayoutEffect Hook - Example 4 - Implementing Tooltips

• هوک UseLayoutEffect: مثال ۵ (همگام‌سازی وضعیت انیمیشن) UseLayoutEffect Hook - Example 5 - Sync Animation State

• هوک UseImperativeHandle: مثال ۱ (فراخوانی متدهای فرزند از والد) UseImperativeHandle Hook - Example 1 - Calling Child Methods from Parent

• هوک UseImperativeHandle: مثال ۲ (تغییر نمایش فرزند از طریق والد) UseImperativeHandle Hook - Example 2 - Toggle Visibility of Child from Parent

• هوک UseImperativeHandle: مثال ۳ (اسکرول به المان) UseImperativeHandle Hook - Example 3 - Scroll To Element

• هوک UseID: مثال ۱ (استفاده از useID در فرم) UseID Hook - Example 1 - useID with Form

• هوک UseID: مثال ۲ (useID با کلید ترکیبی) UseID Hook - Example 2- useID with Composite Key

• هوک UseID: مثال ۳ (یکتا بودن useID) UseID Hook - Example 3 - useID uniqueness

• هوک UseID: مثال ۴ (useID برای ویژگی‌های Aria) UseID Hook - Example 4 - useID for Aria attributes

• هوک UseTransition: مثال ۱ (پیشرفت لودینگ با useTransition) UseTransition Hook - Example 1 - Loading Progress with useTransition

• هوک UseTransition: مثال ۲ (رندر تأخیری شرطی) Use Transition Hook - Example 2 - Conditional Delayed Rendering

• هوک UseTransition: مثال ۳ (رندر شرطی با لیست‌ها) Use Transition Hook - Example 3 - Conditional Rending with Lists

• هوک UseDeferredValue: مثال ۱ (ورودی Debounced) Use DeferredValue Hook - Example 1 - Debounced Input

• هوک UseDeferredValue: مثال ۲ (گالری تصاویر) UseDeferredValue Hook - Example 2 - Image Gallery

• هوک UseDeferredValue: مثال ۳ (به تأخیر انداختن لیست‌های طولانی) UseDeferredValue Hook - Example 3 - Deferring Long Lists

• هوک UseDeferredValue: مثال ۴ (محاسبات سنگین) UseDeferredValue Hook - Example 4 - Expensive Calculations

• هوک UseDeferredValue: مثال ۵ (فیلتر لیست‌ها با محاسبات سنگین) UseDeferredValue Hook - Example 5 - Filtering Lists with Expensive Calculations

• هوک UseSyncExternalStore: مثال ۱ (اشتراک با Storeهای خارجی) UseSyncExternalStore Hook - Example 1 - Subscription with external stores

• هوک UseInsertion: مثال ۱ (CSS با JS) UseInsertion Hook - Example 1 - CSS with JS

• هوک UseInsertion: مثال ۲ (useInsertionEffect برای انیمیشن روان) UseInsertion Hook - Example 2 - useInsertionEffect for Smooth Animation

• هوک UseInsertion: مثال ۳ (تغییر دهنده تم) UseInsertion Hook - Example 3 - Theme Switcher

• هوک UseInsertion: مثال ۴ (فونت‌های پویا) UseInsertion Hook - Example 4 - Dynamic Fonts

• هوک UseInsertion: مثال ۵ (انتقال‌های CSS پویا) UseInsertion Hook - Example 5 - Dynamic CSS Transitions

• هوک UseInsertion: مثال ۶ (استایل‌های بحرانی) UseInsertion Hook - Example 6 - Critical Styles

• REACT 19: هوک useActionState مثال ۱ (فرم ساده) REACT 19: useActionState Hook - Example 1 - useActionState - Simple Form

• REACT 19: هوک useFormStatus مثال ۲ (فرم ساده) REACT 19: useFormStatus - Example 2 - useFormStatus - Simple Form

• REACT 19: هوک useFormStatus مثال ۳ (اعتبارسنجی فرم) REACT 19: useFormStatus - Example 3 - useFormStatus - Validation of Form

• ** قوانین هوک‌ها در React ** Rules of Hooks in React **

• ساخت یک هوک سفارشی ساده Build a simple Custom Hook

• ساخت هوک سفارشی useFetch Build a custom useFetch Hook

• هوک سفارشی با Axios برای دریافت داده‌ها Custom Hook with Axios for Data Fetching

• هوک سفارشی با Axios و الگوی Await/Async Custom Hook with Axios Await/Async Pattern

• هوک سفارشی با Axios برای درخواست POST Custom Hook with Axios POST Request

• هوک سفارشی با Axios و POST به صورت Optimistic Custom Hook with Axios with Optimistic POST

• هوک سفارشی با Axios و PUT و DELETE به صورت Optimistic Custom Hook with Axios with Optimistic PUT and DELETE

• هوک سفارشی با Axios و هوک USEOPTIMISTIC در React 19 برای به‌روزرسانی Custom Hook with Axios and USEOPTIMISTIC React 19 Hook for Updates

• نمایش عملکرد USEOPTIMISTIC با Axios Customer Hook with Axios USEOPTIMISTIC Demonstration

• استفاده از USEOPTIMISTIC با SetTransition Customer Hook with Axios USEOPTIMISTIC with SetTransition

• ساخت هوک useForm برای کامپوننت‌های Controlled Creating a useForm hook for Controlled Components

• هوک سفارشی برای Debouncing ورودی Custom Hook for Debouncing an Input

• ترکیب هوک‌های سفارشی (Hook Composition) Combining Custom Hooks - Hook Composition

• هوک سفارشی برای رویدادهای RealTime WebSocket Custom Hook for RealTime WebSocket Events

• هوک سفارشی برای همگام‌سازی Local Storage Custom Hook to Sync Local Storage

• کارخانه ساخت هوک سفارشی (Custom Hook Factory) Custom Hook Factory

• هوک سفارشی برای ثبت فشار دادن کلیدها Custom Hook for Capturing Key Presses

• هوک سفارشی احراز هویت کاربر با الگوی Finite State User Authentication Custom Hook with Finite State Pattern

**دوره جایزه** تسلط بر الگوهای React با مثال **BONUS FULL COURSE ** MASTER REACT PATTERNS BY EXAMPLE

• الگوهای طراحی (Design Patterns) چیستند؟ What are design patterns?

• کامپوننت‌های تابعی Stateless و Stateful Stateless and Stateful Functional Component

• الگوی Controlled و Uncontrolled Controlled and Uncontrolled Pattern

• الگوی Container Presenter Container Presenter Pattern

• الگوی Render Props Render Props Pattern

• الگوی Compound Components Compound Components Pattern

• الگوی Higher Order Component (HOC) Higher Order Component Pattern

• مزایا و معایب Higher Order Components Higher Order Components - Advantages and Disadvantages

• API: دریافت داده‌ها با useEffect API: Fetching Data with useEffect

• API: استفاده از async/await در یک Effect API: Using async/await in an Effect

• API: انتزاع async/await در هوک سفارشی useFetch API: Abstract async/await into Custom useFetch hook

• API: هوک سفارشی برای دریافت داده‌ها API: Custom Hook for Data Fetching

• API: دریافت داده‌های Async با Axios API: Async Data Fetching with Axios

• API: دریافت داده‌ها با Axios و هوک سفارشی API: Data Fetching with Axios with Custom Hook

• API: دریافت داده‌ها با React Query API: Fetching with React Query

• API: اسکرول بی‌نهایت یا صفحه‌بندی API: Infinite Scrolling or Pagination

• API: به‌روزرسانی‌های Optimistic API: Optimistic Updates

• API: دریافت داده‌های شرطی API: Conditional Fetching

• API: Debouncing ورودی‌های Controlled API: Debouncing Controlled Input

• API: الگوی مدیریت خطا API: Error Handling Pattern

• API: الگوی وضعیت Loading API: Loading State Pattern

• API: الگوی Polling API: Polling Pattern

• API: داده‌های Mock استاتیک (Local Fetch) API: Static Mock API Data (Local Fetch)

• API: استفاده از Redux Thunks برای API API: Using Redux Thunks for API

• API: الگوی درخواست Post API: Post Request Pattern

• API: استفاده از الگوی SWR (Stale While Revalidate) API: Using SWR Stale While Revalidate Pattern

• LAYOUT: چیدمان تک ستونه LAYOUT: Single Column Layout

• LAYOUT: چیدمان دو ستونه (Split Screen) LAYOUT: Two-Column Layout (Split Screen)

• LAYOUT: چیدمان سه ستونه LAYOUT: Three-Column Layout

• LAYOUT: چیدمان Holy Grail LAYOUT: Holy Grail Layout

• LAYOUT: چیدمان شبکه‌ای (Grid Layout) LAYOUT: Grid Layout

• LAYOUT: چیدمان پشته‌ای (Stack Layout) LAYOUT: Stack Layout

• LAYOUT: چیدمان با هدر و فوتر ثابت LAYOUT: Fixed Header and Footer Layout

• LAYOUT: چیدمان داشبورد (هدر، فوتر، بدنه، سایدبارها) LAYOUT: Dashboard Layout (Header, Footer, Main, Sidebars)

• LAYOUT: چیدمان Masonry LAYOUT: Masonry Layout

• LAYOUT: چیدمان ریسپانسیو LAYOUT: Responsive Layout

• STYLING: استایل‌های Inline STYLING: Inline Styles

• STYLING: CSS Modules STYLING: CSS Modules

• STYLING: Styled Components STYLING: Styled Components

• STYLING: الگوی تم‌بندی (Theming) STYLING: Theming Pattern

• STYLING: الگوی استایل‌های سراسری STYLING: Global Styles Pattern

• STYLING: CSS در JS (Emotion, Stitches و غیره) STYLING: CSS-in-JS (Emotion, Stitches, etc.)

• MODAL POPUP: الگوی ساده پاپ‌آپ خالص React MODAL POPUP - Simple Pure React Popup Pattern

• MODAL POPUP: پاپ‌آپ مودال با استفاده از ReactDOM CreatePortal MODAL POPUP - Modal Popup using ReactDOM CreatePortal

• MODAL POPUP: بهبود پاپ‌آپ مودال ReactDOM MODAL POPUP - Improving our ReactDOM Modal Popup

• MODAL POPUP: افکت انیمیشن پاپ‌آپ مودال MODAL POPUP - Modal Popup Animation Effect

• STATE MANAGEMENT: وضعیت محلی کامپوننت (useState, useReducer) STATE MANAGEMENT - Local Component State (useState, useReducer)

• STATE MANAGEMENT: انتقال وضعیت به بالا (Lift State Up) STATE MANAGEMENT - Lift State Up

• STATE MANAGEMENT: الگوی Global Context STATE MANAGEMENT - Global Context Pattern

• REACT FORMS: فرم‌های Uncontrolled در مقابل Controlled REACT FORMS - Uncontrolled versus Controlled Forms

• REACT FORMS: الگوی فرم Async REACT FORMS - Async Form Pattern

• REACT FORMS: الگوی اعتبارسنجی دستی فرم REACT FORMS - Manual Form Validation Pattern

• REACT FORMS: اعتبارسنجی فرم با هوک‌های سفارشی REACT FORMS - Form Validation with Custom Hooks

• REACT FORMS: اعتبارسنجی فرم‌های چند مرحله‌ای (MultiStep) REACT FORMS - MultiStep Form Validation

• REACT FORMS: وضعیت سراسری فرم با استفاده از Context REACT FORMS - Form Global State using Context

• ERRORS: Error Boundaries ERRORS: Error Boundaries

• ERRORS: هوک سفارشی برای مدیریت خطا ERRORS: Custom Hook for Error Handling

**پروژه جایزه** ساخت وب‌سایت تجاری کامل از صفر (React Router / AGGrid) ** BONUS PROJECT** Full commercial website from scratch - React Router / AGGrid

• ساختاربندی پروژه Scaffolding the project

• مقدمه‌ای بر React Router Intro to React Router

• React Router: مدیریت خطای ۴۰۴ (یافت نشد) React Router - Handling 404 Not Found

• مقدمه‌ای بر AGGrid React Data Grid Intro to AGGrid React Data Grid

• شبیه‌سازی API با JSON Mocking API with JSON

• چالش: اتصال (Binding) نویسندگان CHALLENGE - Get Authors Binding

• راه حل چالش: اتصال نویسندگان CHALLENGE SOLUTION - Get Authors Binding

• ** React Router ** پارامترهای پویا در URL و رندرهای سفارشی سلول AGGrid ** React Router ** - Dynamic URL Parameters, AGGrid custom cell renders

• استفاده از Async / Await / Promise / Then برای GetRecordById Books Using Async / Await / Promise / Then for GetRecordById Books

• استفاده از GetRecordById برای AuthorBook GetRecordById-AuthorBook

• راه حل چالش استفاده از Async Using Async - Challenge Solution

• استفاده از Promise: Resolve / Reject Using Promise - Resolve / Reject

• باکس ورودی ویرایش نویسنده Edit Author Input Box

• کنترل نویسنده: مدیریت رویداد Author Control - Handle Event

• به‌روزرسانی نویسنده: Prevent Default Updating Author - Prevent Default

• ایجاد / ویرایش نویسنده Create / Edit Author

• حذف نویسنده Delete Author

• تغییر جایگاه دکمه ایجاد Move Create Button

• اصلاح دکمه ایجاد Fix Create Button

• بازگشت به لیست نویسندگان Navigate back to Authors

• مقدمه‌ای بر MirageJS Intro to MirageJS

• MirageJS: تنظیم Routeها MirageJS - Route Setup

ساخت وب‌سایت تجاری: شبیه‌سازی داده‌ها با MirageJS و FakerJS Build a commercial website - Mocking Data using MirageJS and FakerJS

• MirageJS: دریافت نویسنده بر اساس ID MirageJS - GetAuthorById

• MirageJS: عملیات CRUD (ایجاد و به‌روزرسانی) MirageJS - CRUD operations - Create and Update

• MirageJS: عملیات CRUD (حذف) MirageJS - CRUD operations - Delete

• بازنویسی (Refactor): BindCallApi Doing a refactor - BindCallApi

• بازنویسی (Refactor): FakeApi Doing a refactor - FakeApi

• بازنویسی (Refactor): Fetcher Doing a refactor - Fetcher

• بازنویسی (Refactor): اتصال جزئیات نویسنده Doing a refactor - Binding the Author Detail

• MirageJS: مقداردهی اولیه (Seeding) پایگاه داده MirageJS - Seeding the Database

• MirageJS: مقداردهی اولیه رکوردهای نویسنده MirageJS - Seeding the author records

• MirageJS: مقداردهی اولیه رکوردهای کتاب MirageJS - Seeding the book records

• ویرایش رکورد نویسنده Editing the author record

• MirageJS: روابط (Relationships) MirageJS - Relationships

• نمایش کتاب‌ها در صفحه نویسندگان Display Books on Authors Page

• بازنویسی کامپوننت کتاب‌ها Refactor - Books Component

• ساخت داده‌های جعلی با FakerJS Faking Data with FakerJS

• FakerJS: فکتوری‌های مجزا FakerJS - Separate Factories

• FakerJS: فکتوری کتاب‌ها FakerJS - Books Factory

ساخت وب‌سایت تجاری از صفر: افزودن کتابخانه Material UI Build a commercial website from scratch - Adding Material UI - MUI Library

• نصب و مقدمه‌ای بر کتابخانه MUI Installing and Intro to MUI UI library

• Material UI: App Bar Material UI - App Bar

• ورودی‌های آیتم App Bar App Bar Item Entries

• آیکون‌های آیتم App Bar App Bar Item Icons

• نمایش عمودی آیتم‌های App Bar App Bar Items as Vertical

• اصلاح فاصله (gap) در App Bar Fix the App Bar gap

• ترکیب MUI و React Router MUI and React Router

• پیاده‌سازی ویرایش کتاب‌ها Implementing the editing of books

• استفاده از ForwardRef با React Router Using ForwardRef with React Router

• Material UI: نویسندگان و کتاب‌ها Material UI - Authors and Books

• لینک‌ها به نویسندگان Links to Authors

• شبکه (Grid) برای نویسندگان و کتاب‌ها Grid for Authors and Books

• صفحه جزئیات نویسنده Author Detail Page

• TextFieldهای صفحه جزئیات نویسنده Author Detail - TextFields

• Material UI: پیاده‌سازی BreadCrumb Material UI - Implementing a BreadCrumb

• اصلاح Breadcrumb Fixing Breadcrumb

• اصلاح Breadcrumb برای نویسندگان و کتاب‌ها Fixing Breadcrumb - Authors and Books

• نمایش رکورد در Breadcrumb Breadcrumb - Showing the record

• Material UI: ساخت کنترل‌هایی برای ویرایش رکورد Material UI - Making controls for editing record

• Material UI: ساخت آیکون دکمه‌ها Material UI - Making button icons

• Material UI: ساخت سایر کنترل‌ها Material UI - Making other controls

• Material UI: ساخت کنترل انتخاب تاریخ (date picker) Material UI - Making date picker control

• Material UI: ساخت کنترل‌های استایل آکاردئونی Material UI - Making accordion style controls

• بازنویسی فرم ویرایش در یک کامپوننت مجزا Refactoring Edit Form into separate component

• فعال‌سازی فرم ذخیره Getting the Save form working

• بهبود عملیات ذخیره بر اساس اصول SOLID Making the Save more SOLID

• پیاده‌سازی AutoSuggest Implementing AutoSuggest

• پیاده‌سازی رکوردهای Thin و Fat Implementing Thin and Fat Records

• Material UI: پیشرفت در AutoSuggest Material UI - Progress on AutoSuggest

• Material UI: استفاده از Dialog برای تایید حذف کتاب Material UI - Using Dialog to delete a book confirmation

• Material UI: استفاده از Snackbar و Alert برای ذخیره و حذف موفق Material UI - Snackbar and Alert for successful saving and deletion

**جایزه** نکات و ترفندهای جاوا اسکریپت (در حال تکمیل) ** BONUS ** Javascript Tips & Tricks (In Progress)

• مقایسه ۳ تابع رشته‌ای مشابه: Slice, Substring, Substr 3 Similar String Functions - Slice, Substring, Substr. What are the differences?

• توضیح تابع Bind Bind Function Explained

• ده تابع مفید رشته‌ای که باید بدانید 10 Useful String Functions You Should Know

**جایزه** مقدمات TypeScript (در حال تکمیل) ** BONUS ** Typescript Primer (In Progress)

• مقدمه‌ای بر دوره جامع TypeScript Intro to Typescript Primer Course

• انواع اولیه در TypeScript: Number, String, Boolean Primitives in Typescript - Number, String and Boolean

• آرایه‌ها و Tupleها Arrays and Tuples

• توابع تایپ‌شده، پارامترهای اختیاری و پیش‌فرض Typed Functions, Optional and Default Parameters

• تایپ‌های Union و Intersection Union and Intersection Types

• Enumها و Literal Types Enums and Literal Types

• کوییز: Enumها و Literal Types QUIZ - Enums and Literal Types

• Type Aliases و Interfaceها Type Aliases and Interfaces

• استنتاج تایپ (Type Inference) در مقابل تایپ‌های صریح Type Inference Versus Explicit Types

• توابع Arrow با تایپ Arrow Functions with Types

• آبجکت‌های تایپ‌شده تو در تو (Nested) Nested Typed Objects

• تایپ‌های Generic Generic Types

• تایپ‌های Mapped: Partial, Required, Readonly, Pick, Record Mapped Types: Partial, Required, Readonly, Pick, Record

• تایپ‌های شرطی: Extends و Infer Conditional Types: Extends and Infer

• Type Guards و Narrowing: instanceOf, typeOf Type Guards and Narrowing - instanceOf, typeOf

• Discriminated Unions Discriminated Unions

• وراثت کلاس‌ها در TypeScript با Extends Class Inheritance in Typescript with Extends

• اصلاح‌کننده‌های دسترسی کلاس (Access Modifiers) Class Access Modifiers

• اصلاح‌کننده دسترسی Protected Protected Access Modifier

• توابع به عنوان تایپ و Callbackها Functions as Types and Callbacks

• متدها و ویژگی‌های استاتیک (Static) Static Methods and Properties

• ویژگی‌ها و متدهای استاتیک Static Properties and Methods