Master Class: React + Typescript 2021 Web Development

22h 4m 13s
English
Paid

Unlock the full potential of ReactJS with our comprehensive course designed to move you beyond the basics. While many developers find ReactJS straightforward to learn, challenges often arise when managing complex code structures, leading to unmaintainable and messy code often termed as “spaghetti code”. Moreover, a lack of understanding of React’s full capabilities can result in developers relying on Vanilla JS approaches rather than adopting the efficient and organized "React Way". Poor coding practices not only introduce bugs but can result in unresolvable issues.

Why Learn the "React Way"?

Mastering the "React Way" equips developers with the skills to build robust, maintainable applications. By understanding React's core principles, you can create applications that are both efficient and future-proof.

Course Overview

In this course, we will cover everything necessary to master ReactJS. We'll work from the ground up, deliberately avoiding UI libraries, empowering you to craft custom solutions. Our curriculum will also focus on integrating Typescript, ensuring that every line of code we write is well-typed and reliable.

Practical Application: Build an E-commerce Shop

To solidify your learning, the course includes building a comprehensive E-commerce Shop. This project will involve creating numerous functionalities and components from scratch. During this process, you'll adhere to best coding practices to produce clean, maintainable code that stands the test of time.

Outcomes

Upon completing this course, you will possess in-depth knowledge of ReactJS and proficiency in applying the "React Way" to your coding projects. Gain the expertise to tackle any issues independently and truly understand the vast functionalities React offers.

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 163 lessons

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
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