Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
React JS
Full Stack React Bootcamp with .NET API [2023] [10 Projects]

Full Stack React Bootcamp with .NET API [2023] [10 Projects]

Loại khoá học: Web Development

Master React w/ Redux Toolkit & hooks from scratch. Build 10 projects with e-commerce project [.NET Core API & EF Core]

image
50.000 VND
75 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

This course will be hands on course which will give you practical exposure to React with over 25 assignments and 10 projects. We will start with all the basic fundamentals along with advance concepts and related topic to make you proficient as a React.js developer.


We will be building backend in .NET API and consume all of that using React.js. You are not required to build the API. That section is skippable, since I will be hosting the API online which can be used for the course. But I do teach and deploy API in the course.


My Goal with this course is simple - being a .NET developer as technology evolves we have to adapt with front end frameworks. I want one course that will focus on making a backend developer give solid experience in React.js in a manner that is easy to understand and provides extensive depth to master the fundamentals and advance concepts in React.js


This will be hands on bootcamp which will take you from zero to hero in React JS!


This course contains two modules

  1. Beginner's Guide to React (Build 8 projects)

  2. Real world project using React and .NET API


In the first module we will build 8 small projects to understand basic fundamentals of React, Redux Toolkit and Hooks. Once we understand all the foundation, we will be building a complete real world restaurant website, where customers can place order using their credit card, track the status and admin can view/manage orders.


This will be the only course you will need to learn and master React JS and we will be integrating .NET API's.


We will be building 10 projects in this course. Along with a completed Restaurant website with payment integration!

Bạn sẽ học được gì

React 18 Fundamentals

Routing with React Router

Payments with Stripe API with React

Axios Calls

Redux Toolkit

RTK Query and Mutations

File Management in React

Authentication and Authorization in React

TypeScript

Build and deploy scalable API using .NET 7 and EF Core

10 Projects and 25 assignments

Learn Best Practices for learning React

Deploy React JS Applications to Azure

Yêu cầu

  • Basic understanding of Html, CSS and Javascript
  • Familiarity with concept of API's
  • .NET API with EF Core CRUD Operation
  • SQL Server basics

Nội dung khoá học

25 sections

Introduction

13 lectures
Welcome
02:58
Why should you learn react?
04:51
Live Demo - Final Project
00:42
Feedback
00:10
Additional Resources
01:28
What we will build Part 1
06:21
What we will build Part 2
05:42
Course Prerequisites
02:18
How to get Help?
02:47
Project Resources
01:45
Tools Needed
02:15
Tools Link
00:10
Visual Studio Code Extensions
03:15

React Fundamentals

15 lectures
Setup basic HTML and add React CDN
03:08
First React Code
03:18
Assignment 1 - Writing first React Code
01:25
Creating Element and rendering in React
02:24
What is JSX?
04:31
Better way to create React Projects
01:46
Create Project
01:46
Run the Project
01:50
CleanUp Project
03:25
Make project functional again
02:35
First React Component
05:18
Assignment 2 - React Component
01:05
Assignment 3 - Parent Child Component
00:54
Assignment 3 Solution - Parent Child Component
01:36
Rules of JSX
01:46

React Components

22 lectures
Work with styles
03:40
Adding Bootstrap Classes
02:09
Work with Classes Part 1
03:37
Variable in JSX
02:46
Assignment 3 - Adding Const
00:38
Assignment 3 Solution - Adding Const
00:36
HTML Element in JSX
04:20
Student Component
05:42
Export and Import Component
04:11
Assignment 4 - Separating Student Component
00:31
Assignment 4 Solution - Separating Student Component
01:02
Props and Components
04:17
Install third party libraries and Images
05:18
Import Image and Header Design
02:54
Footer and Main Body Component
03:33
Assignment 5 - Fix Error and Designing
02:28
Passing Components as Children
04:35
Final Hierarchy
01:34
Arrow Function
03:00
functional vs class components
03:03
Class Components
04:08
Assignment 6 - Convert MainBody to Class Component
00:41

React State - CounOPedia

12 lectures
Create CountOPedia
03:08
Assignment 7 Solution - Setup CountOPedia
03:54
Counter Application Buttons
01:30
Click Events
01:43
Setting and Retrieving State
04:04
Demo - React State
05:09
State Summary
02:06
New SetState Syntax
04:53
CountoPedia UI
04:27
Random play and Reset Button
04:13
Assignment 8 - Game Status and Last Play
01:23
Assignment 8 Solution - Game Status and Last Play
03:54

ContactOPedia - CRUD Operations

