4.34 (242 reviews)
☑ Learn how to think in React
☑ 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!
First Taste of 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!
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 - Hands On
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
History - Hands On
Need a centralized state? Redux is here!
Create & Access Store - Hands On
Dispatch Action - Hands On
Combine Reducers - Hands On
Middleware - Hands On
Middleware Typescript - Hands On Part 1
Middleware Typescript - Hands On Part 2
Need a universal App? React Server-side Rendering is here!
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!
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.
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.
His masterclass is very concise and comprehensive. It's enjoyable and he covers the topics completely. Amazing. Highly recommended.
Clear and concise explanation of important concepts, coupled with simple concrete examples, makes this course a must-have for beginners and non-beginners alike.
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!
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...
Language is very hard to understand. zoom level could be improve. I cant see properly whatever content is typing
This is a perfect match for who am striving to be. It is really a big shift in my development journey
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.
no code given for every video or section, just what you see from your monitor. no thanks, refund please
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!
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!
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.
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.