Programming Languages


Master Class: React + Typescript 2021 Web Development

Completely master ReactJS with Fully Typescript Codes and learn how to think in React

4.34 (242 reviews)


23 hours


Jul 2021

Last Update
Regular Price

Unlimited access to 30 000 Premium SkillShare courses

What you will 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.


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!


Master Class: React + Typescript 2021 Web Development
Master Class: React + Typescript 2021 Web Development
Master Class: React + Typescript 2021 Web Development
Master Class: React + Typescript 2021 Web Development



Course Overview

Your Instructor

What/Why React?

First Taste of React

Typescript Overview

Webpack Overview

Let's prepare your javascript skills for React!


Var, Let and Const

Var, Let and Const - Hands On

Logical OR and AND

Logical OR and AND - Hands On

Primitive Values vs Reference Type

Primitive Values vs Reference Type - Hands On

Shallow and Deep Copy

Shallow and Deep Copy - Hands On

Spread Operator, Rest Parameter, Destructuring

Spread Operator, Rest Parameter, Destructuring - Hands On


Class - Hands On

This Object + Arrow Function

This Object + Arrow Function - Hands On

Promises and Async+Await

Promises and Async+Await - Hands On

Export & Import


Show us what you have, ReactJS!


Setup Environment

Component & Props

Component & Props - Hands On


State - Hands On

Lifecycle - Mounting & Unmounting

Lifecycle - Mounting & Unmounting - Hands On

Lifecycle - Updating

Lifecycle - Updating - Hands On

Lifecycle - Error Handling

Lifecycle - Error Handling - Hands On

Extras - Lifecycle

Pure Components & React Memo

Pure Components & React Memo - Hands On

RenderProps & Higher Order Component

RenderProps & Higher Order Component - Hands On

List & Keys

List & Keys - Hands On


Refs - Hands On

Context API

Context API - Hands On

Code Splitting

Code Splitting - Hands On

Children, cloneElement & isValidElement API

Children, cloneElement & isValidElement API - Hands On


What can you do, ReactDOM?


Render & Hydrate

Render API - Hands On

Unmount Component At Node API

Find Dom Node API

Find Dom Node API - Hands On

Create Portal API

Create Portal API - Hands On


Let's create some pages! - React Router DOM



Routing - Hands On Part 1

Routing - Hands On Part 2

Link and Redirect

Link and Redirect - Hands On

withRouter HOC

History Library

History - Hands On


Need a centralized state? Redux is here!


Create & Access Store - Hands On

Dispatch Action - Hands On

Combine Reducers

Combine Reducers - Hands On


Middleware - Hands On

Middleware Typescript - Hands On Part 1

Middleware Typescript - Hands On Part 2


Redux Devtools


Need a universal App? React Server-side Rendering is here!


Setup Environment

Apply Server-side Rendering

Add Redux in Server


Apply everything we have learned - Create our own Ecom Shop

Ecom Shop Overview

Let's setup our environment

Create initial pages

Add Some Navigations!

Decorate our Home Page! Cover Image & Shop Quality

More decoration for Home Page! Best Seller & Partners

Setup our Redux

Redux Saga Overview

Use Redux Saga as our Middleware

Monitor our Redux, Let's add Redux Devtools!

Show some products in All Products Page

API Changes. Backend Developers are here!

Let's Refactor our Code!

Connect Best Seller to Redux

Refactor Code & Add Filters Data

Create reusable Checkbox Component!

Add Sidebar Component UI

Use Filters and Update Products List

Pagination Overview & Button Component

Create Initial Pagination Component

Update Redux for Pagination

Let's finish Pagination Feature!

Reusable Modal Component

Initial Product Card Modal Component

Refactor our Product Card/Modal Components

Complete our Product Card Modal UI

Refactor our Product Card Modal UI

Add Quantity and Select Variants in Product Card Modal

Add To Cart!

Cart Items Notification

Reusable Popover Component

Enhance Popover for our Cart Use Case

Complete our Cart Component!

Show Products in Checkout Page!

Reusable Input Component

Customers, please input your details!

Add Functionalities to Customer Information UI

Refactor our APIs

