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

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

خوش‌آمدگویی و سلام ری‌اکت Welcome and Hello React

• خوش‌آمدگویی Welcome

• چرا باید ری‌اکت یاد بگیریم؟ Why should you learn React?

• بهره‌برداری حداکثری از دوره Get most out of the course

• دموی پروژه نهایی Final Project Demo

• منابع پروژه Project Resources

• نصب Visual Studio Code Install Visual Studio Code

• نصب Node JS Install Node JS

• ایجاد پروژه Create Project

• مرور فایل‌ها و پوشه‌ها Files and Folder Overview

• حالت Strict Mode strict mode

• نحوه اتصال در ری‌اکت How React binds

• ماهیت Declarative ری‌اکت React is declarative

• توابع در ری‌اکت Function in React

• جدا کردن Root Seperating out Root

• کامپوننت‌های ری‌اکت React Component

• نصب Prettier Prettier

• کامپوننت والد و فرزند Parent Child Component

• تمرین ۱: کامپوننت‌ها Assignment 1 - Components

مبانی جاوا اسکریپت JavaScript Fundamentals

• فایل پایه جاوا اسکریپت Basic Javascript File

• متغیرها Variables

• درون‌یابی رشته‌ها (String interpolation) String interpolation

• توابع Arrow Function Arrow Functions

• عملگر REST REST Operator

• عملگر Spread Spread Operator

• مفاهیم Truthy و Falsy Truthy and Falsy

• متدهای Find و Find Index Find and Find Index

• متد Filter Filter

• متد Sort Sort

• متدهای ForEach و Map ForEach and Map

• استفاده از Map در آرایه‌ای از اشیاء Map in array of objects

• مفاهیم Mutable و Immutable Mutable and immutable

ری‌اکت و استایل‌ها React and Styles

• تغییر پروژه Change Project

• استایل‌ها در ری‌اکت Styles in React

• اشیاء استایل (Style Objects) Style Objects

• کلاس‌ها در جاوا اسکریپت Class in Javascript

• وارد کردن فایل CSS در ری‌اکت Importing CSS Stylesheet in React

• متغیرها در JSX Varaibles in JSX

• متغیرهای بیشتر و تمرین ۲ More variables and Assignment 2

• ورودی‌ها (Input) و ری‌اکت Input and React

• محل ذخیره تصاویر در ری‌اکت Where to store image in react

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

• تمرین ۲: جداسازی کامپوننت‌ها Assignment 2 - Seperating Components

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

• تفاوت Named export و Default export Named vs default export

• نمایش تصویر برای دانشجو Display Image for Student

• تمرین ۳: جداسازی کامپوننت‌ها Assignment 3 - Seperating Component

• پاسخ تمرین ۳: جداسازی کامپوننت‌ها Assignment 3 Solution - Seperating Components

• ارسال مقدار به کامپوننت فرزند Passing value to child component

• تمرین ۴: Props Assignment 4 - Props

• ارسال کامپوننت به عنوان Children Passing component as children

• توابع Arrow Arrow functions

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

• تمرین ۵: ایجاد پروژه ری‌اکت Assignment 5 - Create react project

• پاسخ تمرین ۵: ایجاد پروژه Assignment 5 Solution - Create Project

• افزودن Bootstrap و تصاویر Add Bootstrap and Images

• کامپوننت Header و Footer Header and Footer Component

• کامپوننت شمارنده (Counter) Counter Component

• استفاده از OnClick داخلی Inline OnClick

• عدم به‌روزرسانی شمارنده در UI Count is not updating in the UI

• تعریف State Define State

• به‌روزرسانی State Updating State

• بهترین روش‌ها برای مدیریت State Best Practices for State

• به‌روزرسانی‌های UI UI Updates

• توابع Random play و reset Random play and reset

• تمرین ۶: State Assignment 6 - State

• پاسخ تمرین ۶: State Assignment 6 Solution - State

• مشکلات به‌روزرسانی Stateهای تودرتو Nested state update is bad

• هوک useEffect useEffect Hook

• رندرینگ شرطی (Conditional Rendering) Conditional Rendering

• اشیاء پیچیده برای State Complex state object

• پیچیدگی‌های استفاده از شیء در State Complexity with state as object

پروژه ContactOPedia ContactOPedia

• راه‌اندازی پروژه Project Setup

• لیست مخاطبین Contact List

• طراحی Layout UI Layout

• کامپوننت مخاطبان مورد علاقه Favorite Contact Component

• طراحی UI ایندکس مخاطبین Contact Index UI

• رندر کردن چندباره کامپوننت مخاطب Rendering contact component multiple times

• اطلاعات دینامیک مخاطبین Dynamic Contact Information

