Complete React Developer in 2022 (w/ Redux, Hooks, GraphQL)

Become a Senior React Developer! Build a massive E-commerce app with Redux, Hooks, GraphQL, ContextAPI, Stripe, Firebase

4.64 (17105 reviews)
Web Development
42.5 hours
Nov 2021
last update
regular price
What you will learn

Build enterprise level React applications and deploy to production

Learn to build reactive, performant, large scale applications like a senior developer

Learn the latest features in React including Hooks, Context API, Suspense, React Lazy + more

Master the latest ecosystem of a React Developer from scratch

Become the top 10% ReactJS Developer

Using GraphQL as a React Developer

Use Redux, Redux Thunk and Redux Saga in your applications

Learn to compare tradeoffs when it comes to different state management

Set up authentication and user accounts

Use Firebase to build full stack applications

Learn to lead React projects by making good architecture decisions and helping others on your team

Master React Design Patterns

Learn CSS in JS with styled-components

Routing with React Router

Converting apps to Progressive Web Apps

Testing your application with Jest, Enzyme and snapshot testing

Handling online payments with Stripe API

Using the latest ES6/ES7/ES8/ES9/ES10/ES11 JavaScript to write clean code


Just updated with all new React features for 2022 (React v17..and soon v18)! Join a live online community of over 600,000+ developers and a course taught by industry experts that have actually worked both in Silicon Valley and Toronto with React.js.

Using the latest version of React (React 17), this course is focused on efficiency. Never spend time on confusing, out of date, incomplete tutorials anymore. Graduates of Andrei’s courses are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, + other top tech companies.

We guarantee you this is the most comprehensive online resource on React. This project based course will introduce you to all of the modern toolchain of a React developer in 2022. Along the way, we will build a massive e-commerce application similar to Shopify using React, Redux, React Hooks, React Suspense, React Router, GraphQL, Context API, Firebase, Redux-Saga, Stripe + more. This is going to be a full stack app (MERN stack), using Firebase.

The curriculum is going to be very hands on as we walk you from start to finish of releasing a professional React project all the way into production. We will start from the very beginning by teaching you React Basics and then going into advanced topics so you can make good decisions on architecture and tools on any of your future ReactJS projects.

All code is going to be provided step by step and even if you don’t like to code along, you will get access to the the full master project code so anyone signed up for the course will have their own project to put on their portfolio right away.

The topics covered will be:

- React Basics

- React Router

- Redux

- Redux Saga

- Asynchronous Redux

- React Hooks

- Context API

- React Suspense + React Lazy

- Firebase

- Stripe API

- Styled-Components

- GraphQL

- Apollo

- PWAs

- React Performance

- React Design Patterns

- Testing with Jest, Enzyme and Snapshot testing

- React Best Practices

- Persistance + Session Storage

- State Normalization

+ more

Wait wait… I know what you’re thinking. Why aren’t we building 10+ projects? Well, here’s the truth: Most courses teach you React and do just that. They show you how to get started, build 10 projects that are simple and easy to build in a day, and just add some CSS to make them look fancy. In real life though, you’re not building silly applications. When you apply to jobs, nobody is going to care that you built a really pretty To Do app. Employers want to see you build large apps that can scale, that have good architecture, and that can be deployed to production.

Let me tell you 3 reasons why this course is different from any other React tutorial online:

1. You will build the biggest project you will see in any course. This type of project would take you months to implement yourself.

2. This course is taught by 2 instructors that have actually worked for some of the biggest tech firms using React in production. Yihua has been working on some of the biggest e-commerce websites that you have definitely heard of and probably have shopped at. Andrei has worked on enterprise level React applications for large IPOed tech firms in Silicon Valley as well as Toronto. By having both of them teach, you get to see different perspective and learn from 2 senior developers as if you are working at a company together.

3. We learn principles that are important beyond just what you learn as a beginner. Using the instructor's experiences you learn about design patterns, how to architect your app, organize your code, structure your folders, and how to think about performance. Let’s just say we don’t shy away from the advanced topics.

This course is not about making you just code along without understanding the principles so that when you are done with the course you don’t know what to do other than watch another tutorial. No! This course will push you and challenge you to go from an absolute beginner in React to someone that is in the top 10% of React developers. 

Taught By:

Andrei Neagoie is the instructor of the highest rated Development courses on Udemy as well as one of the fastest growing. His graduates have moved on to work for some of the biggest tech companies around the world like Apple, Google, Amazon, JP Morgan, IBM, UNIQLO etc... He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life. 

Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time.   Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities. 

Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way. 

Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.  

See you inside the courses!


