Name: Master Class: React + Typescript 2021 Web Development
Rating: 4.3 (210 reviews)

What you'll learn

Learn how to think in React
Learn Javascript Advance Concepts necessary to completely understand how React works
Learn all the functionalities that ReactJS offers and become a Subject Matter Expert (SME)
Complete Understanding with React Hooks, ReactDOM, React Router, Redux, Server-side Rendering and a lot more!
Fully Typescript code using ReactJS for maintainable, robust and future proof application
Best Practices in Coding (No more messy codes)
Creating an E-commece Shop from scratch (with Redux Saga Middleware)
We will not use any UI Library in this course, instead I will teach you how to create reusable components so you can create your own UI Library
Experience is the best teacher, in this course you will experience a lot. That's a guarantee.

10 sections • 173 lectures • 23h 13m total length

Preview01:29
Preview03:00
Preview06:20
First Taste of React
07:49
Typescript Overview
01:16
Webpack Overview
02:44
Resources for this section
00:01
Before we start
00:52

Preview00:51
Lecture for this course
00:02
Var, Let and Const
03:51
Var, Let and Const - Hands On
06:08
Logical OR and AND
01:14
Logical OR and AND - Hands On
03:41
Primitive Values vs Reference Type
01:37
Primitive Values vs Reference Type - Hands On
02:12
Shallow and Deep Copy
04:45
Shallow and Deep Copy - Hands On
06:00
Spread Operator, Rest Parameter, Destructuring
04:54
Spread Operator, Rest Parameter, Destructuring - Hands On
08:46
Class
03:02
Class - Hands On
06:00
This Object + Arrow Function
04:59
This Object + Arrow Function - Hands On
03:49
Promises and Async+Await
12:16
Promises and Async+Await - Hands On
13:10
Export & Import
03:55
Summary
03:52
Prepare Your Javascript Skills
14 questions

Preview01:25
Lecture for this course
00:02
Setup Environment
06:22
Component & Props
09:56
Component & Props - Hands On
10:55
State
03:20
State - Hands On
13:25
Lifecycle - Mounting & Unmounting
03:24
Lifecycle - Mounting & Unmounting - Hands On
13:44
Lifecycle - Updating
05:01
Lifecycle - Updating - Hands On
17:38
Coding Exercise - User Management
1 question
Assignment Solution (Optional)
06:17
Lifecycle - Error Handling
03:35
Lifecycle - Error Handling - Hands On
09:53
Extras - Lifecycle
01:20
Pure Components & React Memo
05:24
Pure Components & React Memo - Hands On
08:24
RenderProps & Higher Order Component
04:35
RenderProps & Higher Order Component - Hands On
17:00
List & Keys
03:46
List & Keys - Hands On
06:46
Refs
05:30
Refs - Hands On
12:37
Context API
06:32
Context API - Hands On
14:40
Form Elements
04:28
Form Elements - Hands On
07:54
Coding Exercise - Student Grade Management
1 question
Assignment Solution (Optional)
12:06
Code Splitting
04:34
Code Splitting - Hands On
04:58
Children, cloneElement & isValidElement API
04:19
Children, cloneElement & isValidElement API - Hands On
06:47
Coding Exercise - Reusable Button Group Component
1 question
Assignment Solution (Optional)
03:30
Summary
04:34

Introduction
10:28
Lecture for this course
00:02
Create & Access Store - Hands On
13:47
Dispatch Action - Hands On
06:32
Combine Reducers
01:38
Combine Reducers - Hands On
07:50
Middleware
01:48
Create our own custom middleware (Redux-Thunk Like)
10:08
Middleware Typescript - Hands On Part 1
07:54
Middleware Typescript - Hands On Part 2
10:07
Reselect
06:12
Redux Devtools
03:04
Coding Exercise - Notes Application
1 question
Assignment Solution (Optional)
16:36
Summary
03:06

