Master Class: React + Typescript 2021 Web Development

22h 4m 13s
English
Paid

Course description

Many new React Developers find ReactJS easy to learn and that is totally true. But the problem is when they are coding complex structures, the code becomes unmaintainable and ends up having spaghetti code. Some developers as well do not know all the functionalities that React offers and they end up coding like they are using Vanilla JS instead of doing everything the React Way. Bad way of coding always produce bugs and worst, an unfixable one.

Read more about the course

If all React Developers know how to code the React Way, it will be very easy to create a future proof ReactJS application.

So in this course, we will learn everything that you need to know to master ReactJS. Everything will be created from scratch and we will not use any UI libraries so that you can create your own in the future. We will also use Typescript and rest assured that every code will have types.

To apply all the things that you will learn, we will create an E-commerce Shop with a lot of functionalities and components created from scratch. We will also apply the best practices in coding to make our code clean and create a future proof application.

After this course, you will know all everything that you need to know in ReactJS and be an expert in coding the React Way! You will be your own stackoverflow every time you encounter issues because you will have a total understanding of every functionalities and how they work.

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 163 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Master Class: React + Typescript 2021 Web Development

0:00
/
#1: Course Overview

All Course Lessons (163)

#Lesson TitleDurationAccess
1
Course Overview Demo
01:30
2
Your Instructor
03:01
3
What/Why React?
06:21
4
First Taste of React
07:50
5
Typescript Overview
01:17
6
Webpack Overview
02:45
7
Introduction
00:52
8
Var, Let and Const
03:52
9
Var, Let and Const - Hands On
06:09
10
Logical OR and AND
01:15
11
Logical OR and AND - Hands On
03:42
12
Primitive Values vs Reference Type
01:38
13
Primitive Values vs Reference Type - Hands On
02:13
14
Shallow and Deep Copy
04:46
15
Shallow and Deep Copy - Hands On
06:01
16
Spread Operator, Rest Parameter, Destructuring
04:55
17
Spread Operator, Rest Parameter, Destructuring - Hands On
08:47
18
Class
03:03
19
Class - Hands On
06:01
20
This Object + Arrow Function
05:00
21
This Object + Arrow Function - Hands On
03:50
22
Promises and Async+Await
12:17
23
Promises and Async+Await - Hands On
13:11
24
Export & Import
03:56
25
Summary
03:53
26
Introduction
01:26
27
Setup Environment
06:23
28
Component & Props
09:57
29
Component & Props - Hands On
10:56
30
State
03:21
31
State - Hands On
13:26
32
Lifecycle - Mounting & Unmounting
03:25
33
Lifecycle - Mounting & Unmounting - Hands On
13:45
34
Lifecycle - Updating
05:02
35
Lifecycle - Updating - Hands On
17:39
36
Assignment Solution (Optional)
06:18
37
Lifecycle - Error Handling
03:36
38
Lifecycle - Error Handling - Hands On
09:54
39
Extras - Lifecycle
01:21
40
Pure Components & React Memo
05:25
41
Pure Components & React Memo - Hands On
08:25
42
RenderProps & Higher Order Component
04:36
43
RenderProps & Higher Order Component - Hands On
17:01
44
List & Keys
03:47
45
List & Keys - Hands On
06:47
46
Refs
05:31
47
Refs - Hands On
12:38
48
Context API
06:33
49
Context API - Hands On
14:41
50
Form Elements
04:29
51
Form Elements - Hands On
07:56
52
Assignment Solution (Optional)
12:07
53
Code Splitting
04:35
54
Code Splitting - Hands On
04:59
55
Children, cloneElement & isValidElement API
04:20
56
Children, cloneElement & isValidElement API - Hands On
06:48
57
Assignment Solution (Optional)
03:31
58
Summary
04:35
59
Introduction
00:34
60
Render & Hydrate
03:30
61
Render API - Hands On
01:47
62
Unmount Component At Node API
02:43
63
Find Dom Node API
01:12
64
Find Dom Node API - Hands On
01:48
65
Create Portal API
02:26
66
Create Portal API - Hands On
11:17
67
Assignment Solution (Optional)
04:51
68
Summary
01:04
69
Introduction
01:16
70
Routing
11:08
71
Routing - Hands On Part 1
10:44
72
Routing - Hands On Part 2
12:04
73
Link and Redirect
03:35
74
Link and Redirect - Hands On
08:50
75
withRouter HOC
03:44
76
History Library
03:04
77
History - Hands On
04:36
78
Assignment Solution (Optional)
06:47
79
Summary
01:47
80
Introduction
10:29
81
Create & Access Store - Hands On
13:48
82
Dispatch Action - Hands On
06:33
83
Combine Reducers
01:39
84
Combine Reducers - Hands On
07:51
85
Middleware
01:49
86
Middleware - Hands On
10:10
87
Middleware Typescript - Hands On Part 1
07:55
88
Middleware Typescript - Hands On Part 2
10:08
89
Reselect
06:13
90
Redux Devtools
03:05
91
Assignment Solution (Optional)
16:37
92
Summary
03:08
93
Introduction
04:31
94
Setup Environment
06:40
95
Apply Server-side Rendering
07:38
96
Add Redux in Server
06:17
97
Summary
01:24
98
Ecom Shop Overview
03:05
99
Let's setup our environment
07:51
100
Create initial pages
08:22
101
Add Some Navigations!
07:09
102
Decorate our Home Page! Cover Image & Shop Quality
06:07
103
More decoration for Home Page! Best Seller & Partners
09:21
104
Setup our Redux
13:43
105
Redux Saga Overview
02:43
106
Use Redux Saga as our Middleware
14:16
107
Monitor our Redux, Let's add Redux Devtools!
03:06
108
Show some products in All Products Page
09:24
109
API Changes. Backend Developers are here!
05:52
110
Let's Refactor our Code!
21:44
111
Connect Best Seller to Redux
17:13
112
Refactor Code & Add Filters Data
19:37
113
Create reusable Checkbox Component!
08:14
114
Add Sidebar Component UI
08:29
115
Use Filters and Update Products List
24:07
116
Pagination Overview & Button Component
07:51
117
Create Initial Pagination Component
16:07
118
Update Redux for Pagination
11:10
119
Let's finish Pagination Feature!
14:56
120
Reusable Modal Component
10:01
121
Initial Product Card Modal Component
15:10
122
Refactor our Product Card/Modal Components
16:06
123
Complete our Product Card Modal UI
22:55
124
Refactor our Product Card Modal UI
10:34
125
Add Quantity and Select Variants in Product Card Modal
22:00
126
Add To Cart!
08:40
127
Cart Items Notification
05:15
128
Reusable Popover Component
24:20
129
Enhance Popover for our Cart Use Case
10:20
130
Complete our Cart Component!
18:23
131
Show Products in Checkout Page!
21:03
132
Reusable Input Component
05:56
133
Customers, please input your details!
13:53
134
Add Functionalities to Customer Information UI
21:02
135
Refactor our APIs
04:49
136
Let's complete customer's purchase!
13:56
137
Let's add some Themes in our Shop
19:25
138
Refactor UI to change Theme
04:51
139
Apply Code Splitting
08:13
140
Make this a Universal App!
20:51
141
Complete Server-side Rendering Implementation
10:46
142
It's now in your hands
06:47
143
Introduction
04:04
144
add state to functional component, useState Hook!
08:51
145
Lifecycle? Let's use useEffect hook
08:28
146
useLayoutEffect vs useEffect
07:43
147
Memoization? useCallback and useMemo are here
13:16
148
Refs? useRef hook is here
08:13
149
Override ref properties? useImperativeHandle hook
06:46
150
Want to be creative? Let's create a Custom Hook
08:20
151
useContext hook to access our Context
02:24
152
Complex state logic? useReducer Hook is here!
14:13
153
Using Redux? We have React-Redux Hooks
15:24
154
Debugging? Use useDebugValue hook!
07:20
155
Summary
09:03
156
Introduction
00:28
157
Convert Pagination Component
06:22
158
Convert Modal Component
04:57
159
Convert Popover Component
12:53
160
Convert All Products Page
13:34
161
Refactor & Optimization
12:38
162
Convert Customer Information Component
14:30
163
It is now in your hands!
01:03

Unlock unlimited learning

Get instant access to all 162 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React and WebRTC 2023 & Sharing Location App with Video Chat

React and WebRTC 2023 & Sharing Location App with Video Chat

Sources: udemy
Learn technologies like React, WebRTC (PeerJS) , SocketIO and Google Maps API by creating amazing project ,,GeoCall''. In this practical course we will jump str
8 hours 11 minutes 54 seconds
Instagram Clone Coding 3.0

Instagram Clone Coding 3.0

Sources: Nomad Coders
nstagram: backend + frontend + application + server. NodeJS, Prisma, GraphQL, Hooks, React Native. You implement almost all Instagram features, including taking
20 hours 48 minutes 39 seconds
Build a ChatBot with Nuxt, TypeScript and the OpenAI Assistants API

Build a ChatBot with Nuxt, TypeScript and the OpenAI Assistants API

Sources: zerotomastery.io
Learn to build a ChatBot using Nuxt and TypeScript in this project-based course. Develop a custom assistant with OpenAI API and enhance your AI skills.
2 hours 41 minutes