24 lectures
Create Project - ContactOPedia
02:45
Add Components
04:51
Skeleton of Components
05:25
Add Contact UI
02:33
Favorite and General Contact State
07:29
Individual Contact UI
06:35
Look and Feel ContactOPedia
03:02
Add Contact Handler
04:33
Add Contact in Action
05:15
Add Validations
05:21
Display Validation and Success Notification
02:48
Toggle Favorites
09:22
Assignment 10 - Delete Contact
00:37
Assignment 10 Solution - Delete Contact
03:17
Add Random User to Contact List
03:53
Axios Call
06:34
Demo - Adding Random Contact
03:22
Assignment 11 - Remove All Contact
00:21
Assignment 11 Solution - Remove all Contact
01:39
Which Contact has to be updated
05:46
Toggle UI Based on Update
06:18
Cancel Button in Action
01:56
Update Contact- Part 1
05:27
Update Contact - Part 2
02:28

CyclOPedia - Lifecycle Methods Class Components

10 lectures
Create Project - Cyclopedia
03:04
Setup Random API
03:06
Display Instructor
07:20
Component Did Update
04:53
Controlled Component
05:11
Saving in LocalStorage
05:29
Separating out Instructor
02:40
Component will UnMount
05:03
Load Student List
06:18
Bug time
01:24

WatchOPedia - Hooks in React

10 lectures
Create WatchOPedia
04:55
Setup Counter
02:06
UseState in Action
05:01
Gotchas with useState
05:22
Objects and State
02:06
Another Gotcha with useState
02:29
Something Exciting
01:07
WatchoPedia Movie Setup
04:05
Assignment 12 Solution - Display Movie List
02:51
Assignment 13 Solution - Add Movie to watch
05:18

CyclOPedia - Lifecycle Methods Functional Components

12 lectures
Initial Project
03:19
Name and Feedback Input fields
06:55
UseEffect Overview
06:56
UseEffect - First Render Only
02:18
UseEffect - Unmount in Action
02:04
Assignment 14 - Use Effect
00:40
Assignment 14 Solution - Use Effect
02:04
Load Student on Counter Update
04:04
useRef and previous values
06:08
Use Ref on Student Count
02:55
More common use of useRef
02:28
useld Hook
03:41

RouteOPedia - Routing in React

16 lectures
Setup RouteOPedia
03:30
Create More Components
03:56
First Route
06:09
Link Component
02:54
Assignment 15 - Product Routes
01:25
Assignment 15 - Product Routes Solution
02:47
Nested Routes
01:34
Index in Nested Route
00:44
Not Found
01:37
Parameters in URL
05:46
Assignment 16 - Parameters in URL
01:13
NavLink Component
02:57
Navigate using useNavigate Hook
01:38
Using Link Component to Navigate
01:14
Another Navigation Method
02:51
Navigate back
02:03

ReduxOPedia - Redux and React

17 lectures
Setup ReduxOPedia
05:08
Add Redux Store
05:19
Create first Reducer and Actions
08:55
Log State and Dispatch Action
03:11
Retrieve value from state
02:29
Dispatching Action from React Component
04:15
Assignment 17 - Counter Multiplier
03:49
Assignment 17 Solution - Counter Multiplier
02:44
Add Destination Slice
02:53
Display Destinations
04:07
Select Destination
03:48
Display selected destination
02:39
Reset counter and destination
05:15
Listen to action of a different Reducer
04:10
Say NO to magic strings
01:36
Custom Actions
04:50
Alternative Approach for import and export
02:37

TravelOPedia - Redux Toolkit, Query, Mutations and Slice

21 lectures
Setup TravelOPedia
04:32
Setup Destination Components
03:16
Setup JSON Server
04:54
Create Destination API
10:21
Fetch Records from API
05:00
Add Destination Controller Component
01:41
Add Mutations
03:42
Call POST Mutation
05:05
query vs mutation
00:44
Caching with RTK Query
04:35
TAGS in Action
05:57
Assignment 18 - Delete Destination
00:49
Assignment 18 Solution - Delete Destination
02:25
Response from Query and Parameters
02:10
Separating out Individual Destination
01:42
Assignment 19 - Edit Functionality
01:03
Assignment 19 Solution - Edit Functionality
08:43
Integrate RTK Query with Redux Store
05:58
Call Another API
03:21
Show Random Destination
02:34
ProjectOPedia
00:13

12 .NET API - Basic Setup

