دوره Ultimate React 2024: React، Next.js، Redux و بیشتر - آخرین آپدیت

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

خوش آمدید، خوش آمدید، خوش آمدید! Welcome, Welcome, Welcome!

• نقشه راه دوره و پروژه ها Course Roadmap and Projects

• ساخت اولین برنامه React ما! Building Our First React App!

• قبل از شروع تماشا کنید! Watch Before You Start!

• قبل از شروع بخوانید! Read Before You Start!

• دانلود مطالب دوره Downloading Course Material

بخش 1: اصول واکنش [4 پروژه] PART 1: REACT FUNDAMENTALS [4 PROJECTS]

• مقدمه قسمت 1 Introduction to Part 1

• منابع مفید برای قسمت 1 Useful Resources for Part 1

اولین نگاه به React A First Look at React

• نمای کلی بخش Section Overview

• چرا فریمورک های فرانت اند وجود دارند؟ Why Do Front-End Frameworks Exist?

• React در مقابل Vanilla JavaScript React vs. Vanilla JavaScript

• React چیست؟ What is React?

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

• واکنش خالص Pure React

• نگاهی سریع به مستندات رسمی React A Quick Look at React's Official Documentation

• راه اندازی یک پروژه React جدید: گزینه ها Setting Up a New React Project: The Options

• راه اندازی یک پروژه با Create-React-App Setting Up a Project With Create-React-App

[اختیاری] بررسی جاوا اسکریپت ضروری برای React [Optional] Review of Essential JavaScript for React

• نمای کلی بخش Section Overview

• تخریب اشیاء و آرایه ها Destructuring Objects and Arrays

• اپراتور استراحت/گسترش Rest/Spread Operator

• الفاظ الگو Template Literals

• سه گانه به جای اظهارات if/else Ternaries Instead of if/else Statements

• توابع پیکان Arrow Functions

• اپراتورهای اتصال کوتاه و منطقی: &&، ||، ?? Short-Circuiting And Logical Operators: &&, ||, ??

• زنجیربندی اختیاری Optional Chaining

• روش نقشه آرایه The Array map Method

• روش فیلتر آرایه The Array filter Method

• روش کاهش آرایه The Array reduce Method

• روش مرتب سازی آرایه The Array sort Method

• کار با آرایه های تغییرناپذیر Working With Immutable Arrays

• جاوا اسکریپت ناهمزمان: وعده ها Asynchronous JavaScript: Promises

• جاوا اسکریپت ناهمزمان: Async/Await Asynchronous JavaScript: Async/Await

کار با Component ها، Props و JSX Working With Components, Props, and JSX

• نمای کلی بخش Section Overview

• رندر کردن کامپوننت ریشه و حالت سخت Rendering the Root Component and Strict Mode

• قبل از شروع کدنویسی: اشکال زدایی Before We Start Coding: Debugging

• اجزاء به عنوان بلوک های ساختمانی Components as Building Blocks

• ایجاد و استفاده مجدد از یک کامپوننت Creating And Reusing a Component

• JSX چیست؟ What is JSX?

• ایجاد اجزای بیشتر Creating More Components

• منطق جاوا اسکریپت در کامپوننت ها JavaScript Logic in Components

• تفکیک نگرانی ها Separation of Concerns

• برنامه های Styling React Styling React Applications

• پاس و دریافت لوازم Passing and Receiving Props

• Props، Immutability، و یک طرفه جریان داده Props, Immutability, and One-Way Data Flow

• چالش شماره 1: کارت نمایه (نسخه 1) CHALLENGE #1: Profile Card (v1)

• قوانین JSX The Rules of JSX

• رندر لیست ها Rendering Lists

• رندر شرطی با && Conditional Rendering With &&

• رندر مشروط با ترناری Conditional Rendering With Ternaries

• رندر شرطی با بازگشت های متعدد Conditional Rendering With Multiple Returns

• استخراج JSX در یک کامپوننت جدید Extracting JSX Into a New Component

• تجهیزات تخریب ساختار Destructuring Props

• React Fragments React Fragments

• تنظیم کلاس ها و متن به صورت مشروط Setting Classes and Text Conditionally