• تمرین ۶: مخاطب عمومی Assignment 6 - General Contact

• پاسخ تمرین ۶: مخاطب عمومی Assignment 6 Solution - General contact

• رنگ دکمه مورد علاقه Favorite button color

• عدم امکان به‌روزرسانی props توسط فرزند Child component cannot update props

• فراخوانی تابع والد از طریق فرزند Calling function of parent component from child component

• پیاده‌سازی قابلیت مورد علاقه Favorite in Action

• تمرین ۷: حذف مخاطب Assignment 7 - Delete Contact

• پاسخ تمرین ۷: حذف مخاطب Assignment 7 Solution - Delete Contact

• طراحی UI فرم افزودن مخاطب Add Contact Form UI

• مدیریت ارسال فرم (Submit) Handle Form Submit

• داده‌های فرم (Form Data) Form Data

• استفاده از checkbox و radio button در فرم FormData checkbox and radio button

• قابلیت Actions در ری‌اکت ۱۹ Actions in React 19

• افزودن State برای پیام‌ها Add state for messages

• پیاده‌سازی عملی افزودن مخاطب Add Contact in Action

• پیام‌های خطا و موفقیت Error and Success Message

• اعتبارسنجی فرم‌ها Form Validations

• مفهوم Prop Drilling Prop Drilling

درخواست‌های API در ری‌اکت API Calls in React

• کامپوننت‌های کنترل‌شده (Controlled Component) Controlled Component

• تمرین ۸: حذف همه مخاطبین Assignment 8 - Remove all contacts

• پاسخ تمرین ۸: حذف همه مخاطبین Assignment 8 Solution - Remove all contact

• تمرین ۹: رفع باگ Assignment 9 - Bug

• به‌روزرسانی مخاطب - بخش اول Update Contact Part 1

• دکمه لغو و تمرین ۱۰ Cancel button and assignment 10

• پاسخ تمرین ۱۰: پیاده‌سازی دکمه لغو Assignment 10 - Cancel button in Action

• نمایش جزئیات مخاطب برای ویرایش Show contact details to update

• به‌روزرسانی مخاطب - بخش دوم Update Contact Part 2

• بهترین روش‌های پیاده‌سازی Best Practices

• توابع کمکی برای فراخوانی API Utility to call API

• پیاده‌سازی عملی فراخوانی API Calling API in action

• فرمت‌دهی کاربر Format User

• کار با axios axios

• افزودن مخاطب تصادفی Add random contact in action

چرخه حیات ری‌اکت (Lifecycle) React Lifecycle

• ایجاد پروژه Create Project

• تنظیمات پایه Basic setup

• استفاده از useEffect هنگام لود UseEffect on load

• useEffect و پاک‌سازی (Clean up) UseEffect and clean up

• مانیتور کردن ویژگی‌ها با useEffect Watching property with useEffect

• به‌روزرسانی‌های اولین رندر First Render Updates

• دسترسی به المان‌های DOM Access DOM Element

• ردیابی تعداد کل رندرها Track total renders

• ردیابی مقدار قبلی با useRef Tracking previous value with useRef

• تغییر نام پروژه Rename Project

مسیریابی (Routing) 8 Routing

• ایجاد پروژه Create Project

• پاک‌سازی کدها Clean Up

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

• افزودن نوار ناوبری (Navbar) Add Navbar

• افزودن Browser Router Add Browser Router

• پیاده‌سازی عملی مسیریابی Routing in Action

• لینک‌های ناوبری (Navigation Links) Navigation Links

• ناوبری برنامه‌نویسی شده (Programmatic) Programmatic navigation

• تمرین ۱۱: افزودن لینک Assignment 11 - Add Link

• پاسخ تمرین ۱۱: افزودن لینک Assignment 11 Solution - Add Link

• صفحه یافت نشد (Not Found) Not Found

• صفحه لیست محصولات Product List Page

• نمایش همه محصولات Show all products

• ناوبری دینامیک Dynamic navigation

• فیلتر محصولات بر اساس پارامترها Filter product based on params

• صفحات مسیریابی تودرتو Nested Routing Pages

• مسیرهای تودرتو (Nested Routes) Nested Routes

• پیاده‌سازی عملی مسیرهای تودرتو Nested Routes in Action

• پیاده‌سازی عملی کامپوننت‌های تودرتو Nested components in action

• بازگشت به صفحه قبلی Back to previous page

• مسیرهای نسبی (Relative routes) Relative routes

مسیرهای محافظت‌شده 9 Protected Routes

• افزودن کامپوننت ورود (Login) Add Login component

• شبیه‌ساز ورود (Fake Login) Fake Login

• توابع کمکی احراز هویت Auth Utility

