آموزش React Bootcamp با NET API (روتر، Redux Toolkit، Hooks) [ویدئو]

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

معرفی Introduction

• خوش آمدی Welcome

• چرا باید واکنش نشان دهید؟ Why Should You Learn React?

• نسخه ی نمایشی زنده - پروژه نهایی Live Demo - Final Project

• آنچه ما خواهیم ساخت - قسمت 1 What We Will Build - Part 1

• آنچه ما خواهیم ساخت - قسمت 2 What We Will Build - Part 2

• پیش نیازهای دوره Course Prerequisites

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

• ابزار مورد نیاز Tools Needed

• برنامه های افزودنی کد ویژوال استودیو Visual Studio Code Extensions

React Fundamentals React Fundamentals

• Basic HTML را تنظیم کنید و React CDN را اضافه کنید Set Up Basic HTML and Add React CDN

• اولین React Code First React Code

• تکلیف 1 - نوشتن کد First React Assignment 1 - Writing First React Code

• ایجاد عنصر و رندر در React Creating Element and Rendering in React

• JSX چیست؟ What Is JSX?

• روشی بهتر برای ایجاد پروژه های React Better Way to Create React Projects

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

• پروژه را اجرا کنید Run the Project

• پروژه پاکسازی Cleanup Project

• پروژه را دوباره کاربردی کنید Make the Project Functional Again

• اولین React Component First React Component

• تکلیف 2 - React Component Assignment 2 - React Component

• تکلیف 3 - مولفه فرزند والدین Assignment 3 - Parent Child Component

• راه حل تکلیف 3 - مؤلفه والد-فرزند Assignment 3 Solution - Parent-Child Component

• قوانین JSX Rules of JSX

React Components React Components

• با Styles کار کنید Work with Styles

• اضافه کردن کلاس های بوت استرپ Adding Bootstrap Classes

• کار با کلاس ها - قسمت 1 Work with Classes - Part 1

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

• تکلیف 3 - اضافه کردن Const Assignment 3 - Adding Const

• حل تکلیف 3 - اضافه کردن ثابت. Assignment 3 Solution - Adding Constant.

• عنصر HTML در JSX HTML Element in JSX

• جزء دانشجویی Student Component

• صادرات و واردات قطعات Export and Import Components

• تکلیف 4 - جداسازی جزء دانش آموز Assignment 4 - Separating Student Component

• حل تکلیف 4 - جداسازی جزء دانش آموز Assignment 4 Solution - Separating Student Component

• لوازم و قطعات Props and Components

• کتابخانه ها و تصاویر شخص ثالث را نصب کنید Install Third-Party Libraries and Images

• وارد کردن تصویر و طراحی هدر Import Image and Header Design

• پاورقی و جزء اصلی بدنه Footer and Main Body Component

• تکلیف 5 - رفع خطا و طراحی Assignment 5 - Fix Error and Designing

• گذراندن مولفه ها در کودکی Passing Components as Children

• سلسله مراتب نهایی Final Hierarchy

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

• اجزای عملکردی در مقابل کلاس Functional Versus Class Components

• اجزای کلاس Class Components

• تکلیف 6 - MainBody را به جزء کلاس تبدیل کنید Assignment 6 - Convert MainBody to Class Component

React State - CountOPedia React State - CountOPedia

• CountOPedia را ایجاد کنید Create CountOPedia

• راه حل تکلیف 7 - راه اندازی CountOPedia Assignment 7 Solution – Set Up CountOPedia

• دکمه های برنامه شمارنده Counter Application Buttons

• روی رویدادها کلیک کنید Click Events

• تنظیم و بازیابی وضعیت Setting and Retrieving State

• نسخه ی نمایشی - React State Demo - React State

• خلاصه ایالت State Summary

• نحو جدید SetState New SetState Syntax

• رابط کاربری CountOPedia CountOPedia UI

• دکمه پخش تصادفی و تنظیم مجدد Random Play and Reset Button

• تکلیف 8 - وضعیت بازی و آخرین بازی Assignment 8 - Game Status and Last Play