• خلاصه بخش Section Summary

• چالش شماره 2: کارت نمایه (نسخه 2) CHALLENGE #2: Profile Card (v2)

حالت، رویدادها و فرم ها: اجزای تعاملی State, Events, and Forms: Interactive Components

• نمای کلی بخش Section Overview

• بیایید یک جزء Steps بسازیم Let's Build a Steps Component

• مدیریت رویدادها به روش واکنش Handling Events the React Way

• State در React چیست؟ What is State in React?

• ایجاد متغیر State با useState Creating a State Variable With useState

• حالت را به صورت دستی تنظیم نکنید! Don't Set State Manually!

• مکانیک دولت The Mechanics of State

• افزودن یک دولت دیگر Adding Another Piece of State

• React Developer Tools React Developer Tools

• به روز رسانی وضعیت بر اساس وضعیت فعلی Updating State Based on Current State

• افکار بیشتر درباره دستورالعمل های ایالت + ایالت More Thoughts About State + State Guidelines

• پیاده سازی جاوا اسکریپت Vanilla A Vanilla JavaScript Implementation

• چالش شماره 1: تاریخ شمار (v1) CHALLENGE #1: Date Counter (v1)

• شروع یک پروژه جدید: فهرست سفرهای دوردست Starting a New Project: The "Far Away" Travel List

• ساختن چیدمان Building the Layout

• ارائه لیست آیتم ها Rendering the Items List

• ساخت فرم و رسیدگی به موارد ارسالی Building a Form and Handling Submissions

• عناصر کنترل شده Controlled Elements

• ایالت در مقابل پروپس State vs. Props

• تمرین شماره 1: فلش کارت EXERCISE #1: Flashcards

• چالش شماره 2: تاریخ شمار (v2) CHALLENGE #2: Date Counter (v2)

Thinking In React: State Management Thinking In React: State Management

• نمای کلی بخش Section Overview

• "تفکر در واکنش" چیست؟ What is "Thinking in React"?

• مبانی مدیریت دولتی Fundamentals of State Management

• فکر کردن به حالت و بالا بردن وضعیت Thinking About State and Lifting State Up

• نقد و بررسی "حالت بلند کردن" Reviewing "Lifting Up State"

• حذف یک مورد: ارتباط بیشتر کودک با والدین! Deleting an Item: More Child-to-Parent Communication!

• به روز رسانی یک مورد: عملیات داده های پیچیده غیرقابل تغییر Updating an Item: Complex Immutable Data Operation

• دولت مشتق شده Derived State

• محاسبه آمار به عنوان حالت مشتق شده Calculating Statistics as Derived State

• مرتب سازی موارد Sorting Items

• پاک کردن لیست Clearing the List

• انتقال کامپوننت ها به فایل های مجزا Moving Components Into Separate Files

• تمرین شماره 1: جزء آکاردئون (v1) EXERCISE #1: Accordion Component (v1)

• پایه "کودکان": ساخت یک دکمه قابل استفاده مجدد The "children" Prop: Making a Reusable Button

• قابلیت استفاده مجدد بیشتر با "کودکان" Prop More Reusability With the "children" Prop

• تمرین شماره 2: جزء آکاردئون (v2) EXERCISE #2: Accordion Component (v2)

• چالش شماره 1: ماشین حساب نکته CHALLENGE #1: Tip Calculator

[اختیاری] پروژه تمرین: Eat-'N-Split [Optional] Practice Project: Eat-'N-Split

• نمای کلی بخش Section Overview

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

• ساخت برنامه استاتیک: لیست دوستان Building the Static App: List of Friends

• ساخت برنامه استاتیک: فرم ها Building the Static App: Forms

• نمایش فرم دوست جدید Displaying the New Friend Form

• افزودن یک دوست جدید Adding a New Friend

• انتخاب دوست Selecting a Friend

• ایجاد عناصر کنترل شده Creating Controlled Elements

• تقسیم یک لایحه Splitting a Bill

بخش 2: واکنش میانی [2 پروژه] PART 2: INTERMEDIATE REACT [2 PROJECTS]

• مقدمه قسمت 2 Introduction to Part 2

