Master Class: React + Typescript 2021 Web Development

Name: Master Class: React + Typescript 2021 Web Development
Availability: InStock

22h 4m 13s

English

Free

October 6, 2024

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

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

0:00 0:00

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

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

Updated 2y ago
REACT ROUTER (v6)
By: UI.dev (Tyler McGinnis)
There s an easier way to master React Router. Our linear course is like having a smart, experienced friend sit down next to you, walk you through each concept.
3h 15m5/5
FreeUpdated 2y ago
MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)
By: Udemy
Learn to build FullStack JavaScript Web Apps using MERN (MongoDB ExpressJs ReactJs NodeJS) Stack If you love learning new skills and building real world apps wi
34h 4m
Updated 2y ago
React Chrome Extension boilerplate | Shipped
By: Luca Restagno (Shipped Club)
Launch your Chrome Extension in hours, not weeks. The boilerplate for busy makers, to launch your React Chrome Extensions fast. ou don't need to reinvent the wh
5/5
Updated 3y ago
TypeScript course
By: UI.dev (Tyler McGinnis)
Types are fundamental to TypeScript, so naturally you'll need to be familiar with the base types that exist in JavaScript. We'll start the course off with some
6h 27m
Classic
Understanding TypeScript - 2023 Edition
By: Udemy, Academind Pro (Maximilian Schwarzmüller)
Learn what TypeScript is, why it really is a powerful Addition to JavaScript, what its Features are and how to use it!
14h 54m5/5
FreeUpdated 11mo ago
React JS 19 Crash Course | Build an App and Master React in 2 Hours
By: JavaScript Mastery, 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.
2h 7m

More courses by Udemy

New
React - The Complete Guide
React: The Complete Guide by Maximilian Schwarzmüller — original 2022 edition covering React hooks, Redux, Context API, Next.js basics.
47h 42m5/5
Updated 3y ago
Complete C# Unity Game Developer 3D
This is the long-awaited sequel to the Complete Unity Developer - one of the most popular e-learning courses on the internet!
30h 34m
Updated 3y ago
Nest.js Microservices: Build & Deploy a Scaleable Backend
Nest.js is an incredible backend framework that allows us to build scaleable Nodejs backends with very little complexity. A Microservice architecture is a popul
5h 39m5/5
Updated 3y ago
The HTML & CSS Bootcamp 2023 Edition
Brand new HTML & CSS course, just released in February 2023 Check out the promo video to see the beautiful, responsive projects we build in this course!
37h 18m5/5
Updated 3y ago
Microservices with Node JS and React
Event-Based Architecture? Covered! Server side rendering with React? Yep. Scalable, production-ready code? Its here!
54h 13m5/5
FreeClassic
100 Days of Code - The Complete Python Pro Bootcamp for 2023
Watch the 100 Days of Code Python Pro Bootcamp free: 100 daily projects covering Python basics, web scraping, data science, automation and GUI apps.
58h 35m5/5

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.