• حل تکلیف 8 - وضعیت بازی و آخرین بازی Assignment 8 Solution - Game Status and Last Play

ContactOPedia - عملیات CRUD ContactOPedia - CRUD Operations

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

• افزودن کامپوننت ها Add Components

• اسکلت اجزا Skeleton of Components

• رابط کاربری مخاطب را اضافه کنید Add Contact UI

• ایالت تماس مورد علاقه و عمومی Favorite and General Contact State

• رابط کاربری تماس فردی Individual Contact UI

• نگاه و احساس تماس با اوپدیا Look and Feel ContactOPedia

• کنترل کننده تماس را اضافه کنید Add Contact Handler

• افزودن مخاطب در عمل Add Contact in Action

• افزودن اعتبارسنجی Add Validations

• نمایش اعلان اعتبار و موفقیت Display Validation and Success Notification

• موارد دلخواه را تغییر دهید Toggle Favorites

• تکلیف 9 - حذف مخاطب Assignment 9 - Delete Contact

• راه حل تکلیف 9 - حذف مخاطب Assignment 9 Solution - Delete Contact

• افزودن کاربر تصادفی به لیست مخاطبین Add Random User to Contact List

• Axios Call Axios Call

• نسخه ی نمایشی - اضافه کردن مخاطب تصادفی Demo - Adding Random Contact

• تکلیف 10 - حذف همه مخاطبین Assignment 10 - Remove All Contact

• راه حل تکلیف 10 - همه مخاطبین را حذف کنید Assignment 10 Solution - Remove all Contact

• کدام مخاطب باید به روز شود Which Contact Has to Be Updated

• تغییر رابط کاربری بر اساس به‌روزرسانی Toggle UI Based on Update

• دکمه لغو در عمل Cancel Button in Action

• به روز رسانی تماس - قسمت 1 Update Contact - Part 1

• به روز رسانی تماس - قسمت 2 Update Contact - Part 2

CyclOPedia - اجزای کلاس روش های چرخه زندگی CyclOPedia - Lifecycle Methods Class Components

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

• راه اندازی Random API Set Up Random API

• مربی نمایش Display Instructor

• componentDidUpdate componentDidUpdate

• جزء کنترل شده Controlled Component

• ذخیره در فضای ذخیره‌سازی محلی Saving in Local Storage

• مربی جدا کردن Separating Out Instructor

• componentWillUnmount componentWillUnmount

• فهرست دانش آموزان را بارگیری کنید Load Student List

• زمان اشکال Bug Time

WatchOPedia - Hooks in React WatchOPedia - Hooks in React

• WatchOPedia را ایجاد کنید Create WatchOPedia

• راه اندازی شمارنده Set Up Counter

• استفاده از حالت در عمل useState in Action

• Gotchas با useState Gotchas with useState

• اشیاء و حالت Objects and State

• یک Gotcha دیگر با useState Another Gotcha with useState

• چیزی هیجان انگیز Something Exciting

• راه اندازی فیلم WatchOPedia WatchOPedia Movie Setup

• راه حل تکلیف 11 - نمایش لیست فیلم Assignment 11 Solution - Display Movie List

• راه حل تکلیف 12 - یک فیلم برای تماشا اضافه کنید Assignment 12 Solution - Add a Movie to Watch

CyclOPedia - اجزای عملکردی روش های چرخه زندگی CyclOPedia - Lifecycle Methods Functional Components

• پروژه اولیه Initial Project

• فیلدهای ورودی نام و بازخورد Name and Feedback Input fields

• مروری بر useEffect useEffect Overview

• useEffect - فقط اولین رندر useEffect - First Render Only

• useEffect - Unmount در عمل useEffect - Unmount in Action

• تکلیف 13 - استفاده از اثر Assignment 13 - Use Effect

• تکلیف 13 راه حل - اثر استفاده Assignment 13 Solution - Use Effect

• بارگیری دانش‌آموز در به‌روزرسانی پیشخوان Load Student on Counter Update

• useRef و مقادیر قبلی useRef and previous values

• useRef در تعداد دانشجو useRef on Student Count