• منابع مفید برای قسمت 2 Useful Resources for Part 2

تفکر در React: کامپوننت ها، ترکیب و قابلیت استفاده مجدد Thinking in React: Components, Composition, and Reusability

• نمای کلی بخش Section Overview

• راه اندازی پروژه "usePopcorn". Setting Up the "usePopcorn" Project

• چگونه یک رابط کاربری را به اجزاء تقسیم کنیم How to Split a UI Into Components

• تقسیم اجزا در عمل Splitting Components in Practice

• دسته بندی اجزا Component Categories

• حفاری پایه Prop Drilling

• ترکیب کامپوننت Component Composition

• رفع حفاری پایه با ترکیب (و ساختن یک چیدمان) Fixing Prop Drilling With Composition (And Building a Layout)

• استفاده از ترکیب برای ساخت جعبه قابل استفاده مجدد Using Composition to Make a Reusable Box

• عبور دادن عناصر به عنوان لوازم جانبی (جایگزین برای کودکان) Passing Elements as Props (Alternative to children)

• ساخت مولفه رتبه بندی ستاره قابل استفاده مجدد Building a Reusable Star Rating Component

• ایجاد ستاره ها Creating the Stars

• مدیریت رویدادهای شناور Handling Hover Events

• Props به عنوان یک مؤلفه API Props as a Component API

• بهبود قابلیت استفاده مجدد با لوازم جانبی Improving Reusability With Props

• PropTypes PropTypes

• چالش شماره 1: مولفه گسترش دهنده متن CHALLENGE #1: Text Expander Component

چگونه واکنش در پشت صحنه کار می کند How React Works Behind the Scenes

• نمای کلی بخش Section Overview

• راه اندازی و اجرای پروژه Project Setup and Walkthrough

• مؤلفه ها، نمونه ها و عناصر Components, Instances, and Elements

• نمونه ها و عناصر در عمل Instances and Elements in Practice

• نحوه عملکرد رندر: بررسی اجمالی How Rendering Works: Overview

• نحوه عملکرد رندر: فاز رندر How Rendering Works: The Render Phase

• نحوه عملکرد رندر: مرحله کامیت How Rendering Works: The Commit Phase

• چگونه تفاوت کار می کند How Diffing Works

• تفاوت قواعد در عمل Diffing Rules in Practice

• پایه کلید The Key Prop

• بازنشانی حالت با پایه کلید Resetting State With the Key Prop

• استفاده از پایه کلید برای تعمیر برنامه Eat-'N-Split ما Using the Key Prop to Fix Our Eat-'N-Split App

• قوانین برای منطق رندر: اجزای خالص Rules for Render Logic: Pure Components

• حالت به روز رسانی دسته بندی State Update Batching

• حالت به روز رسانی دسته بندی در عمل State Update Batching in Practice

• چگونه رویدادها در React کار می کنند How Events Work in React

• کتابخانه‌ها در مقابل چارچوب‌ها و اکوسیستم React Libraries vs. Frameworks & The React Ecosystem

• خلاصه بخش: نکات کاربردی Section Summary: Practical Takeaways

جلوه ها و واکشی داده ها Effects and Data Fetching

• نمای کلی بخش Section Overview

• چرخه حیات کامپوننت The Component Lifecycle

• چگونه داده ها را در React واکشی نکنیم How NOT to Fetch Data in React

• استفاده از افکت برای نجات useEffect to the Rescue

• اولین نگاه به جلوه ها A First Look at Effects

• با استفاده از یک تابع همگام Using an async Function

• اضافه کردن حالت بارگیری Adding a Loading State

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

• آرایه وابستگی useEffect The useEffect Dependency Array

• همگام سازی پرس و جوها با داده های فیلم Synchronizing Queries With Movie Data

• انتخاب یک فیلم Selecting a Movie

• در حال بارگیری جزئیات فیلم Loading Movie Details

• افزودن یک فیلم تماشا شده Adding a Watched Movie

• افزودن یک افکت جدید: تغییر عنوان صفحه Adding a New Effect: Changing Page Title

• عملکرد پاکسازی useEffect The useEffect Cleanup Function

• پاک کردن عنوان Cleaning Up the Title