Let's complete customer's purchase!

Let's add some Themes in our Shop

Refactor UI to change Theme

Apply Code Splitting

Make this a Universal App!

Complete Server-side Rendering Implementation

It's now in your hands

Flexible Functional Component, Learn React Hooks!


add state to functional component, useState Hook!

Lifecycle? Let's use useEffect hook

useLayoutEffect vs useEffect

Memoization? useCallback and useMemo are here

Refs? useRef hook is here

Override ref properties? useImperativeHandle hook

Want to be creative? Let's create a Custom Hook

useContext hook to access our Context

Complex state logic? useReducer Hook is here!

Using Redux? We have React-Redux Hooks

Debugging? Use useDebugValue hook!



Bee18 May 2021

Finished a good chunk of the course. I want to continue and plan to -- but I had to take a job that involves Shopify/Gatsby. Gotta pay bills. The visual comms could use a designer's touch -- but as far as the content, it teaches what it says it will.

Scott9 May 2021

Instructor knows the subject matter but has a very poor presentation style that is difficult to follow a times. Student will spend a great deal of time backtracking through the videos in order to keep up.

Spencer23 April 2021

His masterclass is very concise and comprehensive. It's enjoyable and he covers the topics completely. Amazing. Highly recommended.

Phil24 March 2021

Clear and concise explanation of important concepts, coupled with simple concrete examples, makes this course a must-have for beginners and non-beginners alike.

Alfredo23 March 2021

According to my experience, the sound is very quiet to the point where I intend to download the videos to watch on VLC to adjust the volume. Also, the audience is assumed to be using a PC with a resolution of 1920x1080. However, the content matters the most. I am loving every minute of it. I also appreciate the resources that were included. More power!

Mokeshwaran22 March 2021

so far the lecture is good the only thing is the manual captions are missing and the volume of voice is too low. I can't understand most of the words yet I tryhard to understand...

Devendra22 March 2021

Language is very hard to understand. zoom level could be improve. I cant see properly whatever content is typing

Samuel22 March 2021

This is a perfect match for who am striving to be. It is really a big shift in my development journey

R16 March 2021

The whole projects in the tutorial was done using Class components. There's lots of valuable information about Class components that one can learn. But at the moment, React is all about Functional Component. I think it would great to see if the instructor would have done the main project with Functional Components. Class Components are thing of the past now. The other thing is the low volume in the videos. You can't hear him loud. Not a pleasant tutorial.

Ste12 March 2021

no code given for every video or section, just what you see from your monitor. no thanks, refund please

Eu12 March 2021

Can't wait to get into each topic and learn. First topic really helps me understand in a nutshell what react really is and how i may able to leverage it. Kudos!

Gerlie12 March 2021

I enjoyed this course very much as Rysher explained it very clear and concise. I like how he is also explaining the foundations of the framework and the best practices in coding. I have taken a lot of courses online, but this one is one of my favorites as it is not boring at all. I am just new to ReactJS and I am very excited to apply all the learnings from this course for my next real world projects! Kudos to Rysher! Thank you!

Joyce7 March 2021

The course is straighforward and is very informative. The flow and the build up of explaining every topic from basic knowledge to actual application of what has been discussed is a great approach to learn. The instructor teached in an enthusiastic way, and I love the tone of the entire course showing the instructor’s passion and heart to willingly share all of his knowledge to his students. Thank you very much, Sir Rysh.

Patrick7 March 2021

Rysher knows his craft very well. I encourage anybody who wants to learn web development and stay on top of the competition job searching to enroll in this comprehensive course and get a . If you are already an experienced React developer, you'll still learn more from this course.

Kevien6 March 2021

I will recommend this course as this can be taken by students or professionals who want to learn ReactJS even without an experience using the library. Rysher covered some basic and advanced features of javascript(ES6) so that his audience will have the foundation in learning and understanding ReactJS. I enjoyed taking this course even if I am already a ReactJS developer because after completing this, I still able to learn more than I already knew.


3/20/2021100% OFFExpired
4/27/202192% OFFExpired
5/12/202192% OFFExpired


Udemy ID


Course created date


Course Indexed date
Course Submitted by