• کاربردهای رایج بیشتر useRef More Common Uses of useRef

• uselD Hook uselD Hook

RouteOPedia - مسیریابی در React RouteOPedia - Routing in React

• RouteOPedia را راه اندازی کنید Set Up RouteOPedia

• کامپوننت های بیشتری ایجاد کنید Create More Components

• مسیر اول First Route

• مولفه پیوند Link Component

• تکلیف 14 - مسیرهای محصول Assignment 14 - Product Routes

• تکلیف 14 راه حل- مسیرهای محصول Assignment 14 Solution- Product Routes

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

• فهرست در مسیر تودرتو Index in Nested Route

• پیدا نشد Not Found

• پارامترها در URL Parameters in URL

• تکلیف 15 - پارامترها در URL Assignment 15 - Parameters in URL

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

• با استفاده از Navigate Hook پیمایش کنید Navigate Using useNavigate Hook

• استفاده از کامپوننت پیوند برای پیمایش Using Link Component to Navigate

• روش ناوبری دیگر Another Navigation Method

• به عقب پیمایش کنید Navigate Back

ReduxOPedia - Redux and React ReduxOPedia - Redux and React

• ReduxOPedia را راه اندازی کنید Set Up ReduxOPedia

• فروشگاه Redux را اضافه کنید Add Redux Store

• اولین Reducer و Actions را ایجاد کنید Create First Reducer and Actions

• Log State و Dispatch Action Log State and Dispatch Action

• بازیابی مقدار از State Retrieve Value from State

• Dispatching Action از React Component Dispatching Action from React Component

• تکلیف 16 - ضریب شمارنده Assignment 16 - Counter Multiplier

• حل تکلیف 16 - ضریب شمارنده Assignment 16 Solution - Counter Multiplier

• برش مقصد را اضافه کنید Add Destination Slice

• نمایش مقاصد Display Destinations

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

• نمایش مقصد انتخاب شده Display Selected Destination

• تنظیم مجدد شمارنده و مقصد Reset Counter and Destination

• به اقدامات یک کاهش دهنده متفاوت گوش دهید Listen to Actions of a Different Reducer

• به رشته های جادویی نه بگویید Say NO to Magic Strings

• اقدامات سفارشی Custom Actions

• رویکرد جایگزین برای واردات و صادرات Alternative Approach for Import and Export

TravelOPedia - Redux Toolkit، Query، Mutations و Slice TravelOPedia - Redux Toolkit, Query, Mutations, and Slice

• TravelOPedia را راه اندازی کنید Set Up TravelOPedia

• تنظیم اجزای مقصد Set Up Destination Components

• سرور JSON را راه اندازی کنید Set Up JSON Server

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

• واکشی سوابق از API Fetch Records from API

• افزودن مؤلفه کنترلر مقصد Add Destination Controller Component

• جهش ها را اضافه کنید Add Mutations

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

• Query در مقابل جهش Query Versus Mutation

• ذخیره سازی با پرس و جوی RTK Caching with RTK Query

• برچسب ها در عمل Tags in Action

• تکلیف 17 - حذف مقصد Assignment 17 - Delete Destination

• راه حل تکلیف 17 - حذف مقصد Assignment 17 Solution - Delete Destination

• پاسخ از Query و Parameters Response from Query and Parameters

• جدا کردن مقصد فردی Separating Out Individual Destination

• تکلیف 18 - کارکرد ویرایش Assignment 18 - Edit Functionality

• حل تکلیف 18 - قابلیت ویرایش Assignment 18 Solution - Edit Functionality

• پرس و جو RTK را با فروشگاه Redux یکپارچه کنید Integrate RTK Query with Redux Store

• API دیگری را فراخوانی کنید Call Another API

• نمایش مقصد تصادفی Show Random Destination

ProjectOPedia ProjectOPedia

• معرفی Introduction

• ProjectOPedia را ایجاد کنید Create ProjectOPedia

• سربرگ و پاورقی Header and Footer

• نقشه از طریق لیست پروژه Map through Project List

• لیست پروژه Project List