• پاک کردن واکشی داده ها Cleaning Up Data Fetching

• یک اثر دیگر: گوش دادن به فشار کلید One More Effect: Listening to a Keypress

• چالش شماره 1: مبدل ارز CHALLENGE #1: Currency Converter

قلاب های سفارشی، Refs، و حالت های بیشتر Custom Hooks, Refs, and More State

• نمای کلی بخش Section Overview

• React Hooks و قوانین آنها React Hooks and Their Rules

• قوانین قلاب در عمل The Rules of Hooks in Practice

• جزئیات بیشتر useState More Details of useState

• راه‌اندازی حالت با پاسخ به تماس (حالت اولیه تنبل) Initializing State With a Callback (Lazy Initial State)

• خلاصه useState useState Summary

• چگونه عناصر DOM را در React انتخاب نکنیم How NOT to Select DOM Elements in React

• معرفی Hook دیگر: useRef Introducing Another Hook: useRef

• به انتخاب عناصر DOM مراجعه کنید Refs to Select DOM Elements

• به داده های پایدار بین رندرها اشاره می کند Refs to Persist Data Between Renders

• قلاب های سفارشی چیست؟ چه زمانی یکی ایجاد کنیم؟ What are Custom Hooks? When to Create One?

• ایجاد اولین قلاب سفارشی ما: useMovies Creating our First Custom Hook: useMovies

• ایجاد useLocalStorageState Creating useLocalStorageState

• ایجاد useKey Creating useKey

• چالش شماره 1: استفاده از Geolocate CHALLENGE #1: useGeolocate

[اختیاری] واکنش قبل از هوک: واکنش کلاس محور [Optional] React Before Hooks: Class-Based React

• نمای کلی بخش Section Overview

• جزء درجه اول ما Our First Class Component

• کار با رویداد Handler Working With Event Handlers

• اجزای کلاس در مقابل اجزای تابع Class Components vs. Function Components

• شروع برنامه "آب و هوای درجه یک". Starting the "Classy Weather" App

• واکشی داده های آب و هوا Fetching Weather Data

• نمایش آب و هوا Displaying the Weather

• حذف کد دیگ بخار با فیلدهای کلاس Removing Boilerplate Code With Class Fields

• ارتباط کودک با والدین Child to Parent Communication

• روش های چرخه حیات Lifecycle Methods

بخش 3: ADVANCED REACT + REDUX [4 پروژه] PART 3: ADVANCED REACT + REDUX [4 PROJECTS]

• مقدمه قسمت 3 Introduction to Part 3

• منابع مفید برای قسمت 3 Useful Resources for Part 3

Advanced useReducer Hook The Advanced useReducer Hook

• نمای کلی بخش Section Overview

• باز هم یک قلاب دیگر: useReducer Yet Another Hook: useReducer

• مدیریت بخش های دولتی مرتبط Managing Related Pieces of State

• مدیریت حالت با useReducer Managing State With useReducer

• برنامه "React Quiz". The "React Quiz" App

• بارگیری سوالات از یک API جعلی Loading Questions from a Fake API

• مدیریت بارگیری، خطا، و وضعیت آماده Handling Loading, Error, and Ready Status

• شروع یک آزمون جدید Starting a New Quiz

• نمایش سوالات Displaying Questions

• رسیدگی به پاسخ های جدید Handling New Answers

• حرکت به سمت سوال بعدی Moving to the Next Question

• نمایش پیشرفت Displaying Progress

• اتمام یک مسابقه Finishing a Quiz

• شروع مجدد یک آزمون Restarting a Quiz

• راه اندازی تایمر با useEffect Setting Up a Timer With useEffect

• خلاصه بخش: useState در مقابل useReducer Section Summary: useState vs. useReducer

• چالش شماره 1: ایجاد یک حساب بانکی با useReducer CHALLENGE #1: Creating a Bank Account With useReducer

React Router: Building Single-Page Applications (SPA) React Router: Building Single-Page Applications (SPA)

• نمای کلی بخش Section Overview

• ایجاد اولین برنامه ما با Vite: "WorldWise" Creating Our First App With Vite: "WorldWise"