• کمک‌های کاربردی بیشتر More utility helper

• پیاده‌سازی عملی خروج (Logout) Logout in action

• مسیر محافظت‌شده (Protected Route) Protected Route

• مسیریابی بر اساس نقش کاربر Role based routing

• تغییر مسیر پس از ورود Redirect on login

• تمرین ۱۲: تغییر مسیرها بر اساس دسترسی Assignment 12 - Toggle Routes based on access

• پاسخ تمرین ۱۲: تغییر مسیرها و نمایش دینامیک Assignment 12 Solution - Toggle routes and dynamic display

ردکس (Redux) 10 Redux

• ایجاد پروژه Create Project

• طراحی Layout اپلیکیشن App Layout

• معرفی Redux Toolkit Redux Toolkit

• افزودن Redux Store Add Redux Store

• ایجاد اولین Reducer و Actions Create first Reducer and Actions

• هوک UseSelector UseSelector Hook

• ارسال (Dispatch) اکشن از کامپوننت ری‌اکت Dispatching Action from React Component

• تمرین ۱۳: ضرب‌کننده شمارنده Assignment 13 - Counter Multiplier

• پاسخ تمرین ۱۳: ضرب‌کننده شمارنده Assignment 13 Solution - Counter Multiplier

• افزودن Destination Slice Add Destination Slice

• تمرین ۱۴: لیست مقاصد Assignment 14 - Destination List

• پاسخ تمرین ۱۴: لیست مقاصد Assignment 14 Solution - Destination List

• انتخاب مقصد Select Destination

• نمایش مقصد انتخاب شده Display selected destination

• تمرین ۱۵: ریست کردن اپلیکیشن Assignment 15 - Reset App

• پاسخ تمرین ۱۵: ریست کردن اپلیکیشن Assignment 15 Solution - Reset App

• گوش دادن به اکشن‌های یک Reducer دیگر Listen to action of a different reducer

• جلوگیری از استفاده از Magic Strings Say NO to magic strings

• اکشن‌های سفارشی (Custom Actions) Custom Actions

ابزار RTK Toolkit 11 RTK Toolkit

• ایجاد پروژه Create Project

• طراحی Layout پایه Basic Layout

• طراحی UI مقاصد Add Destination UI

• نصب Json Server Install Json Server

• ایجاد API مقاصد Create Destination API

• افزودن API Provider Add API Provider

• پیاده‌سازی عملی Endpoint دریافت Get Endpoint in Action

• افزودن اکشن فرم مقصد Add Destination Form Action

• افزودن Mutation Add Mutation

• فراخوانی POST Mutation Call POST Mutation

• کشینگ با RTK Query Caching with RTK Query

• استفاده از Tags Tags

• طراحی UI لیست مقاصد Destination List UI

• تمرین ۱۶: حذف مقصد Assignment 16 - Delete Destination

• دریافت ID مقصد جدید ID of new destination

• پاسخ کوئری و تبدیل داده‌ها (Transform) Response from query and transform

• جداسازی هر مقصد به صورت مجزا Seperating out Individual Destination

• تمرین ۱۷: قابلیت ویرایش Assignment 17 - Edit Funcationality

• تمرین ۱۷: قابلیت ویرایش - بخش اول Assignment 17 - Edit Functionality Part 1

• تمرین ۱۷: قابلیت ویرایش - بخش دوم Assignment 17 - Edit Functionality Part 2

• تمرین ۱۷: قابلیت ویرایش - بخش سوم Assignment 17 - Edit Functionality Part 3

• یکپارچه‌سازی RTK Query با Redux Store Integrate RTK Query with Redux Store

مرور و ارزیابی Checkpoint

• افزودن API مقصد تصادفی Add random destination API

• نمایش مقصد تصادفی در UI Add Random Destination on UI

• تقریباً تمام شد! Almost There!

راه‌اندازی پروژه Project Setup

• ایجاد پروژه Create Project

• نصب پکیج‌های Node Install node packages

• پاک‌سازی اپلیکیشن Application cleanup

• افزودن Bootstrap Add bootstrap

• ساختار پوشه‌بندی پایه Base folder structure

• هدر و فوتر Header and Footer

• افزودن مسیریابی Add Routing

• مسیریابی در کامپوننت هدر Routing in header component

• راه‌اندازی Firebase Setup Firebase

مدیریت محصولات Product Management

• راه‌اندازی API پایه برای Firebase Setup base API for firebase

• افزودن Endpoint برای محصولات Add Product API Endpoint

• تمپلیت‌های محصول Product Templates

• مدیریت مودال (Toggle modal) Toggle modal

• کامپوننت‌های فرم کنترل‌شده Controlled form components