• مسیریابی را اضافه کنید Add Routing

• موضوعات تحت پوشش Topics Covered

NET API - راه اندازی اولیه .NET API - Basic Setup

• API اختیاری است و می توانید از API در اینجا استفاده کنید API is Optional and You Can Use the API Right Here

• یک حساب ذخیره سازی برای تصاویر در Azure تنظیم کنید Set Up Storage Account for Images on Azure

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

• بسته های NuGet را نصب کنید Install NuGet Packages

• رشته اتصال و DBContext را تنظیم کنید Set Up Connection String and DBContext

• جداول SQL و Push Migrations ایجاد کنید Create SQL Tables and Push Migrations

• نام را به AspNetUsers اضافه کنید Add Name to AspNetUsers

• ایجاد جدول آیتم های منو Create Menu Item Table

• آیتم های منوی دانه Seed Menu Items

• دریافت آیتم منو و پاسخ API Get Menu Item and API Response

• آیتم منوی فردی را دریافت کنید Get Individual Menu Item

• رشته اتصال حساب ذخیره سازی را اضافه کنید Add Storage Account Connection String

• سرویس Blob را پیاده سازی کنید Implement Blob Service

NET API - مورد منو .NET API - Menu Item

• ایجاد آیتم منو Create Menu Item

• ایجاد آیتم منو در عمل Create Menu Item in Action

• به روز رسانی مورد منو Update Menu Item

• حذف آیتم منو Delete Menu Item

• کد وضعیت صحیح و پرچم موفقیت Correct Status Code and Success Flag

NET API - احراز هویت و مجوز .NET API - Authentication and Authorization

• ورود و ثبت نام DTO را اضافه کنید Add Login and Register DTOs

• Auth Controller و Dependency Injection Auth Controller and Dependency Injection

• ثبت نام در عمل Register in Action

• وارد اکشن شوید Login in Action

• توکن JWT JWT Token

• نقاط پایانی احراز هویت و مجوز را اضافه کنید Add Authentication and Authorization Endpoints

• API را برای احراز هویت تنظیم کنید Set Up API for Authentication

• امنیت را به Swagger اضافه کنید Add Security to Swagger

NET API - سبد خرید و سفارش .NET API - Shopping Cart and Order

• اضافه کردن مدل های سبد خرید Add Shopping Cart Models

• کنترلر و منطق سبد خرید Shopping Cart Controller and Logic

• نقطه پایانی سبد خرید را به روز کنید Update Shopping Cart Endpoint

• تست نقطه پایانی سبد خرید Test Shopping Cart Endpoint

• دریافت سبد خرید Get Shopping Cart

• مدل سرصفحه و جزئیات سفارش Order Header and Details Model

• سفارش DTO ها Order DTOs

• سفارش بگیرید Get Order

• ایجاد نظم در عمل Create Order in Action

• به روز رسانی جزئیات سفارش Update Order Details

• نقطه پایان پرداخت خطی Stripe Payment Endpoint

• Stripe Client Secret در عمل Stripe Client Secret in Action

• به روز رسانی API سبد خرید Shopping Cart API Update

• API را مستقر کنید Deploy API

انبه قرمز - صفحه اصلی Red Mango - Homepage

• تایپ اسکریپت مقدمه Typescript Introduction

• ایجاد اپلیکیشن با TypeScript Create App with TypeScript

• بسته JSON Package JSON

• پاکسازی فایل File Cleanup

• آیکون های Bootstrap و Bootstrap را نصب کنید Install Bootstrap and Bootstrap Icons

• کامپوننت هدر و پاورقی Header and Footer Component

• رابط کاربری سرصفحه Header UI

• واکشی آیتم ها و رابط های منو در TypeScript Fetch Menu Items and Interfaces in TypeScript

• ساختار بهتر Better Structure

• جزء کارت Card Component

• رابط کاربری صفحه اصلی Homepage UI

• Routing and Not Found را اضافه کنید Add Routing and Not Found

• صفحه جزئیات آیتم منو Menu Item Details Page

Redux و RTK را تنظیم کنید Set Up Redux and RTK