Preview03:04
Let's setup our environment
07:50
Create initial pages
08:21
Add Some Navigations!
06:50
Decorate our Home Page! Cover Image & Shop Quality
06:06
More decoration for Home Page! Best Seller & Partners
09:20
Setup our Redux
13:42
Redux Saga Overview
02:42
Use Redux Saga as our Middleware
14:15
Monitor our Redux, Let's add Redux Devtools!
03:05
Show some products in All Products Page
09:23
API Changes. Backend Developers are here!
05:51
Let's Refactor our Code!
21:43
Connect Best Seller to Redux
17:12
Refactor Code & Add Filters Data
19:36
Create reusable Checkbox Component!
08:12
Add Sidebar Component UI
08:28
Use Filters and Update Products List
24:06
Pagination Overview & Button Component
07:50
Create Initial Pagination Component
16:06
Update Redux for Pagination
11:09
Let's finish Pagination Feature!
14:55
Reusable Modal Component
10:00
Initial Product Card Modal Component
15:09
Refactor our Product Card/Modal Components
16:05
Complete our Product Card Modal UI
22:54
Refactor our Product Card Modal UI
10:33
Add Quantity and Select Variants in Product Card Modal
21:59
Add To Cart!
08:39
Cart Items Notification
05:14
Reusable Popover Component
24:19
Enhance Popover for our Cart Use Case
10:18
Complete our Cart Component!
18:21
Show Products in Checkout Page!
21:02
Reusable Input Component
05:55
Customers, please input your details!
13:52
Add Functionalities to Customer Information UI
21:01
Refactor our APIs
04:48
Let's complete customer's purchase!
13:55
Let's add some Themes in our Shop
19:24
Refactor UI to change Theme
04:50
Apply Code Splitting
08:12
Make this a Universal App!
20:50
Complete Server-side Rendering Implementation
10:45
It's now in your hands
06:46
Resources for this course
00:02

Introduction
04:03
Lecture for this course
00:02
add state to functional component, useState Hook!
08:50
Lifecycle? Let's use useEffect hook
08:27
useLayoutEffect vs useEffect
07:42
Memoization? useCallback and useMemo are here
13:16
Refs? useRef hook is here
08:12
Override ref properties? useImperativeHandle hook
06:45
Want to be creative? Let's create a Custom Hook
08:19
useContext hook to access our Context
02:23
Complex state logic? useReducer Hook is here!
14:12
Using Redux? We have React-Redux Hooks
15:23
Debugging? Use useDebugValue hook!
07:19
Summary
09:02

Requirements

Basic understanding of Javascript/HTML/CSS
Burning passion to master web development using React + Typescript
No more requirement, Let's start to code the React Way!

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.

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.

Let's have some fun in this course!

Who this course is for:

Anyone who wants to master Web Development using React and Typescript completely
Anyone who wants to be excellent, not just good.

Rysher Magbanua

Fullstack Developer (ReactJS, NodeJS, AWS, Docker, Jenkins)

4.3 Instructor Rating
210 Reviews
27,198 Students
1 Course

I'm a professional gamer before and have been competing national and international tournaments. I have played a lot of games but Dragon Nest is the game I perform most as my team have won a lot of Monthly National Tournaments and every year we only lost 1 or 2 for 3 straight years. I have competed in International Tournaments as well in Singapore (2x Champion) and in China (3rd place).

All those tournaments happened when I was in college and taking up BSIT course because I love programming. So when I have graduated, I cannot join professional tournaments anymore and just focus on my job.

I am 4x Microsoft certified and 3x AWS certified.

I love sharing what I know with my colleagues and friends. Teaching and helping others are something that I really want to do. But it is hard to reach a lot of people and would take a lot of time.

So here I am now in Udemy to also learn as well as to teach and reach thousands of people who shares the same passion in programming.

With my experience as a fullstack developer and being a gamer, I know the recipe to stay in the competition and be on top of the game. In my gaming experience I learned how to improve my skills and determine which areas to work on. I have applied these in the world of programming and continually improving my skills together with my team.

Nice to meet you and let's learn together.

Master Class: React + Typescript 2021 Web Development

What you'll learn

Course content

Introduction8 lectures • 24min

Let's prepare your javascript skills for React!20 lectures • 1hr 35min

Show us what you have, ReactJS!34 lectures • 4hr 5min

What can you do, ReactDOM?11 lectures • 31min

Let's create some pages! - React Router DOM12 lectures • 1hr 7min

Need a centralized state? Redux is here!14 lectures • 1hr 39min

Need a universal App? React Server-side Rendering is here!6 lectures • 26min

Apply everything we have learned - Create our own Ecom Shop46 lectures • 9hr 15min

Flexible Functional Component, Learn React Hooks!14 lectures • 1hr 54min

Become Hooks Expert!8 lectures • 1hr 6min

Requirements

Description

Who this course is for:

Instructor