React 18: آموزش ساخت اپلیکیشن سفارش غذا مشابه Swiggy - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

• بررسی راه حل Solution Walkthrough

• استراتژی گیت‌هاب Github Strategy

• نمایش برنامه Application Demo

• درباره وبلاگ About the Blog

شروع به کار 2. Getting Started

• مقدمه Introduction

• معرفی پارسل Introduction to Parcel

• مقداردهی اولیه پروژه Initializing the Project

• نصب وابستگی‌ها Installing Dependencies

• ایجاد صفحه ایندکس Creating Index Page

• اجرای برنامه Running the App

• رفع مشکل ارجاع اسکریپت Fixing the Script Reference

• رفع مشکل اخطار کنسول Fixing the Console Warning

• ایجاد ساختار پوشه‌ها و زیرساخت Creating Folder Structure & Infra Setup

• استراتژی گیت‌هاب Github Strategy

ایجاد طراحی اپلیکیشن Creating Application Design

• مقدمه Introduction

• ایجاد طرح‌بندی برنامه Creating App Layout

• ایجاد کامپوننت هدر Creating the Header Component

• رفع مشکل استایل Fixing the Style

• ایجاد کارت رستوران Creating Restaurant Card

• ایجاد کامپوننت بدنه Creating Body Component

• پیاده‌سازی قابلیت جستجو Implementing the Search Functionality

• واکشی رستوران‌های برتر Fetching Top Rated Restaurants

• پیاده‌سازی ریست فیلترها Implementing Reset Filters

واکشی داده از API Fetching Data From API

• مقدمه Introduction

• تنظیم API Setting the API

• نصب JSON Server Installing JSON Server

• افزونه‌های VS Code VS Code Extensions

• استفاده از هوک Use Effect Using Use Effect Hook

• واکشی داده از API Fetching Data From API

• استفاده از داده واکشی شده از سرور Using the Fetched Data from the server

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

• پیاده‌سازی کامپوننت Shimmer Implementing Shimmer Component

• رفع مشکل منطق نمایش Fixing the Display Logic

مسیریابی Routing

• مقدمه Introduction

• ایجاد طرح‌بندی برنامه Creating App Layout

• درک Import React Understanding Import React

• ایجاد کامپوننت درباره ما Creating About Us Component

• ایجاد استایل درباره ما Creating About Us Style

• ایجاد صفحه تماس با ما - قسمت اول Creating Contact Us Page - 1st Part

• ایجاد صفحه تماس با ما - قسمت دوم Creating Contact Us Page - 2nd Part

• نصب React Router DOM Installing React Router DOM

• ایجاد تعریف مسیر Creating Route Definition

• اصلاح طرح‌بندی برنامه Modifying the App Layout

• اصلاح صفحه هدر Modifying the Header page

• رفع مشکل CSS صفحه تماس با ما Fixing the Contact Page CSS

• ایجاد صفحه خطا Creating Error Page

ایجاد بخش منو Creating the Menu Section

• مقدمه Introduction

• ایجاد صفحه منو قسمت اول Creating the Menu Page 1st Part

• درک صفحه منو Understanding the Menu Page

• واکشی داده برای منوها - قسمت اول Fetching Data for Menus -1st Part

• واکشی داده برای منوها - قسمت دوم Fetching Data for Menus - 2nd Part

• استایل‌دهی به صفحه منو Styling the Menu Page

• اصلاح کارت رستوران Modifying Restaurant Card

• ایجاد تغییرات در روتر Making Router Changes

• رفع مشکل مسیر Fixing the Route

• رفع مشکل CSS Fixing the CSS

ایجاد هوک‌های سفارشی Creating Custom Hooks

• مقدمه Introduction

• ایجاد هوک سفارشی Use Restaurants Creating Custom Hook Use Restaurants

• استفاده از هوک سفارشی در داخل کامپوننت بدنه Using Custom Hook inside Body Component

• ایجاد هوک سفارشی Use Restaurant Menu Creating Custom Hook Use Restaurant Menu

• استفاده از هوک Restaurant Menu در داخل بدنه Using Restaurant Menu Hook inside Body

• رفع مشکل فراخوانی Async Fixing the Async Call

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

• ایجاد مسیرهای بارگذاری تنبل Created Lazy Loaded Routes

• اضافه کردن Suspense به مسیرهای تنبل Adding Suspense to Lazy Routes

• تغییرات طرح‌بندی برنامه App Layout Changes

• رفع مشکل Code Splitting Fixing Code Splitting

ایجاد Redux Store Creating Redux Store

• مقدمه Introduction

• ایجاد صفحه سبد خرید Creating Cart Page

• ایجاد استایل سبد خرید Creating Cart Style

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

• درباره React Redux About React Redux

• نصب پکیج‌ها Installing the Packages

• ایجاد Cart Slice Creating Cart Slice

• ایجاد Store Creating the Store

• تست عملکرد تا اینجا Testing Functionality So far

• استفاده از Dispatch Action در صفحه Restaurant Menu Using Dispatch Action in Restaurant Menu Page

• رفع مشکل State Fixing the State Issue

• رفع مشکل attribute Key Fixing the Key attribute issue

• واکشی آیتم‌های سبد خرید با استفاده از Selector Fetching the cart items using Selector

• شناسایی مشکل سبد خرید Identifying the Cart Issue

• رفع مشکل منطق سبد خرید Fixing the Cart Logic

بهبود UX Improving the UX

• مقدمه Introduction

• نصب پکیج‌های Toast و Font Awesome Installing Toast and Font Awesome Packages

• اضافه کردن آیکون سبد خرید Adding the Cart Icon

• رفع مشکل استایل Fixing the Style

• رفع مشکل تعداد سبد خرید در هدر Fixing the Cart Count in Header

• اضافه کردن نوتیفیکیشن‌های Toast Adding the Toast Notifications

• اصلاح پیاده‌سازی Cart Slice Modifying the Cart Slice Implementation

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

• استایل‌دهی به آیکون‌ها Styling the Icons

پیاده‌سازی پرداخت Implementing Checkout

• مقدمه Introduction

• ایجاد Auth Slice Creating the Auth Slice

• درک تفاوت بین پیاده‌سازی‌های Slice Understanding the difference between Slice Implementations

• پیاده‌سازی تغییرات Store Implementing the Store Changes

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

• استایل‌دهی به صفحه Login Styling the Login page

• تنظیم تعریف مسیر در صفحه Index Adjusting the Route Definition in Index page

• تنظیم صفحه هدر Adjusting the Header Page

• تراز کردن منوها Aligning the Menus

• اصلاح عملکرد سبد خرید Modifying the Cart Functionality

بخش جایزه Bonus Section

• درس جایزه Bonus Lecture