Yihua Zhang is one of the Instructors of Zero To Mastery, one of the highest rated and fastest growing Web Development academies on Udemy
. He has been working as a software developer for numerous years in Toronto for some of the largest tech companies in the world. He has also been working as an instructor for more than a decade. He is focused on bringing everything he has learned to help you achieve a new career as a developer, but also give you all the fundamental skills required to flourish in this incredible industry.

Yihua is a self taught developer, so he fully understands the challenges and mindset of coming into this industry from various other backgrounds. He has been on both sides of the table, as both an instructor and student numerous times so he can empathize with the difficulty of learning something new and challenging. Learning itself is a skill that needs to be practiced and improved upon, and he is dedicated to helping you improve and master that skill for yourself. Courses need to be practical, you need to be able to understand why you are learning the things that you are being taught. You need to understand the problem before you know the solution, and he prides himself on teaching you how to build professional, real world applications so you truly understand why you are doing things a specific way. He will teach you the mindset and skillset required to grow as a developer as fast as possible, so you can have the rich and fulfilling life that comes with this career.

Yihua's courses will guide you to build beautifully written and richly featured applications, while truly understanding all the complex concepts you will encounter along the way.

Complete React Developer in 2022 (w/ Redux, Hooks, GraphQL) - Screenshot_01Complete React Developer in 2022 (w/ Redux, Hooks, GraphQL) - Screenshot_02Complete React Developer in 2022 (w/ Redux, Hooks, GraphQL) - Screenshot_03Complete React Developer in 2022 (w/ Redux, Hooks, GraphQL) - Screenshot_04
Course Outline
Join Our Online Classroom!
Exercise: Meet The Community
React Key Concepts
React Concepts
The Birth of React.js
Declarative vs Imperative
Component Architecture
One Way Data Flow
UI Library
How To Be A Great React Developer
Web Developer Monthly
React Basics
Section Overview
Environment Setup for Mac
Environment Setup For Windows
Yihua's VSCode font and settings
Create React App
Create React App 2
React Project Setup
Don't Eject
Class Components
Thinking In JSX
Dynamic Content
Optional: map() + key attribute
Single Page Application
Fetching Content
Optional: Promises
Architecting Our App
Card List Component
Card Component
Exercise: Breaking Into Components
State vs Props
SearchField State
React Events
Filtering State
Optional: filter(), includes()
Search Box Component
Exercise: Where To Put State?
Class Methods and Arrow Functions
Exercise: Event Binding
Quick Note: Binding in React
Optional: Git + Github
Optional: Connecting With SSH To Github
Deploying Our App
React and ReactDOM
Latest React Package Updates
Revisiting VirtualDOM + Unidirectional Data Flow
Asynchronous setState
Introducing Lifecycle Methods
React Lifecycle Methods - Mounting
React Lifecycle Methods - Updating
React Lifecycle Methods - Unmounting
When should we use a functional component vs a class component?
Section Review
Master Project: Setting Up E-commerce Project
The Long Road Ahead
Project Overview
Github + Project Repositories
Course Guideline + Github Links
Quick Note About Github
E-commerce Homepage + SASS setup
Project Files + Modules
Project Component Architecture
CSS and SCSS files
Homepage and Directory Components
Styling Menu Items
Master Project: React Router and Routing
Routing In React
Routing In Our Project
React Router Dom
Master Project: Forms + Components
Shopping Data
Shop Page
Collection Item
Header Component
Resources: Importing SVG In React
Introducing Forms In React
Sign In Component
Form Input Component
Custom Button Component
Master Project: Firebase + User Authentication
Section Overview
Firebase Introduction
Adding a Project to Firebase
Note about Github
Google Sign In Authentication
Cloning From This Point On
Google Sign In Authentication 2
Optional: How to fix 403: restricted_client error
Google Sign In Authentication 3
Firebase Firestore
Optional: Async Await
Storing User Data In Firebase
Note: Firestore update regarding permissions
Storing User Data In Our App
Sign Up Component
Sign Up With Email and Password
Sign In With Email and Password
Firebase unsubscribe method
Section Review
Master Project: Redux 1
Section Overview
Redux Introduction
Redux Concepts
Redux In Our Application
Redux Actions and Reducers
Setting Up Redux 1
Setting Up Redux 2
connect() and mapStateToProps
User Redirect and User Action Type
Cart Component
Card Dropdown Component
Implementing Redux In Cart
Add To Cart Styling
Cart Item Reducer
Adding Multiple Items To Cart
Optional: find()
Cart Item Component
Optional: reduce()
Selectors in Redux
Optional: Memoization
Reselect Library
User Selectors
Checkout Page
Checkout Page 2
Extensible Code
Dispatch Action Shorthand
Checkout Item Component
Remove Items From Cart
Remove Items At Checkout
Master Project: Session Storage + Persistence
Local Storage and Session Storage
Redux Persist
Master Project: Redux 2
Directory State Into Redux
Collection State Into Redux
Collection Overview Component
Master Project: Advanced Routing
Nested Routing in Shop Page
Improving Naming Of Component
Collection Routing and Selector
Optional: Currying
Master Project: State Normalization
Data Normalization + Collection Page
Optional: Hash Tables vs Arrays
Data Flow In Our App
Thinking About Data Flow
Master Project: Stripe Payments Part 1
Introduction To Stripe
Stripe Integration
Cloning From This Point On
Finishing Touches + Look Ahead
Master Project: Deploying To Production
Deploying To Heroku
Resources: Buildpack
Linking Github to Heroku
Optional: Git + Heroku commands
Optimizing Production Build
Master Project: CSS in JS - styled-components
styled-components In Our App
Thinking About Tradeoffs
styled-components In Our App 2
styled-components In Our App 3
Exercise: styled-components
Master Project: Advanced Redux + Firebase
Section Overview
Quick Note: Firebase
Firebase Refresher
Firebase Refresher 2
Moving Our Shop Data To Firebase
Moving Our Shop Data To Firebase 2
Reviewing What We Have Done
Bringing Shop Data To Our App
Adding Shop Data To Redux
Master Project: HOC Patterns
WithSpinner HOC
WithSpinner HOC 2
Quick Note About Next Lesson
Optional: How To Build HOCs
Master Project: Asynchronous Redux
Observables + Observer Pattern
Promise Pattern
Redux Thunk
What Does Redux Thunk Do?
Debugging Our Code
Master Project: Container Pattern
Container Pattern
Refactoring Is A Tradeoff
Master Project: Redux-Saga
Introduction to Sagas
Correction about Saga flow
Generator Functions
Quick Note About Sagas
Redux Thunk Into Saga
take(), takeEvery(), takeLatest()
Root Saga
Planning Ahead With Sagas
Google Sign In Into Sagas
Email Sign In Into Sagas
Reviewing Our Sagas
Recreating Persistence
Sign Out With Sagas
Clear Cart Saga
Solution: Sign Up Saga
Master Project: React Hooks
React Hooks Introduction (useState)
Why Did React Add Hooks?
Hook Rules
Converting Class Components With useState
useEffect In Our App
useEffect as ComponentWillUnmount()
useEffect Cheat Sheet
Custom Hooks
Custom Hooks 2
useContext + useMemo + useCallback
Master Project: Stripe Payments Part 2 - Backend
About This Section
Introduction To Backend
Cloning From This Point On
Creating our Server Inside the Project
Building A Basic Server
What We Are Building
Backend Payment Route
Connecting Client To Server
Deploying To Production
Master Project: Context API
Quick note about cloning this repo
Introduction To Context API
Context Consumer + useContext Hook
Context Provider
Cart Context
Provider Context Pattern
Provider Context Pattern 2
Redux vs Context API
Master Project: GraphQL + Apollo
Introduction To GraphQL
Course Guideline + Github Links
GraphQL Playground
Backend Code
GraphQL Playground 2
Introduction To Apollo
Apollo Container
Note: Destructuring change in next lesson
Query With Variables
GraphQL vs Redux
Mutations On The Client
Resources: Mutations
Mutations On The Client 2
Adding Items With Apollo
Adding Items With Apollo 2
Note: Compose in next lesson
CartItem Count With Apollo
Exercises: Adding More GraphQL
Should You Use GraphQL?
Master Project: Mobile Support
Mobile Responsiveness
Mobile Responsiveness 2
Exercise: Mobile Friendly App
Master Project: React Performance
Code Splitting Introduction
Introducing React Lazy
React Lazy + Suspense
Error Boundaries
React.memo, PureComponent, shouldComponentUpdate
Performance In Our App
Gzipping and Compression
React <Profiler>
React Performance Cheat Sheet
React Interview Questions + Advice
Don't Overcomplicate
Be A Late Follower
Break Things Down
It Will Never Be Perfect
Learning Guideline
Endorsements On LinkedIn
Become An Alumni
Common React Interview Questions
Bonus: Progressive Web App
Note About This Section
Progressive Web Apps
Resources: Progressive Web Apps
Progressive Web Apps Examples
Note on server.js code
Resources: PWA - HTTPS
PWA - App Manifest
PWA - Service Workers
Resources: PWA - Service Workers
PWA - Final Thoughts
Converting Our App To PWA
Addendum to Server.js
Bonus: Firebase Security
Firebase Security Rules
User Security Rule
User Security Rule 2
More Security Rules
Coding Challenge: Firebase Cart
Bonus: Testing
Note About This Section
Section Overview
Types of Tests
Testing Libraries
Note: The Next Videos
Unit Tests
Integration Tests
Automation Testing
Final Note On Testing
Setting Up Jest
Our First Tests
Writing Tests
Asynchronous Tests
Asynchronous Tests 2
Resources: Jest Cheat Sheet
Mocks and Spies
Note: Testing React Apps
Introduction To Enzyme
Snapshot Testing
Snapshot Testing + Code Coverage
Testing Stateful Components
Quick Recap
Testing Connected Components
Testing Connected Components 2
Testing Reducers
Testing Actions
Section Review
Testing In Our Master Project
Bonus: Webpack + Babel
Introduction to Webpack + Babel
Webpack Config
Bonus: Build a GatsbyJS Blog
Quick Note About This Section
Introduction to Gatsby.js
Starting a Gatsby Project
Gatsby Pages
Gatsby GraphQL + Markdown
Building Our Blog 1
Building Our Blog 2
Building Our Blog 3
Building Our Blog 4
Building Our Blog 5
Appendix 1: Key Developer Concepts
CWD: Git + Github
CWD: Git + Github 2
Async Await
Open Source Projects
Contributing To Open Source
Contributing To Open Source 2
Exercise: Contribute To Open Source
AMA + Bonus
AMA - 100,000 Students!!
Coding Challenges
Bonus: Special Thank You Gift
24 November 2021
The instructor(s) do an excellent job explaining the "how", but also take the time to explain the "why." One of the best courses I've taken here on Udemy.
13 November 2021
Very clear and concise explainations about the history of front end web development and how React came to be.
12 November 2021
Don't waste your money. I found a four hour video on youtube that was better than this content. and It was free.
11 November 2021
The course has been very useful for me. It has a lot of contents about react.js and it is a reference guide on how to organize, develop and learning new features about reactJS. It's one of the few courses that show how to develop a big project like ecommerce from zero. The reason because I didn't give full stars is because I would have liked to see more examples of projects developed from scratch so that I could understand more and more the best approaches to use.
11 November 2021
very great course compiled with existing trendy technologies, i learned a lot and the master project was great to achieve and to add to my portfolio
9 November 2021
I'm still taking the course but so far I'm really impressed. I already have good knowledge in React but this course is really really good. They do not leave out the little details that I sometimes get stuck on and they really dive deep into every little thing and why it's happening. Awesome course so far!
4 November 2021
I learn so many think about react-js. when is was started to learn react js and started to watch these videos i don't know what's going on, but now i mead so many clone like amazone clone, neflix clone, unsplash clone and more....
3 November 2021
Both Andrei and Yihua are great tutors and are doing a great job with explaining how the code that we write works and why do we need it!
1 November 2021
Got stuck and there is no source code file that you can download and make corrections. Explanations are also not that good.
30 October 2021
Perfcet match, since i come from the complete web developer course, and i want to really get good at React
29 October 2021
DONT TAKE THIS COURSE I have taken 6 courses on udemy but I have never given less then 4.5 stars to any course. This course is not at all beginner friendly even for intermediate level this course is difficult. i WISH i HAD NEVER WASTED MY TIME ON THIS COURSE THEY HAS CHANGED THE TEACHER AFTER 2 SECTIONS...HORRIBLE EXPERINCE ...NOT AT ALL RECOMENDED ... PLEASE FIND ANOTHER REACT COURSE.
28 October 2021
Yihua jumps around the screen to much and to fast. He needs to think like a teacher and be, not only clear but concise as well. It is obviously easy for him as he already is proficient within these subjects where as students are not ...that's why we are taking the course. Also may times errors occur and disrupt functionality of the app and may be corrected in further videos however this is not fair on the student as they/we think we have done something wrong and spend valuable and considerable time trying to find the problem where in fact the teacher has not taken the time to slot in a "Note" during or at the end of the particular lesson advising that the error will be corrected in a later video! Generally the course content is fine though!
26 October 2021
I think the course isn't good mainly for beginners. But If you have used React js much time it can be good. when I bought the course I felt disappointed at first. And I gave 1 star for that. But I guess Andrei is an amazing guy and he doesn't deserve 1 star for that I change my mind and I gave him 5 stars.
4 October 2021
so far it's very didactical, i already have some knowledge of react, but im getting a lot of new things from this.
29 August 2021
i just love u guys , u litreally are doing a amazing job by making developer like us as self sufficient


Complete React Developer in 2022 (w/ Redux, Hooks, GraphQL) - Price chart


Complete React Developer in 2022 (w/ Redux, Hooks, GraphQL) - Ratings chart

Enrollment distribution

Complete React Developer in 2022 (w/ Redux, Hooks, GraphQL) - Distribution chart
6/2/202095% OFF
6/12/202095% OFF
9/15/202095% OFF
10/23/202093% OFF
11/2/202095% OFF
Related Topics
udemy ID
course created date
course indexed date
course submited by
Twitter LogoFacebookInstagram LogoYoutube LogoTelegram LogoEmail