• Redux و Redux Toolkit را به Project اضافه کنید Add Redux and Redux Toolkit to Project

• پرس و جو را به موارد واکشی منو اضافه کنید Add Query to Fetch Menu Items

• برای واکشی داده ها با Slice تماس بگیرید Call Slice to Fetch Data

• نمایش متن در حال بارگذاری Display Loading Text

• تکلیف 19 - بارگذاری جزئیات آیتم منو Assignment 19 - Load Menu Item Details

• راه حل تکلیف 19 - بارگذاری جزئیات آیتم منو Assignment 19 Solution - Load Menu Item Details

• مدیریت مقدار در جزئیات آیتم منو Manage Quantity on Menu Item Details

سبد خرید Shopping Cart

• شناسه کاربری برای سبد خرید User ID for Shopping Cart

• پرس و جو و جهش سبد خرید را تنظیم کنید Set Up Shopping Cart Query and Mutation

• افزودن به سبد خرید در عمل Add to Cart in Action

• تکلیف 20 - افزودن به صفحه اصلی سبد خرید Assignment 20 - Add to Cart Homepage

• تکلیف 20 راه حل - افزودن به سبد خرید صفحه اصلی Assignment 20 Solution - Add to Cart Homepage

• Mini Loader را به صفحه اصلی اضافه کنید Add Mini Loader to Homepage

• کامپوننت مینی لودر Mini Loader Component

• لودر اصلی Main Loader

• لودر در صفحه افزودن به سبد خرید در جزئیات Loader on Add to Cart in Details Page

• رابط سبد خرید Shopping Cart Interface

• سبد خرید را دریافت کنید و در Slice ذخیره کنید Get Shopping Cart and Store in Slice

• صفحه سبد خرید Shopping Cart Page

• خلاصه سبد خرید Shopping Cart Summary

• کاهش دهنده ها را به برش سبد خرید اضافه کنید Add Reducers to Shopping Cart Slice

• سبد خرید عملکردی Shopping Cart Functional

• نمایش اقلام متمایز در سبد خرید Show Distinct Items in Cart

• نمایش جزئیات پیکاپ Display Pickup Details

• روش کمکی جزء کنترلر Controller Component Helper Method

• در حال بارگذاری کامپوننت Loading Component

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

• ورود و ثبت نام UI Login and Register UI

• ورود و ثبت نام چگونه کار خواهد کرد How Login and Register Will Work

• Auth API را اضافه کنید Add Auth API

• بخش احراز هویت و رابط کاربری Authentication Slice and User Interface

• اجزای کنترل کننده در رجیستر Controller Components in Register

• رابط API پاسخ Response API Interface

• ثبت نام کاربر Register User

• فیلدهای ورود کنترلر Controller Login Fields

• وارد اکشن شوید Login in Action

• Token را به Local Storage اضافه کنید Add Token to Local Storage

• رمزگشایی JWT Token Decode JWT Token

• دکمه ورود و خروج را تغییر دهید Toggle Login and Logout button

• ورود و خروج در عمل Login and Logout in Action

• اشکال کوچک با احراز هویت Small Bug with Authentication

• Toastify Notifications Toastify Notifications

• اضافه کردن Loader در ثبت نام Add Loader on Register

• اجزای آزمایشی را برای احراز هویت و مجوز اضافه کنید Add Test Components for Authentication and Authorization

• احراز هویت با HOC Authentication with HOC

• مجوز با HOC Authorization with HOC

• فقط کاربر تایید شده می تواند به سبد خرید اضافه کند Only Authenticated User Can Add to Cart

• شناسه کاربر پویا Dynamic User ID

• اجزای تست پاکسازی Cleanup Test Components

مبلغ پرداختی Payments

• بارگیری جزئیات کاربر کاربر وارد شده Load User Details of Logged-In User

• Stripe and React Stripe and React

• ایجاد API پرداخت Create Payment API

• Calling Payment API Calling Payment API

• از وضعیت موقعیت مکانی استفاده کنید Use Location State

• نسخه ی نمایشی کارت راه راه Stripe Card Demo