• برنامه های مسیریابی و تک صفحه ای (SPA) Routing and Single-Page Applications (SPAs)

• پیاده سازی صفحات اصلی و مسیرها Implementing Main Pages and Routes

• پیوند بین مسیرها با <Link/> و <NavLink/> Linking Between Routes With <Link /> and <NavLink />

• گزینه های استایل برای برنامه های React Styling Options For React Applications

• استفاده از ماژول های CSS Using CSS Modules

• ساخت صفحات Building the Pages

• ساخت طرح بندی برنامه Building the App Layout

• مسیرهای تودرتو و مسیر شاخص Nested Routes and Index Route

• اجرای فهرست شهرها Implementing the Cities List

• اجرای فهرست کشورها Implementing the Countries List

• ذخیره سازی حالت در URL Storing State in the URL

• مسیرهای پویا با پارامترهای URL Dynamic Routes With URL Parameters

• خواندن و تنظیم یک کوئری رشته Reading and Setting a Query String

• ناوبری برنامه ای با useNavigate Programmatic Navigation with useNavigate

• پیمایش برنامه‌ای با <Navigate/> Programmatic Navigation with <Navigate />

Advanced State Management: Context API Advanced State Management: The Context API

• نمای کلی بخش Section Overview

• چالش شماره 1: برنامه "وبلاگ اتمی" را درک کنید CHALLENGE #1: Understand "The Atomic Blog" App

• Context API چیست؟ What is the Context API?

• ایجاد و ارائه یک زمینه Creating and Providing a Context

• مصرف زمینه Consuming the Context

• الگوی پیشرفته: یک ارائه دهنده سفارشی و قلاب Advanced Pattern: A Custom Provider and Hook

• Thinking In React: Advanced State Management Thinking In React: Advanced State Management

• بازگشت به "WorldWise": ایجاد یک CitiesContext Back to "WorldWise": Creating a CitiesContext

• مصرف CitiesContext Consuming the CitiesContext

• اتمام نمای شهر Finishing the City View

• از جمله نقشه با کتابخانه جزوه Including a Map With the Leaflet Library

• نمایش نشانگرهای شهر روی نقشه Displaying City Markers on Map

• تعامل با نقشه Interacting With the Map

• تنظیم موقعیت نقشه با موقعیت جغرافیایی Setting Map Position With Geolocation

• واکشی داده های شهر در فرم Fetching City Data in the Form

• ایجاد یک شهر جدید Creating a New City

• حذف یک شهر Deleting a City

• سیستم مدیریت پیشرفته حالت: Context + useReducer Advanced State Management System: Context + useReducer

• افزودن احراز هویت جعلی: تنظیم زمینه Adding Fake Authentication: Setting Up Context

• افزودن احراز هویت جعلی: پیاده سازی "ورود" Adding Fake Authentication: Implementing "Login"

• افزودن احراز هویت جعلی: محافظت از یک مسیر Adding Fake Authentication: Protecting a Route

• چالش شماره 2: دوباره سازی "React Quiz" به Context API CHALLENGE #2: Refactoring "React Quiz" to Context API

بهینه سازی عملکرد و استفاده پیشرفته Performance Optimization and Advanced useEffect

• نمای کلی بخش Section Overview

• بهینه سازی عملکرد و رندرهای هدر رفته Performance Optimization and Wasted Renders

• ابزار توسعه دهنده Profiler The Profiler Developer Tool

• یک ترفند بهینه سازی شگفت انگیز با کودکان A Surprising Optimization Trick With children

• یادداشت تفاهم Understanding memo

• یادداشت در عمل memo in Practice

• درک useMemo و useCallback Understanding useMemo and useCallback

• استفاده از یادداشت در عمل useMemo in Practice

• استفاده از Callback در عمل useCallback in Practice

• بهینه سازی رندرهای زمینه Optimizing Context Re-Renders

• بازگشت به برنامه "WorldWise". Back to The "WorldWise" App

• بهینه سازی اندازه بسته نرم افزاری با تقسیم کد Optimizing Bundle Size With Code Splitting

• پیش از موعد بهینه سازی نکنید! Don't Optimize Prematurely!

• قوانین useEffect و بهترین روش ها useEffect Rules and Best Practices

