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

React Bootcamp with .NET API (Router, Redux Toolkit, Hooks) [Video]

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: React یک کتابخانه جاوا اسکریپت برای ایجاد رابط های کاربری، به طور خاص برای ایجاد برنامه های کاربردی وب تعاملی و پویا است. شما پروژه های دنیای واقعی مختلفی را آغاز خواهید کرد که به شما کمک می کند تا اصول React را درک کنید و در مفاهیم پیشرفته فرو بروید. با شروع با TaskOPedia، اصول اولیه React را یاد خواهید گرفت و با ساخت یک صفحه ساده، اجزای عملکردی و کلاسی را بررسی خواهید کرد. سپس به CountOPedia خواهید رفت تا یک برنامه پیشخوان تعاملی ایجاد کنید که مهارت های شما را در مدیریت React State آزمایش می کند. در مرحله بعد، ما ContactOPedia را پوشش خواهیم داد، جایی که با استفاده از React، عملیات CRUD را در لیست مخاطبین انجام خواهید داد. پس از آن با CyclOPedia وارد دنیای روش‌های چرخه حیات شوید و هم مؤلفه‌های کلاس و هم مؤلفه‌های عملکردی را بررسی کنید. Hooks در React در WatchOPedia پوشش داده می شود، در حالی که RouteOPedia شما را با مفاهیم مسیریابی در React آشنا می کند. برای افزایش مهارت های مدیریت ایالت، ReduxOPedia شما را از طریق ادغام Redux با React، همراه با کاوش در جعبه ابزار Redux برای مدیریت کارآمدتر دولت راهنمایی می کند. ماژول TravelOPedia بر روی استفاده از پرس و جو و جهش Redux برای تماس‌های ناهمزمان تمرکز می‌کند و درک جامعی از مدیریت داده‌ها در برنامه‌های React به شما ارائه می‌دهد. ماژول ProjectOPedia بر ایجاد صفحه ای تمرکز دارد که تمام پروژه هایی را که در طول دوره روی آنها کار کرده اید فهرست می کند. در نهایت، شما یک وب سایت کامل رستوران در دنیای واقعی خواهید ساخت. این پروژه به مشتریان اجازه می دهد تا با استفاده از کارت های اعتباری خود سفارش دهند، وضعیت سفارش را ردیابی کنند و مدیران را قادر می سازد تا سفارشات را به طور موثر مدیریت و مشاهده کنند. در پایان این دوره، شما نه تنها در React مسلط خواهید شد، بلکه مهارت و اعتماد به نفس توسعه اپلیکیشن های فول استک را نیز خواهید داشت و یک وب سایت رستوران جامع با یکپارچه سازی پرداخت را تکمیل خواهید کرد. اصول و بهترین شیوه های یادگیری React را کاوش کنید با React Router بر هنر مسیریابی مسلط شوید Axios Calls، Redux toolkit و مدیریت فایل را در React مطالعه کنید احراز هویت و مجوز در React را درک کنید ایجاد و استقرار API مقیاس پذیر با استفاده از NET 7 و EF Core استقرار برنامه‌های React در Azure این دوره برای افرادی طراحی شده است که علاقه‌مند به یادگیری React هستند و می‌خواهند مهارت‌های لازم برای ساخت برنامه‌های کاربردی وب را کسب کنند و برای توسعه‌دهندگان بک‌اند برای به دست آوردن تجربه قوی در کار بر روی ReactJS. این دوره در قالبی آسان برای درک طراحی شده است و عمق گسترده ای را برای تسلط بر اصول و مفاهیم پیشرفته در React.js با دات نت یا برای توسعه دهندگان جاوا که به دنبال گسترش مجموعه مهارت های خود و یادگیری یک فریم ورک فرانت اند هستند ارائه می دهد. . شما به درک اولیه HTML، CSS و جاوا اسکریپت، آشنایی با مفهوم API، API دات نت با عملیات EF Core CRUD و اصول اولیه SQL Server نیاز دارید. در یک بوت کمپ عملی با مجموعه پروژه های غنی متشکل از 10 پروژه و 23 تکلیف غوطه ور شوید * تخصص عملی در ساخت یک وب سایت کامل و پویا رستوران برای یک تجربه غذاخوری عالی به دست آورید * Master React برای توسعه ظاهری پویا با تطبیق پذیری .NET API برای عملکردهای پشتیبان قوی

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

معرفی 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

نمایش نظرات

Packtpub یک ناشر دیجیتالی کتاب‌ها و منابع آموزشی در زمینه فناوری اطلاعات و توسعه نرم‌افزار است. این شرکت از سال 2004 فعالیت خود را آغاز کرده و به تولید و انتشار کتاب‌ها، ویدیوها و دوره‌های آموزشی می‌پردازد که به توسعه‌دهندگان و متخصصان فناوری اطلاعات کمک می‌کند تا مهارت‌های خود را ارتقا دهند. منابع آموزشی Packtpub موضوعات متنوعی از جمله برنامه‌نویسی، توسعه وب، داده‌کاوی، امنیت سایبری و هوش مصنوعی را پوشش می‌دهد. محتوای این منابع به صورت کاربردی و به‌روز ارائه می‌شود تا کاربران بتوانند دانش و توانایی‌های لازم برای موفقیت در پروژه‌های عملی و حرفه‌ای خود را کسب کنند.

آموزش React Bootcamp با NET API (روتر، Redux Toolkit، Hooks) [ویدئو]
جزییات دوره
22 h 20 m
344
Packtpub Packtpub
(آخرین آپدیت)
از 5
ندارد
دارد
دارد
Bhrugen Patel
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Bhrugen Patel Bhrugen Patel

Passionate Software Developer من یک مهندس نرم افزار پرشور و خلاق با تمرکز قوی بر روی سادگی و جزئیات کامل هستم. من از دوران دبیرستان برنامه نویسی کرده ام و با چندین وب و دسکتاپ با استفاده از دات نت درگیر بوده ام. من دارای مدرک کارشناسی ارشد در رشته علوم کامپیوتر و لیسانس مهندسی کامپیوتر هستم. من همچنین سالها تجربه کار با دات نت سی شارپ و نت ام وی سی را دارم. من از تدریس در کنار کار تمام وقتم لذت می برم. برای من، مهمترین بخش در مورد نوشتن و آموزش کد، حذف سختی های هر دانش آموزی است که مایل به یادگیری است اما نمی تواند منبع کافی را پیدا کند که به راحتی قابل درک باشد. کدنویسی راهی برای خلاقیت و سرگرمی است!