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

Join premium to watch
Go to premium
# Title Duration
1 Course Overview 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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Server side rendering with Next + React

Server side rendering with Next + React

Sources: udemy
Do you want to learn the whole process of building a server side React App ?. This is the course for you. We will start from the very beginning, from "I don't even know how to u...
29 hours 43 minutes 19 seconds
Build a Realtime App with React Hooks and GraphQL

Build a Realtime App with React Hooks and GraphQL

Sources: udemy
Master the latest and greatest features in React within the context of a full-stack, real-world app. A realtime, full-stack React app from scratch with a GraphQL Server (Apollo ...
4 hours 32 minutes 39 seconds
React JS 19 Crash Course | Build an App and Master React in 2 Hours

React JS 19 Crash Course | Build an App and Master React in 2 Hours

Sources: jsmastery.pro, Adrian Hajdin
This course offers a practical approach: clear explanations, real tasks, and necessary tools, so you can not only understand but also immediately apply the new.
2 hours 7 minutes 16 seconds
MERN Stack - React Node from Scratch Building Social Network

MERN Stack - React Node from Scratch Building Social Network

Sources: udemy
Welcome to Become a FullStack / MERN Stack JavaScript Developer from Scratch with React, Node JS and MongoDB. In this course you will Learn React with Node JS f
20 hours 49 minutes 20 seconds