Complete React Developer in 2021 (w/ Redux, Hooks, GraphQL)
Become a Senior React Developer! Build a massive E-commerce app with Redux, Hooks, GraphQL, ContextAPI, Stripe, Firebase.
What you'll 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
- ✓Set up authentication and user accounts
- ✓Learn to compare tradeoffs when it comes to different state management
- ✓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 JavaScript to write clean code
Meet your instructors
Hi! I'm Andrei.
Senior Software Developer turned Instructor, Founder of ZTM
Andrei is the instructor of some of the highest rated programming courses on the web. Some of his students (500,000+ in the past few years) now work for some of the biggest tech companies around the world like Apple, Google, Amazon, Tesla, IBM, Shopify and many more.
He has worked 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.
Hi! I'm Yihua.
Senior Software Developer and Instructor
Yihua is a self-taught Web Developer who has over a decade of experience teaching in different industries. He is dedicated to helping his students gain the fundamental skills required to go from zero knowledge to getting hired, and contributing meaningfully as soon as possible.
Yihua's courses will guide you to build beautifully written and richly featured applications, while ensuring you deeply understand all the ins and outs of the complex concepts you encounter along the way. Let’s do this!
Don't take our word for it
Eduard Matei
Love the fact that you build a great project, not just a simple to-do app. Key concepts are explained clearly. Great instructors. Highly recommend for anyone who wants to learn React + Front-end Development.
Mike Lee
I went from not knowing React to being very comfortable with it. If you've taken any of Andrei's other courses, you know how good of a teacher he is, and this React course is no different. Yihua is an amazing teacher as well. You won't be disappointed with this course!
Diego Unanue
Best course I’ve taken so far. You'll learn from basic to advanced topics. All of them very well explained. And the most important thing, you'll end up with a real good looking project that you can put on your portfolio or show in a job interview. You'll also learn SCSS. This course is amazing, 5 out of 5.
Chung-Fan Tsai
If you are wondering if you should start investing dozens of hours of your time into this course to become a full stack developer, just do it! Coming from someone who tried dozens of free tutorials, this is by far the most in-depth and well explained I've ever experienced. I ended up taking Python, JS, and Coding Interview courses as well, and let me tell you, when I was doing interviews as full stack dev, I used a lot of the knowledge I picked up in those courses. Andrei changed my life.
Brittney Postma
This course has so much great information and the community they provide is invaluable! I would recommend this course to anyone wanting to learn react inside and out!
Vincent Moore
This is by far the most complete course about React that I have seen. I definitely learned quite a bit about React in this rigorous course. It is long and thorough but worth the effort. As I continue to develop React apps, I will use this course as a reference.
Why Zero To Mastery is right for you
With so many online resources available, it can be paralyzing not only figuring out where to start but more importantly which courses will actually teach you the skills you need to get hired.
That’s why the Zero To Mastery Academy exists, to provide industry-leading courses and content to teach you the relevant skills you need to advance your career and get you hired at some of the top companies in the world.
Join now to get complete access to this course and all others for only $23/month.
Course Curriculum
To make sure this course is a good fit for you, you can start learning for free right now with over 1 hour of free lessons. Click the PREVIEW links below.
Course Curriculum
- Section Overview (6:13)
- Environment Setup For Mac (8:08)
- Environment Setup For Windows (9:53)
- NPM vs YARN
- Yihua's VSCode font and settings
- Create React App (3:31)
- Create React App 2 (5:28)
- React Project Setup (10:52)
- Don't Eject (1:57)
- Hooks vs Classes (2:13)
- Class Components (5:26)
- Thinking In JSX (5:44)
- Dynamic Content (5:40)
- Optional: map() + key attribute
- Single Page Application (5:37)
- Fetching Content (5:47)
- Optional: Promises
- Architecting Our App (6:20)
- Card List Component (8:06)
- Card Component (7:13)
- Exercise: Breaking Into Components (4:02)
- State vs Props (7:21)
- SearchField State (9:42)
- React Events (5:00)
- Filtering State (5:54)
- Optional: filter(), includes()
- Search Box Component (7:44)
- Exercise: Where To Put State? (3:57)
- Class Methods and Arrow Functions (10:01)
- Exercise: Event Binding (5:31)
- Quick Note: Binding in React
- Optional: Git + Github
- Optional: Connecting With SSH To Github
- Deploying Our App (7:21)
- React and ReactDOM (11:09)
- Latest React Package Updates (10:23)
- Revisiting VirtualDOM + Unidirectional Data Flow (14:20)
- Asynchronous setState (14:47)
- Introducing Lifecycle Methods (7:15)
- React Lifecycle Methods - Mounting (6:03)
- React Lifecycle Methods - Updating (12:58)
- React Lifecycle Methods - Unmounting (3:13)
- Section Review (3:02)
- Endorsements On LinkedIn
- The Long Road Ahead (2:52)
- Project Overview (1:47)
- Github + Project Repositories (4:47)
- Course Guideline + Github Links
- Quick Note About Github
- Update for CRA v4.0.0+ and React 17+
- E-commerce Homepage + SASS setup (13:19)
- Project Files + Modules (7:11)
- Project Component Architecture (4:07)
- CSS and SCSS files
- Homepage and Directory Components (14:49)
- Styling Menu Items (8:28)
- Updated Google Fonts UI
- Quick Note: React 17
- React 17: Updating Packages + Latest Version Of React (7:59)
- Section Overview (3:15)
- Firebase Introduction (7:27)
- IMPORTANT NOTE: firebase version in the course!
- Adding a Project to Firebase (4:07)
- Note about Github
- Firebase Compatibility Imports
- Google Sign In Authentication (7:41)
- Cloning From This Point On
- Google Sign In Authentication 2 (9:43)
- Optional: How to fix 403: restricted_client error
- Google Sign In Authentication 3 (9:42)
- Firebase Firestore (11:06)
- Optional: Async Await
- Storing User Data In Firebase (17:09)
- Note: Firestore update regarding permissions
- Storing User Data In Our App (9:19)
- Sign Up Component (10:13)
- Sign Up With Email and Password (4:56)
- Sign In With Email and Password (3:19)
- Section Review (2:14)
- Section Overview (2:09)
- Redux Introduction (4:40)
- Redux Concepts (9:41)
- Redux In Our Application (10:23)
- Redux Actions and Reducers (8:19)
- Setting Up Redux 1 (14:58)
- Setting Up Redux 2 (10:26)
- connect() and mapStateToProps (4:12)
- mapDispatchToProps (9:09)
- User Redirect and User Action Type (5:18)
- Cart Component (5:08)
- Cart Dropdown Component (4:24)
- Implementing Redux In Cart (10:03)
- Add To Cart Styling (6:14)
- Cart Item Reducer (14:14)
- Adding Multiple Items To Cart (8:02)
- Optional: find()
- Cart Item Component (7:15)
- Optional: reduce()
- Selectors in Redux (8:31)
- Optional: Memoization
- Reselect Library (8:22)
- Quick correction on CartIcon re-rendering
- User Selectors (7:41)
- Checkout Page (8:35)
- Checkout Page 2 (7:02)
- Extensible Code (2:53)
- Dispatch Action Shorthand (3:41)
- Checkout Item Component (8:18)
- Remove Items From Cart (8:42)
- Remove Items At Checkout (12:35)
- Section Overview (4:26)
- Quick Note: Firebase
- Firebase Refresher (13:06)
- Firebase Refresher 2 (5:58)
- Moving Our Shop Data To Firebase (9:40)
- Moving Our Shop Data To Firebase 2 (7:12)
- Reviewing What We Have Done (4:22)
- Bringing Shop Data To Our App (16:05)
- Adding Shop Data To Redux (7:44)
- NOTE: Shop page may break
- Introduction to Sagas (11:59)
- Correction about Saga flow
- Generator Functions (8:38)
- Quick Note About Sagas
- redux-saga (10:50)
- Redux Thunk Into Saga (9:43)
- take(), takeEvery(), takeLatest() (15:27)
- Root Saga (5:00)
- Planning Ahead With Sagas (4:45)
- Google Sign In Into Sagas (19:26)
- Email Sign In Into Sagas (13:21)
- Reviewing Our Sagas (10:01)
- Recreating Persistence (8:21)
- Sign Out With Sagas (7:34)
- Clear Cart Saga (9:37)
- Solution: Sign Up Saga (12:56)
- React Hooks Introduction (useState) (11:48)
- Why Did React Add Hooks?
- useEffect (14:51)
- Hook Rules (2:55)
- Converting Class Components With useState (8:11)
- useEffect In Our App (11:51)
- useEffect as ComponentWillUnmount() (6:40)
- useEffect Cheat Sheet
- Custom Hooks (13:50)
- Custom Hooks 2 (4:42)
- useReducer (8:32)
- Should You Adopt Hooks? (12:56)
- About This Section
- Introduction To Backend (12:23)
- Cloning From This Point On
- Creating our Server Inside the Project (10:32)
- Building A Basic Server (14:04)
- What We Are Building (4:33)
- Note: Stripe Keys in Upcoming Section
- Backend Payment Route (10:07)
- Connecting Client To Server (9:23)
- Deploying To Production (10:30)
- Introduction To GraphQL (16:02)
- Course Guideline + Github Links
- Resources: Mutations
- Note about our next lecture
- GraphQL Playground (12:37)
- Backend Code
- GraphQL Playground 2 (7:34)
- Introduction To Apollo (14:05)
- Apollo Container (10:43)
- Note: Destructuring change in next lesson
- Query With Variables (10:14)
- GraphQL vs Redux (8:31)
- Mutations On The Client (15:34)
- Mutations On The Client 2 (8:22)
- Adding Items With Apollo (12:43)
- Adding Items With Apollo 2 (5:56)
- Note: Compose in next lesson
- CartItem Count With Apollo (15:18)
- Exercises: Adding More GraphQL
- Should You Use GraphQL? (6:54)
- Code Splitting Introduction (13:30)
- Introducing React Lazy (3:02)
- React Lazy + Suspense (10:34)
- Error Boundaries (16:07)
- React.memo, PureComponent, shouldComponentUpdate (15:31)
- Performance In Our App (9:51)
- useCallback (10:50)
- useMemo (5:53)
- Gzipping and Compression (7:01)
- React < Profiler > (5:38)
- React Performance Cheat Sheet
- Note About This Section
- Progressive Web Apps (12:54)
- Opt-In Service Worker in CRA
- Resources: Progressive Web Apps
- Progressive Web Apps Examples (6:15)
- PWA - HTTPS (6:11)
- Note on server.js code
- Resources: PWA - HTTPS
- PWA - App Manifest (6:12)
- PWA - Service Workers (13:15)
- Resources: PWA - Service Workers
- PWA - Final Thoughts (2:03)
- Converting Our App To PWA (10:43)
- Addendum to Server.js
- Update for CRA v4.0.0+ and React 17+
- Note About This Section
- Section Overview (6:21)
- Updated Code For This Section
- Types of Tests (2:58)
- Testing Libraries (15:28)
- Note: The Next Videos
- Unit Tests (2:42)
- Integration Tests (2:46)
- Automation Testing (4:27)
- Final Note On Testing (2:56)
- Setting Up Jest (11:29)
- Our First Tests (11:10)
- Writing Tests (5:31)
- Quick Note: Upcoming API Endpoint
- Asynchronous Tests (10:18)
- Asynchronous Tests 2 (11:41)
- Resources: Jest Cheat Sheet
- Mocks and Spies (12:50)
- Note: Testing React Apps
- Enzyme vs React Testing Library
- Introduction To Enzyme (14:29)
- Quick Note: Empty Snapshots
- Snapshot Testing (9:29)
- Snapshot Testing + Code Coverage (4:54)
- Testing Stateful Components (11:16)
- Quick Recap (2:35)
- Testing Connected Components (23:50)
- Testing Connected Components 2 (3:35)
- Testing Reducers (14:57)
- Testing Actions (18:27)
- Section Review (4:11)
- Testing In Our Master Project
Course Details
One of our most popular courses, now updated with all new React features for 2021 (React v17)! 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 Zero To Mastery courses are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook + other top tech companies. This could be you.
By enrolling today, you’ll also get to join our exclusive live online community classroom to learn alongside thousands of students, alumni, mentors, TAs and Instructors. Most importantly, you will learn React from industry experts that have actual real-world experience having worked for top companies in both Silicon Valley and Toronto.
We guarantee that 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 2021. Along the way, you will build a massive e-commerce application similar to Shopify using React, Redux, React Hooks, React Router, GraphQL, Context API, Firebase, Redux-Saga, Stripe and more. This is going to be a full stack app (MERN stack) using Firebase.
The curriculum is 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 that anyone signed up for the course will have their own project to put in 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
- and 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 for 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, 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 or course:
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 likely used. Andrei has worked on enterprise-level React applications for large IPOed tech companies in Silicon Valley as well as Toronto. By having both of them teach, you get to see different perspectives and learn from 2 Senior Developers as if you are working at a company together.
3. You'll learn principles that are important beyond just what you learn as a beginner. Using the instructors' 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.
When is the best time to begin? It's today! By taking that first step right now, you are that much closer to developing the skills to build your own projects, get hired and closer to your dream career.
Click Start Learning Now to join the Academy and we'll see you inside the course!
Answers to (at least some of) your questions
Are there any prerequisites for this course?
While you should have some basic HTML, CSS and JavaScript knowledge, you do not need any experience with React or any other JS framework!
Who is this course for?
- Students who are interested in going beyond typical "beginner" tutorials
- Programmers who want to learn the most in demand skill of a web developer
- Developers that want to be in the top 10% of React Developers
- Students who want to gain experience working on a scalable large application
- Bootcamp or online tutorial graduates that want to go beyond the basics
Do you provide a certificate of completion?
We definitely do.
Can I use the course projects in my portfolio?
Yes, you’d be crazy not to in our slightly biased opinion! All projects are downloadable and ready to use the minute you join. Many of our students tell us the projects they built while following along with our courses were what got them interviews and because they built the projects themselves, they could confidently explain and walk through their work during the interview. You know what that means? Job offer!
Can I download the videos?
Definitely. You can download any and all lessons for personal use. We do everything we can to make learning easy, fun, and accessible whether that’s on your commute, on a flight or you just have limited access to good wifi.
How long does it usually take for me to build something and get hired?
Ultimately you’re the only can that can control that. However, while everyone learns at a different pace, students who put in a couple hours each day to apply what they’ve learned should be able to confidently build their own projects and start interviewing in 3-6 months. We don’t see just getting hired as the end goal though. Our advanced courses will also teach you the topics and skills you need to get promoted or hired as a senior developer.
Still have more questions specific to the Academy membership? No problem, head to the bottom of this page.
Live the life you want, starting now
Learning to code and becoming a developer provides endless opportunities to live the life you want. Whether that’s a high paying job with a world-class tech company, working remotely or building your own apps, the ZTM Academy will equip you with the skills and knowledge to achieve your dreams.
Our courses walk you through the entire journey of starting to learn to code to having a successful career as a developer. Along the way, you’ll not only be supported by Andrei, Yihua and course TAs but also your peers in the exclusive Zero To Mastery community.
Join now to take the first step to change your life.