13 lectures
API is optional and you can use the API right here
06:28
Setup Storage Account for Images on Azure
03:09
Create API Project
01:59
Install NuGet Packages
02:11
Setup Connection String and DBContext
06:13
Create SQL Tables and push Migrations
08:00
Add Name to AspNetUsers
04:14
Create Menu Item Table
03:42
Seed Menu Items
04:08
Get Menu Item and API Response
06:24
Get Individual Menu Item
03:42
Add Storage Account Connection String
06:08
Implement Blob Service
04:19

.NET API - Menu Item

5 lectures
Create Menu Item
09:59
Create Menu Item In Action
01:33
Update Menu Item
07:27
Delete Menu Item
02:44
Correct Status Code and Success Flag
01:01

.NET API - Authentication and Authorization

8 lectures
Add Login and Register DTOs
03:51
Auth Controller and Dependency Injection
04:31
Register in Action
11:10
Login in Action
04:06
JWT Token
07:25
Add Authentication and Authorization Endpoints
04:37
Setup API for Authentication
03:10
Add Security to Swagger
07:00

.NET API - Shopping Cart and Order

14 lectures
Add Shopping Cart Models
07:39
Shopping Cart Controller and Logic
04:10
Update Shopping Cart Endpoint
10:47
Test Shopping Cart Endpoint
02:40
Get Shopping Cart
05:11
Order Header and Details Model
04:33
Order DTOs
02:28
Get Order
03:48
Create Order in Action
06:00
Update Order Details
03:38
Stripe Payment Endpoint
05:38
Stripe Client Secret in Action
06:01
Shopping Cart API Update
01:30
Deploy API
05:09

16 Red Mango - Home Page

13 lectures
Typescript Introduction
04:22
Create App with Typescript
02:08
Package Json
01:33
File CleanUp
03:04
Install Bootstrap and Bootstrap Icons
02:36
Header and Footer Component
04:40
Header UI
02:35
Fetch Menu Items & Interfaces in TS
06:48
Better Structure
03:53
Card Component
03:49
Home Page UI
03:23
Add Routing and Not Found
05:42
Menu Item Details Page
05:08

17 Setup Redux and RTK

8 lectures
Add Redux and Tedux Toolkit to Project
07:06
Add Query to Fetch Menu Items
06:35
Call Slice to Fetch Data
03:38
Display Loading Text
01:17
API Issue
00:10
Assignment 20 - Load Menu Item Details
01:00
Assignment 20 Solution - Load Menu Item Details
05:43
Manage Quantity on Menu Item Details
03:42

Shopping Cart

19 lectures
User ID for Shopping Cart
04:11
Setup Shopping Cart Query and Mutation
06:08
Add to Cart in Action
05:07
Assignment 21 - Add to Cart Home Page
01:17
Assignment 21 Solution - Add to Cart Home Page
01:59
Add Mini Loader on Home Page
02:17
Mini Loader Component
02:53
Main Loader
02:13
Loader on Add to Cart in Details Page
02:02
Shopping Cart Interface
04:18
Get Shopping Cart and Store in Slice
06:11
Shopping Cart Page
03:03
Shopping Cart Summary
06:05
Add Reducers to Shopping Cart Slice
04:22
Shopping Cart Functional
08:17
Show Distinct Items in Cart
01:59
Display Pickup Details
04:03
Controller Component Helper Method
08:04
Loading Component
03:16

19 Authentication and Authorization

22 lectures
Login and Register UI
05:18
How Login and Register will work
05:21
Add Auth API
03:31
Authentication Slice and User Interface
04:29
Controller Components in Register
05:21
Response API Interface
03:11
Register User
05:16
Controller Login Fields
01:45
Login in Action
03:02
Add Token to LocalStorage
01:56
Decode JWT Token
03:24
Toggle Login and Logout button
04:04
Login and Logout in Action
03:44
Small Bug with Authentication
02:41
Toastify Notifications
07:48
Add Loader on Register
00:50
Add Test Components for Authentication and Authorization
05:09
Authentication with HOC
07:27
Authorization with HOC
02:55
Only Authenticated User can Add to Cart
04:24
Dynamic User ID
02:57
Cleanup test Components
00:31

20 Payments

11 lectures
Load User Details of Logged in User
01:27
Stripe and React
03:35
Create Payment API
02:15
Calling Payment API
06:00
Use Location State
03:17
Stripe Card Demo
04:02
Order Summary UI
02:49
Local Interfaces
04:42
Dynamic Order Summary
04:22
Stripe Processing
06:03
Stripe success object
03:20

21 Order

