CF

Master Class: React + Typescript 2021 Web Development

22h 4m 13s
English
Paid

Master Class: React + Typescript 2021 Web Development is a 163-lesson 22 hours 4 minutes self-paced course by Udemy. Unlock the full potential of ReactJS with our comprehensive course designed to move you beyond the basics.

Course facts

Lessons
163
Duration
22 hours 4 minutes
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Premium

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.

Who teaches Master Class: React + Typescript 2021 Web Development? Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in Master Class: React + Typescript 2021 Web Development?

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

What courses are similar to Master Class: React + Typescript 2021 Web Development?

Frequently asked questions

What prerequisites are needed for this course?
This course assumes a basic understanding of JavaScript, as early lessons review concepts like variables, logical operators, and asynchronous programming. Familiarity with JavaScript ES6 features is beneficial. Prior experience with React or Typescript is not required, as the course covers these topics from the ground up.
What will I build during the course?
During the course, you'll build a comprehensive E-commerce Shop. This project will involve creating numerous functionalities and components from scratch, providing practical experience with ReactJS and Typescript. The project emphasizes writing clean, maintainable code while following best practices.
Who is the target audience for this course?
This course is aimed at developers who have a foundational understanding of JavaScript and are interested in mastering ReactJS and Typescript. It is especially useful for those who want to avoid common pitfalls such as 'spaghetti code' by learning organized and efficient coding practices.
How does this course compare to other ReactJS courses?
Unlike courses that rely on UI libraries, this course emphasizes building custom solutions, allowing students to fully understand React's core principles. It also integrates Typescript, ensuring all code is well-typed and reliable. This approach helps learners create applications that are efficient and future-proof.
Does the course cover UI libraries or frameworks?
The course deliberately avoids the use of UI libraries, focusing instead on empowering students to craft custom solutions. This approach is intended to deepen understanding of ReactJS's core principles and improve coding practices without reliance on external libraries.
What is the time commitment for completing the course?
The course consists of 163 lessons. While the exact runtime is not specified, students should expect to invest significant time to cover all topics, including practical exercises and the development of the E-commerce Shop project. The pace and depth require dedication to fully grasp the material.
How will the skills learned in this course benefit my career?
Mastering the 'React Way' and integrating Typescript can significantly enhance your ability to build robust, maintainable applications. These skills are valuable in career paths that involve front-end development, software engineering, and anywhere efficient, clean code is a priority.