آموزش React Masterclass 2025: ساخت 3 پروژه در دنیای واقعی

درس ها Lessons

• تمرین دریافت سفارش کاربران Exercise Getting Users Order

• مدیریت خطا و بارگیری Error Handling & Loading

• معرفی React Masterclass React Masterclass Introduction

• اضافه کردن MongoDB Cloud Adding MongoDB Cloud

• راه حل به روز رسانی فروشنده Solution Updating the Seller

• بخش 02 JavaScript ES7 Refresher Section 02 JavaScript ES7 Refresher

• تمرین ایجاد زمینه سبد خرید Exercise Creating Cart Context

• واکشی داده های فروشندگان Fetching Sellers Data

• درک useMemo hook Understanding useMemo hook

• صفحه محصول ساخت Building Product Page

• اسکرول بی نهایت در React Query Infinite Scrolling in React Query

• تمرین برای MovieCard Exercise for MovieCard

• در حال تولید کلید API Generating the API key

• بخش 16 قلاب های مدیریت عملکرد و کد Section 16 Performance & Code Management Hooks

• راه حل این تمرین Solution of this exercise

• واکشی محصولات Fetching Products

• رسیدگی به فرم با استفاده از قلاب Ref Handling Form using Ref hook

• راه اندازی پروژه و سبک طرح Setting up project & Layout style

• نحوه استفاده از useCallback hook در React How to use useCallback hook in React

• اعتبار سنجی فرم بر اساس طرحواره Form Validation based on Schema

• واکشی داده با استفاده از useQuery Fetching Data using useQuery

• اپراتورهای سه تایی Ternary Operators

• صادرات به عنوان پیش فرض Export as Default

• اضافه کردن سوئیچ برای حالت تاریک نور Adding Switch for Dark Light Mode

• مدیریت فرم با React Hook Form Managing form with React Hook Form

• حذف فروشنده Deleting the Seller

• رشته پرس و جو Query String

• ایجاد کامپوننت برچسب Creating Tag Component

• پیاده سازی ویژگی فیلتر Implementing Filter Feature

• در حال به روز رسانی درخواست getCart Updating getCart Query

• فیلتر در مقابل مرتب سازی Filter vs Sort

• اضافه کردن سبک برای مؤلفه فرم Adding styles for form component

• اصلاح مؤلفه صفحه سبد خرید Modifying Cart Page Component

• اتصال صفحه ورود با API Connecting Login Page with API

• تمرین برای SubTotal Exercise for SubTotal

• روش انحرافی برای دریافت پیشنهاد Debouncing method for getting suggestion

• ترفند میانبر برای رسیدگی به فرم Shortcut trick to handle form

• در حال آماده سازی برنامه React ما برای استقرار Preparing our React application for deployment

• بخش 18 بهبود عملکرد وب سایت با React Query Section 18 Improving website performance with React Query

• دریافت کاربر از Token Getting User from Token

• فرم دسته Handle Form

• ساخت جزء خود Building own component

• افزودن پیوندهای نوار ناوبری Adding Navbar Links

• API چیست What is an API

• ایجاد قلاب سفارشی با React Query Creating custom hook with React Query

• تمرین برای مسیریابی Exercise for Routing

• درک userRef قلاب Understanding useRef hook

• نوشتن کد از ابتدا Writing Code from Scratch

• پیاده سازی مسیریابی در برنامه ما Implementing Routing in our Application

• صفحه بندی Pagination

• حذف اقلام از سبد خرید Removing Items From Cart

• ایجاد جزء جدول مشترک Creating Common Table Component

• پیشنهاد خودکار در نوار جستجو Auto Suggestion in Search bar

• واکشی دسته ها Fetching Categories

• ناوبری برنامه نویسی Programmatically Navigation

• ایجاد مولفه واحد محصول Creating Single Product Component

• افزودن مسیریابی به پروژه 02 Adding Routing to Project 02

• مدیریت ورودی های کاربر Handling user inputs

• ساخت مؤلفه فهرست فیلم Building MovieList Component

• ایجاد بخش فیلتر قابل استفاده مجدد Creating Resuable Filter Section

• واکشی محصولات بر اساس دسته بندی Fetching products by category

• یک API کاربر جدید ثبت کنید Register a new user API

• اقدامات پیچیده برای کاهش دهنده Complex Actions for Reducer

• فراخوانی افزودن به سبد خرید API Calling Add to Cart API

• ایالت چیست What is State

• نمایش برچسب انتخاب شده در رابط کاربری Display selected tag on UI

• بخش 07 - ویژگی های فیلتر، مرتب سازی و حالت تاریک Section 07 - Filtering, Sorting & Dark Mode Features

• راه حل این تمرین Solution of this exercise

• تمرین صفحه محصول واحد Exercise Single Product Page

• استفاده از قلاب کاهش دهنده useReducer hook

• نمایش پیشرفت در طول جهش Showing progress during mutations

• React Strict Mode React Strict Mode

• بخش 12 اتصال به Backend Section 12 Connection to the Backend

• کد را ساده کنید Simplify the code

• اسکرول بی نهایت Infinite Scrolling

• لیست های نقشه برداری Mapping Lists

• پارامترهای مسیر (useParams) Route Parameters (useParams)

• ساخت مؤلفه نوار ناوبری Building Navbar Component

• MongoDB & Compass را در ویندوز نصب کنید Install MongoDB & Compass in Windows

• ساخت جزء لیست وظایف Building Task List Component

• JSX و Babel چگونه کار می کنند How JSX and Babel works

• دسترسی به اشیا Accessing the objects

• درک استفاده از قلاب برگشت تماس Understanding useCallback hook

• var، let و const var, let and const

• حذف تک کار Deleting Single Task

• ایجاد بخش لیست محصولات Creating Product List Section

• درک ویژگی افزودن به سبد خرید Understanding Add to Cart Feature

• به صورت محلی به سبد خرید اضافه کنید Add To Cart Locally

• متشکرم! Thank you!

• فراخوانی API برای پرداخت Calling API for Checkout

• ورزش برای کاهش دهنده Exercise for Reducer

• پیاده سازی حالت تاریک Dark Mode Implementation

• ساخت مؤلفه TaskCard Building TaskCard Component

• مسیریابی تودرتو Nested Routing

• ساخت React Application Creating React Application

• اضافه کردن فونت های سفارشی Adding custom fonts

• راه اندازی پروژه و سبک طرح Setting up Project & layout style

• رسیدگی به فرم با استفاده از قلاب حالت Handling Form using State hook

• بخش 05 افزودن عملکرد در پروژه 1 Section 05 Adding Functionality in Project 1

• مدیریت خطا در جهش Handling Error in Mutation

• استقرار React Application Deploying React Application

• نمایش کارت های وظیفه Displaying the Task Cards

• راه حل این تمرین Solution for this exercise

• نحوه آپلود پروژه ها در github How to upload projects on github

• فرم ورود ساختمان Building Login Form

• پویا کردن کارت محصول Making Product Card Dynamic

• فروشندگان را حذف و به روز کنید Delete and Update Sellers

• React چیست؟ What is React?

• بسته به کاربر، نمایش مؤلفه را پنهان کنید Hide Show Component depending upon User

• پیاده سازی ویژگی مرتب سازی Implementing Sorting Feature

• راه اندازی پروژه جدید Setting up new project

• React Query چیست و چرا به آن نیاز داریم What is React Query and Why we need it

• به روز رسانی خوش بینانه در React Query Optimistic update in React Query

• افزودن فروشنده جدید Adding New Seller

• Calling Protected API Calling Protected API

• راه اندازی React Query در پروژه ما Setting up React Query in our Project

• استفاده از قلاب Mutation برای Mutation useMutation hook for Mutation

• افزودن بخش جزئیات برای صفحه محصول Adding Details Section for Product Page

• رسیدگی به خطاها Handling Errors

• افزودن به سبد خرید در کارت محصول Add to Cart in Product Card

• بیایید قالب React را درک کنیم Let's understand the React template

• راه اندازی محیط توسعه Setup Development Environment

• ایجاد کارت محصول Creating Product Card

• پیمایش برای پیشنهاد خودکار Navigation for Auto Suggestion

• بخش 17 Master React-Query Section 17 Master React-Query

• جهش برای افزایش و کاهش Mutation for Increase and decrease

• رسیدگی به خطاها برای ثبت نام Handling Errors for Signup

• بخش 14 فراخوانی APIها و مسیرهای محافظت شده Section 14 Calling Protected APIs & Routes

• راه اندازی پروژه Setting up Project

• ایجاد قلاب سفارشی Fetching Creating Fetching Custom hook

• ایجاد مسیرهای محافظت شده Creating Protected Routes

• بررسی اجمالی و برنامه ریزی پروژه Project Overview and Planning

• کامپوننت صفحه سبد خرید Building Cart Page Component

• واکشی سبد کاربر از Backend Fetching User Cart From Backend

• ساخت مؤلفه MovieCard Building MovieCard Component

• اضافه کردن فونت های سفارشی Adding Custom Fonts

• راه اندازی Backend Setting up backend

• ساختن مولفه MovieList قابل استفاده مجدد Making MovieList component Reusable

• اشکال زدایی برنامه React Debugging React Application

• اضافه کردن نشانگر بارگذاری Adding Loading Indicator

• پیاده سازی عملکرد خروج Implementing Logout Functionality

• واکشی داده های فروشندگان Fetching Sellers data

• بخش 15 رفع برخی از مسائل Section 15 Fixing Some Issues

• بخش 11 فرم پیش پرداخت Section 11 Advance Form

• ایجاد رابط کاربری صفحه بندی Creating Pagination UI

• بخش 13 احراز هویت و مجوز Section 13 Authentication & Authorization

• ایجاد کامپوننت Task Form Creating Task Form Component

• استفاده از حالت هوک useState Hook

• افزودن صفحه یافت نشد Adding not found page

• افزودن React Query DevTools Adding React Query DevTools

• مدیریت آپلود تصویر Handling Image upload

• جهش برای افزودن به سبد خرید Mutation for Add to Cart

• مرتب سازی لیست محصولات Sorting Product List

• استفاده از قلاب اثر با جزئیات useEffect hook in detail

• آیا واقعاً به React Query نیاز دارید؟ Do you really need React Query

• افزودن عناصر در کامپوننت ها Adding Elements in Components

• تمرین برای فرم ها Exercise for Forms

• useContext hook useContext hook

• اپراتور گسترش Spread Operator

• JWT چیست و چگونه کار می کند What is JWT & How it works

• اصول اولیه درخواست های HTTP Basics of HTTP Requests

• ساخت مؤلفه نوار ناوبری Building Navbar Component

• Props در React Props in React

• آغاز استقرار Beginning of Deployment

• تابع پیکان Arrow Function

• عبارت جاوا اسکریپت در JSX JavaScript expression in JSX

• تخریب شی Object Destructuring

• اتصال صفحه ثبت نام با API Connecting Signup Page with API

• روش فیلتر Filter Method

• ماژول ها در جاوا اسکریپت Modules in JavaScript

• واکشی محصولات با پرس و جوی جستجو Fetching Products by Search Query

• فراخوانی API با استفاده از روش Fetch Calling API using Fetch method

• جهش برای حذف از سبد خرید Mutation for Remove from Cart

• پیاده سازی Infinite Query Implementing Infinite Query

• تمرین برای استفاده از قلاب برگشت تماس Exercise for useCallback hook

• اتمام پروژه 01 Wrapping up Project 01

• ساخت اپلیکیشن تک صفحه ای Making Single Page Application

• روش نقشه Map method

• آیا باید حافظه پنهان را در AutoSuggestions اضافه کنیم Should we add caching in AutoSuggestions

• Promise with async در انتظار Promise with async await

• تعریف پارامتر مسیر برای تک فیلم Defining Route Parameter for Single Movie

• افزایش و کاهش مقدار محصول Increase and decrease product quantity

• بخش قهرمان ساختمان Building Hero Section

• انتخاب برچسب Tag Selection

• افزودن بخش محصولات ویژه Adding Featured Products Section

• بخش 08 React Routing Section 08 React Routing

• بخش 03 مفاهیم اساسی واکنش نشان دهید Section 03 React Basic Concepts

• قلاب سفارشی برای AddSellers Mutation Custom hook for AddSellers Mutation

• وابستگی های useEffect Dependencies of useEffect

• بخش 10 - پروژه 03 برنامه تجارت الکترونیک Section 10 - Project 03 E-commerce Application

• ویژگی های React Query ما را سفارشی کنید Customize our React Query Properties

• واکشی محصولات ویژه Fetching Featured Products

• مدیریت انتخاب مرتب سازی Handling Sorting Selection

• تمرین برای واکشی داده ها Exercise for Fetching Data

• اضافه کردن اسکلت بارگیری Adding Loading skeleton

• سبک دادن به مؤلفه MovieCard Styling the MovieCard Component

• ایجاد طرح بندی وب سایت Creating the website layout

• وارد API کاربر شوید Login a user API

• اعتبار سنجی فرم Form Validation

• تمرین برای فراخوانی API Exercise for calling API

• رویدادها در React Events in React

• افزودن مسیریابی برای برنامه React Adding Routing for React Application

• عملکرد پاکسازی useEffect useEffect clean up function

• معرفی React Hooks Introduction of React Hooks

• صفحه بندی در React Query Pagination in React Query

• به صفحه محافظت شده قبلی تغییر مسیر دهید Redirect to previous protected page

• راه حل این تمرین Solution of this Exercise

• استقرار Backend Deploying Backend

• درک پارامترهای Query در React Query Understanding Query Params in React Query

• تنظیم ویژگی ها در عناصر Setting attributes in elements

• راه حل این تمرین Solution for this exercise

• اصول استفاده از قلاب اثر Basics of useEffect hook

• بخش 09 فراخوانی یک API Section 09 Calling an API

• راه اندازی React Query Setting up React Query

• بخش 06 پروژه 02 - MovieManiac Section 06 Project 02 - MovieManiac

• راه حل این تمرین Solution of this exercise

• بخش 19 استقرار Section 19 Deployment

• ذخیره سازی JWT پس از ورود و ثبت نام Storing the JWT after Login & Signup

• بخش 04 ایجاد اولین پروژه در React Section 04 Creating First Project in React

• ایجاد متغیر axios برای درخواست های HTTP Creating axios variable for HTTP Requests