Full Stack React Bootcamp With .Net Api [2023] [9 Projects]

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

What you'll learn

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

Requirements

Basic understanding of Html, CSS and Javascript

Familiarity with concept of API's

.NET API with EF Core [for API Modules which are optional]

SQL Server basics [for API Modules which are optional]

Description

This course will be hands on course which will give you practical exposure to React with over 25 assignments and 9 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.jsThis will be hands on bootcamp which will take you from zero to hero in React JS!This course contains two modulesBeginner's Guide to React (Build 8 projects)Real world project using React and .NET APIIn 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!

Overview

Section 1: Introduction

Lecture 1 Introduction

Section 2: Section 2

Lecture 0 1 create react app what it does and why it is needed

Lecture 0 2 Demo - Create React App

Lecture 2 3 Run the Project

Lecture 3 4 CleanUp Project

Lecture 4 5 Make project functional again

Lecture 5 7 First React Component

Lecture 6 8 Assignment 2 - React Component

Lecture 7 9 Assignment 3 - Parent Child Component

Lecture 8 10 Assignment 3 Solution - Parent Child Component

Lecture 9 11 Rules of JSX

Section 3: Section 3

Lecture 10 2 Work with styles

Lecture 11 3 Adding Bootstrap Classes

Lecture 12 4 Work with Classes Part 1

Lecture 13 5 Variable in JSX

Lecture 14 6 Assignment 3 - Adding Const

Lecture 15 7 Assignment 3 Solution - Adding Const

Lecture 16 8 HTML Element in JSX

Lecture 17 9 Student Component

Lecture 18 10 Export and Import Component

Lecture 19 11 Assignment 4 - Separating Student Component

Lecture 20 12 Assignment 4 Solution - Separating Student Component

Lecture 21 13 Props and Components

Lecture 22 14 Install third party libraries and Images

Lecture 23 15 Import Image and Header Design

Lecture 24 16 Footer and Main Body Component

Lecture 25 17 Assignment 5 - Fix Error and Designing

Lecture 26 18 Passing Components as Children

Lecture 27 19 Final Hierarchy

Lecture 28 20 Arrow Function

Lecture 29 21 functional vs class components

Lecture 30 22 Class Components

Lecture 31 23 Assignment 6 - Convert MainBody to Class Component

Section 4: Section 4

Lecture 32 2 Create CountOPedia

Lecture 33 4 Assignment 7 Solution - Setup CountOPedia

Lecture 34 5 Counter Application Buttons

Lecture 35 6 Click Events

Lecture 36 7 Setting and Retrieving State

Lecture 37 8 Demo - React State

Lecture 38 9 State Summary

Lecture 39 10 New SetState Syntax

Lecture 40 11 CountoPedia UI

Lecture 41 12 Random play and Reset Button

Lecture 42 13 Assignment 8 - Game Status and Last Play

Lecture 43 14 Assignment 8 Solution - Game Status and Last Play

Section 5: Section 5

Lecture 44 2 Create Project - ContactOPedia

Lecture 45 3 Add Components

Lecture 46 4 Skeleton of Components

Lecture 47 5 Add Contact UI

Lecture 48 6 Favorite and General Contact State

Lecture 49 7 Individual Contact UI

Lecture 50 8 Look and Feel ContactOPedia

Lecture 51 9 Add Contact Handler

Lecture 52 10 Add Contact in Action

Lecture 53 11 Add Validations

Lecture 54 12 Display Validation and Success Notification

Lecture 55 13 Toggle Favorites

Lecture 56 14 Assignment 10 - Delete Contact

Lecture 57 15 Assignment 10 Solution - Delete Contact

Lecture 58 16 Add Random User to Contact List

Lecture 0 17 why axios maybe

Lecture 59 18 Axios Call

Lecture 60 19 Demo - Adding Random Contact

Lecture 61 20 Assignment 11 - Remove All Contact

Lecture 62 21 Assignment 11 Solution - Remove all Contact

Lecture 63 22 Which Contact has to be updated

Lecture 64 23 Toggle UI Based on Update

Lecture 65 24 Cancel Button in Action

Lecture 66 25 Update Contact- Part 1

Lecture 67 26 Update Contact - Part 2

Section 6: Section 6

Lecture 68 1 Create Project - Cyclopedia