22 lectures
Order API
01:56
Create Order Object to Create Order
04:58
Create Order
11:53
Order Confirmed Logic
03:21
Order Confirmation Page
06:35
Get Order Endpoints in API
02:38
My Orders UI
02:11
Dynamic My Orders
08:18
Bug with my orders
00:57
Make a new component for Order List
04:15
12 Order Details
08:50
13 Assignment 22 - Solve Data Bug
01:30
14 Manage Orders Header based on Role
03:55
15 Status Color Helper Method
02:19
16 Display Badge for Order Status
02:30
17 Back to Order Button
01:25
18 Buttons for Nest Status
05:16
19 Order Status Badge on Order List
02:53
20 Order API - PUT Endpoint
03:25
21 Update Order Status
05:12
22 Cancel & Completed Buttons Condition
01:34
23 All Orders Page
01:56

22 Menu Items

15 lectures
Create Menu Item List Page
03:06
Assignment 23 - Dynamic Menu Item List
03:41
Menu Item Upsert UI
03:57
Controller Components Menu Item
03:59
Upload Image in React
07:38
Menu Item API Mutations
03:19
Create Menu Item
05:16
Update Designing
03:03
Load Menu Item to Update
03:58
Update Menu Item
05:02
Category Dropdown
03:10
Small Bug
01:44
Delete Menu Item
02:44
Assignment 25 - Data goes away on refresh
00:32
Assignment 25 - Bug Solution
01:27

23 Home UI

10 lectures
Banner
01:57
Renaming Folder
00:55
Store Search Value in Redux
03:18
Search in Banner
06:57
Show all Category for Filter
05:04
Category Filters in Action
06:49
Sorting in Action
07:31
Skip Getting Shopping Cart
03:04
Authentication and Authorization End Points
05:56
Deploy to Azure
03:57

Pagination and Search Order List

11 lectures
Introduction
00:58
Add search to orders in API
02:20
Add pagination to orders in API
06:39
Add UI Filters
04:21
Controller Components
03:23
Local Filters in Action
04:47
API Filters in Action
03:50
Small Bug
00:37
Get Total Records
04:42
Pagination in Action
05:38
Page Size in Action
03:28

More Courses

1 lectures
DotNetMastery
00:06

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

Complete Ruby Programmer - Master Ruby

Complete Ruby Programmer - Master Ruby

1.099.000 VND
50.000 VND
Visual Studio Code for Developers 2023: Beginner to Advanced

Visual Studio Code for Developers 2023: Beginner to Advanced

1.499.000 VND
50.000 VND
The Complete JavaScript Course 2024: From Zero to Expert!

The Complete JavaScript Course 2024: From Zero to Expert!

185 VND
50.000 VND
The Git & Github Bootcamp

The Git & Github Bootcamp

120 VND
50.000 VND
SQL for Data Analysis: Beginner MySQL Business Intelligence

SQL for Data Analysis: Beginner MySQL Business Intelligence

1.899.000 VND
50.000 VND
Build Solutions with Power Apps, Power Automate & SharePoint

Build Solutions with Power Apps, Power Automate & SharePoint

100 VND
50.000 VND
Unity 2023 Game Development : Build 6 Games with Unity & C#

Unity 2023 Game Development : Build 6 Games with Unity & C#

79 VND
50.000 VND
The Complete 2024 Web Development Bootcamp

The Complete 2024 Web Development Bootcamp

185 VND
50.000 VND
Unit Testing for Typescript & NodeJs Developers with Jest

Unit Testing for Typescript & NodeJs Developers with Jest

100 VND
50.000 VND
Create an eCommerce Website Using Laravel (PHP & MySQL)

Create an eCommerce Website Using Laravel (PHP & MySQL)

1.049.000 VND
50.000 VND
The Freelance Stack: A real project with NextJS13 and Strapi

The Freelance Stack: A real project with NextJS13 and Strapi

50.000 VND
Time Series Analysis, Forecasting, and Machine Learning

Time Series Analysis, Forecasting, and Machine Learning

90 VND
50.000 VND
MongoDB with Java Spring Boot & Spring Framework

MongoDB with Java Spring Boot & Spring Framework

1.099.000 VND
50.000 VND
Build REST APIs with Django REST Framework and Python

Build REST APIs with Django REST Framework and Python

1.899.000 VND
50.000 VND
Svelte.js - The Complete Guide (incl. Sapper.js)

Svelte.js - The Complete Guide (incl. Sapper.js)

65 VND
50.000 VND
The Complete Cloud Computing Software Architecture Patterns

The Complete Cloud Computing Software Architecture Patterns

100 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi