آموزش React - ساخت یک برنامه تجارت الکترونیک کامل گام به گام - آخرین آپدیت

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

معرفی Introduction

• معرفی Introduction

• دموی اپلیکیشن تجارت الکترونیک E-commerce application demo

• درباره React About React

• کد منبع Source Code

مبانی React React Basics

• ایجاد اپلیکیشن React Create React Application

• کامپوننت‌های تابعی و کامپوننت‌های کلاسی Function Components and Class Components

• اضافه کردن Bootstrap CSS، JS و آیکون‌ها Include Bootstrap CSS, JS and Icons

• تبدیل HTML به JSX Convert HTML to JSX

• خروجی-واردات پیش‌فرض Default Export-Import

• خروجی-واردات نام‌گذاری‌شده Named Export-Import

• استفاده از CSS با JSX Use CSS with JSX

• آرایه‌های جاوااسکریپت JavaScript Arrays

• اشیاء جاوااسکریپت JavaScript Objects

• پارامترهای کامپوننت - props Component parameters - props

• عناصر لیست List elements

• وضعیت کامپوننت و هوک useState Component State and useState Hook

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

• حذف کامپوننت‌ها از یک لیست Delete Components from a List

• فرم‌های کنترل‌نشده Uncontrolled Forms

• فرم‌های کنترل‌شده Controlled Forms

• ذخیره داده‌ها در مرورگر - حافظه محلی Store Data in the Browser - Local Storage

• هوک‌های React - تابع useEffect React Hooks - useEffect Function

• هوک‌های React - تابع useContext React Hooks - useContext Function

پروژه‌های دمو Demo Projects

• لیست TODO - معرفی و راه‌اندازی TODO List - Introduction and Setup

• لیست TODO - ایجاد فرم TODO List - Create Form

• لیست TODO - ایجاد و رندر کردن تسک‌ها TODO List - Create and Render Tasks

• لیست TODO - به‌روزرسانی و حذف تسک‌ها TODO List - Update and Delete Tasks

• لیست TODO - ذخیره تسک‌ها در مرورگر (حافظه محلی) TODO List - Save the Tasks in the Browser (Local Storage)

• لیست TODO - کد منبع TODO List - Source Code

• برنامه آب و هوا Weather App

• برنامه آب و هوا - کد منبع Weather App - Source Code

راه‌اندازی اپلیکیشن تجارت الکترونیک E-Commerce Application Setup

• راه‌اندازی React App و Bootstrap React App and Bootstrap Setup

• چیدمان اپلیکیشن - نوار ناوبری و فوتر Application layout - Navbar and Footer

• React Router - اضافه کردن BrowserRouter React Router - Add BrowserRouter

• React Router - اضافه کردن لینک‌ها React Router - Add Links

انجام عملیات CRUD بر روی محصولات Perform CRUD Operations on Products

• معرفی Introduction

• راه‌اندازی سرور Backend Setup Backend Server

• [مهم] نسخه مورد نیاز JSON Server [IMPORTANT] Required Version of JSON Server

• خواندن محصولات - ایجاد کامپوننت ProductList Read Products - Create the ProductList Component

• خواندن محصولات - پر کردن جدول محصولات Read Products - Fill the Product Table

• پیکربندی سرور Backend برای آپلود فایل و اعتبارسنجی داده Configure Backend Server for File Upload and Data Validation

• ایجاد محصولات - ایجاد فرم Create Products - Create the Form

• ایجاد محصولات - ارسال فرم Create Products - Submit the Form

• ایجاد محصولات - نمایش خطاهای اعتبارسنجی سمت سرور Create Products - Show Server-Side Validation Errors

• به‌روزرسانی محصولات - ایجاد کامپوننت EditProduct Update Products - Create the EditProduct Component

• به‌روزرسانی محصولات - پر کردن و ارسال فرم Update Products - Fill and Submit the Form

• حذف محصولات Delete Products

• خواندن محصولات - اضافه کردن صفحه‌بندی Read Products - Add Pagination

• خواندن محصولات - اضافه کردن قابلیت جستجو Read Products - Add Search Functionality

• خواندن محصولات - اضافه کردن قابلیت مرتب‌سازی Read Products - Add Sort Functionality

• خواندن محصولات - اضافه کردن فلش مرتب‌سازی Read Products - Add Sort Arrow

• کامپوننت Home - اضافه کردن بخش Hero Home Component - Add Hero Section

• کامپوننت Home - نمایش محصولات Home Component - Show Products

• کامپوننت Home - اضافه کردن صفحه‌بندی Home Component - Add Pagination

• کامپوننت Home - اضافه کردن قابلیت فیلتر Home Component - Add Filter Functionality

• کامپوننت Home - اضافه کردن قابلیت مرتب‌سازی Home Component - Add Sort Functionality

• کامپوننت ProductDetails - ایجاد چیدمان ProductDetails Component - Create the Layout

• کامپوننت ProductDetails - خواندن و رندر کردن جزئیات محصول ProductDetails Component - Read and Render Product Details

احراز هویت و مجوز Authentication and Authorization

• معرفی Introduction

• راه‌اندازی سرور احراز هویت JWT Setup JWT Authentication Server

• ایجاد مسیرهای ثبت‌نام و ورود Create Register and Login Routes

• ایجاد کامپوننت Register Create the Register Component

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

• ذخیره اعتبارنامه‌های کاربر در حافظه برنامه Store User Credentials in the Application Memory

• ذخیره اعتبارنامه‌های کاربر در مرورگر (حافظه محلی) Store User Credentials in the Browser (Local Storage)

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

• به‌روزرسانی نوار ناوبری بر اساس احراز هویت و نقش کاربر Update the Navbar based on user Authentication and Role

• کامپوننت‌های محافظت از مسیر Route Protection Components

• پیکربندی سرور احراز هویت JWT - فعال کردن مجوز Configure JWT Authentication Server - Enable Authorization

• ارسال JWT برای ایجاد و به‌روزرسانی محصولات Send JWT to Create and Update Products

• ارسال JWT در درخواست‌های حذف Send JWT in Delete Requests

• UserProfile - راه‌اندازی مسیر UserProfile - Route Setup

• UserProfile - ایجاد اسکلت UserProfile - Create Skeleton

• UserProfile - نمایش جزئیات پروفایل UserProfile - Show Profile Details

• UserProfile - به‌روزرسانی پروفایل UserProfile - Update Profile

• UserProfile - به‌روزرسانی رمز عبور UserProfile - Update Password

• UserList - ایجاد کامپوننت UserList UserList - Create the UserList Component

• UserList - نمایش لیست کاربران UserList - Show the List of Users

• UserList - اضافه کردن صفحه‌بندی UserList - Add Pagination

• UserDetails - ایجاد کامپوننت UserDetails UserDetails - Create the UserDetails Component

• UserDetails - نمایش جزئیات کاربر UserDetails - Show the User Details

استقرار اپلیکیشن Application Deployment

• استقرار React App روی GitHub Deploy React App on GitHub

• استقرار JSON Server Deploy JSON Server