Lecture 69 2 Setup Random API

Lecture 70 3 Display Instructor

Lecture 71 4 Component Did Update

Lecture 72 5 Controlled Component

Lecture 73 6 Saving in LocalStorage

Lecture 74 7 Separating out Instructor

Lecture 75 8 Component will UnMount

Lecture 76 9 Load Student List

Lecture 77 10 Bug time

Section 7: Section 7

Lecture 78 1 Create WatchOPedia

Lecture 79 2 Setup Counter

Lecture 80 3 UseState in Action

Lecture 81 4 Gotchas with useState

Lecture 82 5 Objects and State

Lecture 83 6 Another Gotcha with useState

Lecture 84 7 Something Exciting

Lecture 85 8 WatchoPedia Movie Setup

Lecture 86 9 Assignment 12 Solution - Display Movie List

Lecture 87 10 Assignment 13 Solution - Add Movie to watch

Section 8: Section 8

Lecture 88 1 Initial Project

Lecture 89 2 Name and Feedback Input fields

Lecture 90 3 UseEffect Overview

Lecture 91 4 UseEffect - First Render Only

Lecture 92 5 UseEffect - Unmount in Action

Lecture 93 6 Assignment 14 - Use Effect

Lecture 94 7 Assignment 14 Solution - Use Effect

Lecture 95 8 Load Student on Counter Update

Lecture 96 9 useRef and previous values

Lecture 97 10 Use Ref on Student Count

Lecture 98 11 More common use of useRef

Lecture 99 12 useld Hook

Section 9: Section 9

Lecture 100 1 Setup RouteOPedia

Lecture 101 2 Create More Components

Lecture 102 3 First Route

Lecture 103 4 Link Component

Lecture 104 5 Assignment 15 - Product Routes

Lecture 105 6 Assignment 15 - Product Routes Solution

Lecture 106 7 Nested Routes

Lecture 107 8 Index in Nested Route

Lecture 108 9 Not Found

Lecture 109 10 Parameters in URL

Lecture 110 11 Assignment 16 - Parameters in URL

Lecture 111 12 NavLink Component

Lecture 112 13 Navigate using useNavigate Hook

Lecture 113 14 Using Link Component to Navigate

Lecture 114 15 Another Navigation Method

Lecture 115 16 Navigate back

Section 10: Section 10

Lecture 116 1 Setup ReduxOPedia

Lecture 117 2 Add Redux Store

Lecture 118 3 Create first Reducer and Actions

Lecture 119 4 Log State and Dispatch Action

Lecture 120 5 Retrieve value from state

Lecture 121 6 Dispatching Action from React Component

Lecture 122 7 Assignment 17 - Counter Multiplier

Lecture 123 8 Assignment 17 Solution - Counter Multiplier

Lecture 124 9 Add Destination Slice

Lecture 125 10 Display Destinations

Lecture 126 11 Select Destination

Lecture 127 12 Display selected destination

Lecture 128 13 Reset counter and destination

Lecture 129 14 Listen to action of a different Reducer

Lecture 130 15 Say NO to magic strings

Lecture 131 16 Custom Actions

Lecture 132 17 Alternative Approach for import and export

Section 11: Section 11

Lecture 133 1 Setup TravelOPedia

Lecture 134 2 Setup Destination Components

Lecture 135 3 Setup JSON Server

Lecture 136 4 Create Destination API

Lecture 137 5 Fetch Records from API

Lecture 138 6 Add Destination Controller Component

Lecture 139 7 Add Mutations

Lecture 140 8 Call POST Mutation

Lecture 141 9 query vs mutation

Lecture 142 10 Caching with RTK Query

Lecture 143 11 TAGS in Action

Lecture 144 12 Assignment 18 - Delete Destination

Lecture 145 13 Assignment 18 Solution - Delete Destination

Lecture 146 14 Response from Query and Parameters

Lecture 147 15 Separating out Individual Destination

Lecture 148 16 Assignment 19 - Edit Functionality

Lecture 149 17 Assignment 19 Solution - Edit Functionality

Lecture 150 18 Integrate RTK Query with Redux Store

Lecture 151 19 Call Another API

Lecture 152 20 Show Random Destination

Anyone looking to learn React,.NET / Java developers who wants to learn front end framework