• مدیریت وضعیت isLoading Toggle isLoading

• پیاده‌سازی عملی اعتبارسنجی‌ها Validations in Action

• فراخوانی Mutation در Firebase Calling firebase mutation

• ثبت React Redux Provider Register react redux provider

• کوئری برای بازیابی محصولات Query to retrieve products

• پیاده‌سازی عملی ایجاد محصول Creating Product in action

• دریافت محصولات در کوئری Retrieving products in query

• جدول محصولات Product Table

• فیلتر کردن محصولات Filter Products

• ویرایش محصول - بخش اول Edit Product Part 1

• ویرایش محصول - بخش دوم Edit Product Part 2

• استفاده از Tags در کوئری Tags with query

• پیاده‌سازی عملی ویرایش محصول Edit Product in action

• افزودن Toast Notifications Add Toast Notifications

• افزودن طعم و موجودی به جدول محصولات Flavor and Stock in product table

• افزودن Mutation برای حذف محصول Add Mutation for deleting product

• حذف محصول Delete product

• استفاده از Sweetalert Sweetalert

• تصاویر Cloudinary Cloudinary Image

• توضیحات کوتاه Short description

صفحه اصلی 15 Home Page

• افزودن تمپلیت‌ها Add Templates

• فیلترها - بخش اول Filters Part 1

• فیلترها - بخش دوم Filters Part 2

• نمایش محصولات Display products

• طراحی UI صفحه اصلی Home page UI

• پیاده‌سازی عملی فیلترها Filters in action

• مدیریت نمایش جزئیات محصول Toggle product details

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

سبد خرید 16 Shopping Cart

• اسلایس سبد خرید و Local Storage Cart slice and local storage

• پیاده‌سازی عملی افزودن به سبد Add to cart in action

• تمپلیت‌های سبد خرید Cart templates

• آیتم‌های سبد و ابزارهای توسعه (DevTools) Cart items and devtools

• بارگذاری State از Local Storage Load state from local storage

• سبد خرید دینامیک Dynamic cart

• اکشن‌های سبد خرید Shopping cart actions

• فراخوانی اکشن‌های سبد خرید Calling cart actions

• تمرین: دیباگ کردن Assignment - Debugging

• نمایش تعداد سبد خرید در هدر Shopping cart count in header

• طراحی UI تسویه حساب (Checkout) Checkout UI

احراز هویت (Auth) 17 Auth

• سرویس ثبت‌نام Register Service

• سرویس ثبت‌نام - بخش دوم Register Service Part 2

• تمپلیت‌ها Templates

• طراحی UI ثبت‌نام - بخش اول Register UI Part 1

• اعتبارسنجی‌ها Validations

• پیاده‌سازی عملی ثبت‌نام Registeration in Action

• پاک‌سازی فرآیند ثبت‌نام Register cleanup

• افزودن Auth Slice Add auth slice

• مشاهده وضعیت Auth در Redux View Auth state in redux

• تغییر هدر بر اساس وضعیت احراز هویت Toggle header based on authentication

• اتصال Redux و احراز هویت Firebase Bridge redux and firebase authentication

• پیاده‌سازی عملی خروج Logout in action

• Mutation ورود (Login) Login mutation

• پیاده‌سازی عملی ورود Login in action

• نقش کاربر (Role) Role of the user

• مسیریابی بر اساس نقش - بخش اول Role based route part 1

• مسیریابی بر اساس نقش - بخش دوم Role based route part 2

• صفحات احراز شده Authenticated pages

• پاک‌سازی Authorization Authorization cleanup

• تغییر مسیر پس از ورود Redirect on login

سفارشات 18 Orders

• API سفارشات: ایجاد سفارش Order API - Create Orders

• Endpointهای API سفارشات Order API - Endpoints

• تمپلیت تأیید سفارش Order Confirmation Template

• ایجاد سفارش و تأییدیه Create order and order confirmation

• جدول سفارشات Order Table

• مدیریت سفارشات Order Management

• کلاس دینامیک و تمپلیت مودال Dynamic class and Modal template

• مدیریت مودال Toggle Modal

• جزئیات سفارش - بخش اول Order Details Part 1

• جزئیات سفارش - بخش دوم Order Details Part 2

• جزئیات سفارش - بخش سوم Order Details Part 3

• پیاده‌سازی عملی به‌روزرسانی سفارش Update order in action

• سفارشات من My orders

• تمرین نهایی Final Assignment

• پاسخ تمرین نهایی Final Assignment Solution

• تمپلیت‌های UI UI Templates

• رفع باگ‌های کوچک Small Bugs

• باگ تم (Theme) Theme bug

استقرار (Deployment) 19 Deployment

• استقرار در Vercel Vercel deployment