Complete React Developer in 2020 (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
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 (200,000+ in the past 2 years) now work for some of the biggest tech companies around the world like Apple, Google, Amazon, Tesla, IBM and UNIQLO.
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
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.
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!
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.
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.
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!
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 $22/month.
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.
- 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)
- 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)
- The Long Road Ahead (2:52)
- Project Overview (1:47)
- Github + Project Repositories (4:47)
- Course Guideline + Github Links
- Quick Note About Github
- 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)
- Section Overview (3:15)
- Firebase Introduction (7:27)
- Adding a Project to Firebase (4:07)
- Note about Github
- 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)
- 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)
- Card 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)
- 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)
- 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)
- useContext + useMemo + useCallback
- Should You Adopt Hooks? (12:56)
- Introduction To GraphQL (16:02)
- Course Guideline + Github Links
- 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)
- Resources: Mutations
- 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)
- 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
- Note About This Section
- Section Overview (6:21)
- 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:45)
- 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
- Introduction To Enzyme (14:29)
- 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
This is a brand new course updated for 2020 with the latest React features! This course is taught by industry experts that have actually worked both in Silicon Valley and Toronto with React.js. Graduates of Andrei’s courses are now working at Google, Amazon, Apple, IBM, Tesla, Facebook and other top tech companies.
Using the latest version of React: 16.10+, this course is focused on efficiency. Never spend time on confusing, out of date, incomplete tutorials anymore.
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 2020. Along the way, we 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 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 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 Saga
- Asynchronous Redux
- React Hooks
- Context API
- React Suspense + React Lazy
- Stripe API
- 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 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 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.
See you inside the course!
Answers to (at least some of) your questions
Are there any prerequisites for this course?
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.