• سفارش خلاصه UI Order Summary UI

• رابط های محلی Local Interfaces

• خلاصه سفارش پویا Dynamic Order Summary

• پردازش نواری Stripe Processing

• شیء موفقیت راه راه Stripe success object

سفارش Order

• سفارش API Order API

• برای ایجاد سفارش، شیء سفارش ایجاد کنید Create Order Object to Create Order

• ایجاد سفارش Create Order

• منطق تایید شده را سفارش دهید Order Confirmed Logic

• صفحه تایید سفارش Order Confirmation Page

• دریافت نقاط پایانی سفارش در API Get Order Endpoints in API

• رابط کاربری سفارشات من My Orders UI

• سفارشات من پویا Dynamic My Orders

• اشکال با سفارشات من Bug with My Orders

• یک جزء جدید برای لیست سفارش بسازید Make a New Component for Order List

• جزئیات سفارش Order Details

• تکلیف 21 - رفع اشکال داده Assignment 21 - Solve Data Bug

• هدر سفارش ها را بر اساس نقش مدیریت کنید Manage Orders Header based on Role

• روش کمکی رنگ وضعیت Status Color Helper Method

• نمایش نشان برای وضعیت سفارش Display Badge for Order Status

• بازگشت به دکمه سفارش Back to Order Button

• دکمه های وضعیت بعدی Buttons for Next Status

• نشان وضعیت سفارش در لیست سفارش Order Status Badge on Order List

• Order API - PUT Endpoint Order API - PUT Endpoint

• به روز رسانی وضعیت سفارش Update Order Status

• شرایط دکمه های لغو و تکمیل شده Cancel and Completed Buttons Condition

• صفحه همه سفارشات All Orders Page

آیتم های منو Menu Items

• صفحه فهرست آیتم های منو ایجاد کنید Create Menu Item List Page

• تکلیف 22 - فهرست آیتم های منوی پویا Assignment 22 - Dynamic Menu Item List

• آیتم منو Upsert UI Menu Item Upsert UI

• آیتم منوی اجزای کنترلر Controller Components Menu Item

• آپلود تصویر در React Upload Image in React

• جهش های API مورد منو Menu Item API Mutations

• ایجاد آیتم منو Create Menu Item

• طراحی به روز رسانی Update Designing

• مورد منو را برای به‌روزرسانی بارگیری کنید Load Menu Item to Update

• به روز رسانی مورد منو Update Menu Item

• کشویی دسته Category Dropdown

• اشکال کوچک Small Bug

• حذف آیتم منو Delete Menu Item

• تکلیف 23 - داده ها با Refresh از بین می روند Assignment 23 - Data Goes Away on Refresh

• تکلیف 23 - حل اشکال Assignment 23 - Bug Solution

رابط کاربری صفحه اصلی Home UI

• بنر Banner

• تغییر نام پوشه Renaming Folder

• ارزش جستجوی فروشگاه در Redux Store Search Value in Redux

• جستجو در بنر Search in Banner

• نمایش همه دسته برای فیلتر Show all Category for Filter

• دسته بندی فیلترها در عمل Category Filters in Action

• مرتب سازی در عمل Sorting in Action

• از دریافت سبد خرید صرفنظر کنید Skip Getting Shopping Cart

• نقاط پایانی احراز هویت و مجوز Authentication and Authorization Endpoints

• به Azure مستقر شوید Deploy to Azure

صفحه بندی و فهرست ترتیب جستجو Pagination and Search Order List

• معرفی Introduction

• جستجو را به سفارشات در API اضافه کنید Add Search to Orders in API

• صفحه بندی را به سفارشات در API اضافه کنید Add Pagination to Orders in API

• افزودن فیلترهای رابط کاربری Add UI Filters

• اجزای کنترلر Controller Components

• فیلترهای محلی در عمل Local Filters in Action

• فیلترهای API در عمل API Filters in Action

• اشکال کوچک Small Bug

• کل رکوردها را دریافت کنید Get Total Records

• صفحه بندی در عمل Pagination in Action

• اندازه صفحه در عمل Page Size in Action