• چالش شماره 1: رفع مشکلات عملکرد در "Workout Timer" CHALLENGE #1: Fix Performance Issues in "Workout Timer"

• تنظیم وضعیت بر اساس به‌روزرسانی‌های دیگر ایالت Setting State Based on Other State Updates

• استفاده از توابع Helper در افکت ها Using Helper Functions In Effects

• بسته شدن در جلوه ها Closures in Effects

Redux و Redux Toolkit مدرن (با Thunks) Redux and Modern Redux Toolkit (With Thunks)

• نمای کلی بخش Section Overview

• مقدمه ای بر Redux Introduction to Redux

• ایجاد یک کاهش دهنده: حساب بانکی Creating a Reducer: Bank Account

• ایجاد فروشگاه Redux Creating a Redux Store

• کار با Action Creators Working With Action Creators

• افزودن وضعیت بیشتر: مشتری Adding More State: Customer

• ساختار فایل Redux حرفه ای: برش های حالت Professional Redux File Structure: State Slices

• بازگشت به React! اتصال برنامه Redux ما با React Back to React! Connecting our Redux App With React

• ارسال اقدامات از برنامه React ما Dispatching Actions from Our React App

• روش قدیمی اتصال کامپوننت ها به Redux The Legacy Way of Connecting Components to Redux

• Redux Middleware and Thunks Redux Middleware and Thunks

• برقراری تماس API با Redux Thunks Making an API Call With Redux Thunks

• Redux DevTools The Redux DevTools

• Redux Toolkit (RTK) چیست؟ What is Redux Toolkit (RTK)?

• ایجاد فروشگاه با RTK Creating the Store With RTK

• ایجاد برش حساب Creating the Account Slice

• بازگشت به Thunks Back to Thunks

• ایجاد بخش مشتری Creating the Customer Slice

• Redux vs. Context API Redux vs. Context API

بخش 4: توسعه واکنش حرفه ای [2 پروژه] PART 4: PROFESSIONAL REACT DEVELOPMENT [2 PROJECTS]

• مقدمه قسمت 4 Introduction to Part 4

• منابع مفید برای قسمت 4 Useful Resources for Part 4

روتر واکنش با بارگذاری داده (نسخه 6.4+) React Router With Data Loading (v6.4+)

• نمای کلی بخش Section Overview

• راه اندازی یک پروژه جدید: "Fast React Pizza Co." Setting Up a New Project: "Fast React Pizza Co."

• برنامه ریزی کاربردی Application Planning

• راه اندازی یک ساختار فایل حرفه ای Setting Up a Professional File Structure

• روشی جدید برای اجرای مسیرها A New Way Of Implementing Routes

• ساخت طرح بندی برنامه Building the App Layout

• واکشی داده با روتر React "Loaders": منوی پیتزا Fetching Data With React Router "Loaders": Pizza Menu

• نمایش نشانگر بارگذاری Displaying a Loading Indicator

• مدیریت خطاها با عناصر خطا Handling Errors With Error Elements

• واکشی سفارشات Fetching Orders

• نوشتن اطلاعات با React Router "Actions" Writing Data With React Router "Actions"

• مدیریت خطا در اقدامات فرم Error Handling in Form Actions

[اختیاری] Tailwind CSS Crash Course: Styling the App [Optional] Tailwind CSS Crash Course: Styling the App

• نمای کلی بخش Section Overview

• Tailwind CSS چیست؟ What is Tailwind CSS?

• راه اندازی Tailwind CSS Setting Up Tailwind CSS

• کار با رنگ Working With Color

• استایل دادن به متن Styling Text

• مدل جعبه: فاصله، حاشیه، و نمایش The Box Model: Spacing, Borders, and Display

• طراحی تعاملی Responsive Design

• با استفاده از Flexbox Using Flexbox

• با استفاده از CSS Grid Using CSS Grid

• دکمه های یک ظاهر طراحی شده: حالت های عنصر و انتقال Styling Buttons: Element States and Transitions

• عناصر فرم یک ظاهر طراحی شده Styling Form Elements

• استفاده مجدد از استایل ها با @apply Reusing Styles With @apply

• استفاده مجدد از سبک ها با کامپوننت های React Reusing Styles With React Components

• موقعیت یابی مطلق، z-index، و موارد دیگر Absolute Positioning, z-index, and More

• پیکربندی Tailwind: خانواده فونت سفارشی Configuring Tailwind: Custom Font Family

• حالت دادن به منو Styling the Menu

• مدل دادن به سبد خرید Styling the Cart

• فرم دادن به فرم سفارش Styling the Order Form

• نمای کلی سفارش Styling the Order Overview

افزودن Redux و Advanced React Router Adding Redux and Advanced React Router

• نمای کلی بخش Section Overview

• مدل سازی حالت "کاربر" با جعبه ابزار Redux Modeling the "User" State With Redux Toolkit

• خواندن و به روز رسانی وضعیت کاربر Reading and Updating the User State

• مدل سازی حالت "سبد". Modeling the "Cart" State

• افزودن آیتم های منو به سبد خرید Adding Menu Items to the Cart

• ساخت نمای کلی سبد خرید با انتخابگرهای Redux Building the Cart Overview With Redux Selectors

• ساخت صفحه سبد خرید Building the Cart Page

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

• به روز رسانی مقادیر سبد خرید Updating Cart Quantities

• استفاده از سبد خرید برای سفارشات جدید Using the Cart for New Orders

• Redux Thunks با createAsyncThunk Redux Thunks With createAsyncThunk

• یکپارچه سازی موقعیت جغرافیایی Integrating Geolocation

• واکشی داده ها بدون پیمایش: useFetcher Fetching Data Without Navigation: useFetcher

• به روز رسانی داده ها بدون ناوبری Updating Data Without Navigation

راه اندازی بزرگترین پروژه ما + اجزای سبک Setting Up Our Biggest Project + Styled Components

• نمای کلی بخش Section Overview

• برنامه ریزی کاربردی Application Planning

• راه اندازی پروژه: "واحه وحشی" Setting Up the Project: "The Wild Oasis"

• مقدمه ای بر کامپوننت های سبک Introduction to Styled Components

• سبک های جهانی با اجزای سبک Global Styles With Styled Components

• لوازم جانبی سبک و تابع "css". Styled Component Props and the "css" Function

• ساخت اجزای سبک با قابلیت استفاده مجدد بیشتر Building More Reusable Styled Components

• راه اندازی صفحات و مسیرها Setting Up Pages and Routes

• ساخت طرح بندی برنامه Building the App Layout

• ساخت نوار کناری و ناوبری اصلی Building the Sidebar and Main Navigation

دوره Crash Supabase: ساختن یک Back-End! Supabase Crash Course: Building a Back-End!

• نمای کلی بخش Section Overview

• Supabase چیست؟ What is Supabase?

• ایجاد یک پایگاه داده جدید Creating a New Database

• حالت برنامه مدلسازی Modeling Application State

• ایجاد جداول Creating Tables

• روابط بین جداول Relationships Between Tables

• افزودن سیاست های امنیتی (RLS) Adding Security Policies (RLS)

• اتصال Supabase با برنامه React ما Connecting Supabase With Our React App

• راه اندازی سطل های ذخیره سازی Setting Up Storage Buckets

React Query: مدیریت وضعیت راه دور React Query: Managing Remote State

• نمای کلی بخش Section Overview

• React Query چیست؟ What is React Query?

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

• واکشی اطلاعات کابین Fetching Cabin Data

• جهش: حذف یک کابین Mutations: Deleting a Cabin

• نمایش نان تست ها (اعلان ها) Displaying Toasts (Notifications)

• معرفی یک کتابخانه دیگر: React Hook Form Introducing Another Library: React Hook Form

• ایجاد یک کابین جدید Creating a New Cabin

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

• آپلود تصاویر در Supabase Uploading Images to Supabase

• ویرایش کابین Editing a Cabin

• انتزاع React Query به Hook های سفارشی Abstracting React Query Into Custom Hooks

• کابین های کپی شده Duplicating Cabins

• واکشی تنظیمات برنامه ها Fetching Applications Settings

• به روز رسانی تنظیمات برنامه Updating Application Settings

الگوهای واکنش پیشرفته Advanced React Patterns

• نمای کلی بخش Section Overview

• مروری بر قابلیت استفاده مجدد در React An Overview of Reusability in React

• تنظیم یک نمونه Setting Up an Example

• الگوی Render Props The Render Props Pattern

• نگاهی به مولفه های مرتبه بالاتر (HOC) A Look at Higher-Order Components (HOC)

• الگوی اجزای مرکب The Compound Component Pattern

• ساخت یک پنجره مودال با استفاده از پورتال React Building a Modal Window Using a React Portal

• تبدیل مودال به کامپوننت مرکب Converting the Modal to a Compound Component

• تشخیص کلیک خارج از مدال Detecting a Click Outside the Modal

• تایید حذف کابین Confirming Cabin Deletions

• ساخت جدول قابل استفاده مجدد Building a Reusable Table

• اعمال الگوی Render Props Applying the Render Props Pattern

• ساخت یک منوی زمینه قابل استفاده مجدد Building a Reusable Context Menu

[اختیاری] پیاده سازی ویژگی های بیشتر: احراز هویت، حالت تاریک، داشبورد و غیره [Optional] Implementing More Features: Authentication, Dark Mode, Dashboard, etc

• نمای کلی بخش Section Overview

• فیلتر سمت مشتری: فیلتر کردن کابین ها Client-Side Filtering: Filtering Cabins

• مرتب سازی سمت مشتری: طبقه بندی کابین ها Client-Side Sorting: Sorting Cabins

• ساخت جدول رزرو Building the Bookings Table

• آپلود داده های نمونه Uploading Sample Data

• API-Side Filtering: فیلتر کردن رزروها API-Side Filtering: Filtering Bookings

• API-Side Sorting: مرتب سازی رزروها API-Side Sorting: Sorting Bookings

• ساخت کامپوننت صفحه بندی قابل استفاده مجدد Building a Reusable Pagination Component

• صفحه‌بندی سمت API: رزروهای صفحه‌بندی API-Side Pagination: Paginating Bookings

• واکشی اولیه با React Query Prefetching With React Query

• ساخت صفحه رزرو واحد Building the Single Booking Page

• چک کردن در یک رزرو Checking In a Booking

• افزودن صبحانه اختیاری Adding Optional Breakfast

• بررسی یک رزرو (+ رفع یک اشکال کوچک) Checking Out a Booking (+ Fixing a Small Bug)

• حذف یک رزرو Deleting a Booking

• احراز هویت: ورود کاربر با Supabase Authentication: User Login With Supabase

• مجوز: حفاظت از مسیرها Authorization: Protecting Routes

• خروج کاربر User Logout

• رفع یک باگ مهم Fixing an Important Bug

• ساخت فرم ثبت نام Building the Sign Up Form

• ثبت نام کاربر User Sign Up

• مجوز در Supabase: حفاظت از پایگاه داده (RLS) Authorization on Supabase: Protecting Database (RLS)

• ساخت هدر برنامه Building The App Header

• به روز رسانی اطلاعات کاربر و رمز عبور Updating User Data and Password

• پیاده سازی حالت تاریک با متغیرهای CSS Implementing Dark Mode With CSS Variables

• ساخت طرح داشبورد Building the Dashboard Layout

• محاسبه رزروها و اقامت های اخیر Computing Recent Bookings and Stays

• نمایش آمار Displaying Statistics

• نمایش نمودار خطی با کتابخانه Recharts Displaying a Line Chart With the Recharts Library

• نمایش نمودار دایره ای Displaying a Pie Chart

• نمایش اقامت برای روز جاری Displaying Stays for Current Day

• مرزهای خطا Error Boundaries

• لمس نهایی + رفع اشکال Final Touches + Fixing Bugs

استقرار با Netlify و Vercel Deployment With Netlify and Vercel

• نمای کلی بخش Section Overview

• در حال استقرار در Netlify Deploying to Netlify

• راه اندازی یک مخزن Git و GitHub Setting Up a Git and GitHub Repository

• در حال استقرار در Vercel Deploying to Vercel

پایان! The End!

• از اینجا کجا برویم Where to Go from Here