Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Zero To Mastery

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

via Zero To Mastery

Go to class Write review

Overview

Learn React.js from two industry experts. This is the only React JS bootcamp course you need to learn React, build advanced large-scale apps from scratch, and get hired as a React Developer this year.
  • Build enterprise level React applications and deploy to production including a massive E-commerce app using: Redux, Hooks, GraphQL, ContextAPI, Stripe, Firebase
  • Learn to compare tradeoffs when it comes to different state management
  • Learn to build reactive, performant, large scale applications like a Senior Developer
  • Use Firebase to build full stack applications
  • Learn the latest features in React including Hooks, Context API, Suspense, React Lazy + more
  • 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
  • Master the latest ecosystem of a React Developer from scratch
  • Routing with React Router
  • Exact steps to become a top 10% ReactJS Developer
  • Converting apps to Progressive Web Apps
  • Testing your application with Jest, including snapshot testing
  • Use Redux, Redux Thunk and Redux Saga in your applications
  • Handling online payments with the Stripe API
  • Set up authentication and user accounts
  • Using the latest ES6/ES7/ES8/ES9/ES10 JavaScript to write clean code

Syllabus

  •   Introduction
    • Complete React Developer: Zero to Mastery
    • Course Outline
    • Exercise: Meet Your Classmates and Instructor
    • Understanding Your Video Player
    • Set Your Learning Streak Goal
  •   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
    • Course Resources + Code
    • Environment Setup For Mac
    • Environment Setup For Windows
    • NPM vs YARN
    • Yihua's VSCode Font and Settings
    • VSCode Settings Update
    • Getting Started with Toolkits
    • Introducing Monsters Rolodex
    • Getting Started with Vite
    • Quick Note: React 18 and Strict Mode
    • Vite Packages
    • Vite Scripts
    • Update React to 19
    • Installing and Using Yarn
    • Understanding React main.jsx
    • Intro to JSX
    • Components and useState - Part 1
    • useState Setter Function - Part 2
    • Basics of Props
    • Iterating Components Through an Array
    • Optional: map() + key attribute
    • Rendering
    • useState and Re-rendering
    • Side Effects and useEffect
    • Fetching User Data
    • Optional: Promises
    • Getting Images with RoboHash
    • Folder Structure and Components
    • Filtering by Search Input
    • Optional: filter(), includes()
    • Finishing Styles
    • Scaffolding a project with Create React App
    • Don't Eject
    • DOM & Virtual DOM
    • React & ReactDOM
    • React & ReactDOM part 2
    • ReactDOM v18 Changes
    • DOM Paint Flashing
    • Let's Have Some Fun (+ Free Resources)
  •   Capstone Project: Intro + Setup
    • Optional: Git + Github
    • Optional: Connecting With SSH To Github
    • The Long Road Ahead
    • Project Overview
    • Github Strategy
    • Scaffolding Our Capstone Project
    • Setting Up Our Categories
    • Endorsements On LinkedIn
    • Adding Sass
    • Category Item Component
    • Directory Component
    • Adding Fonts
    • Unlimited Updates
  •   Routing + React-Router
    • Routing
    • Updating/Upgrading Libraries
    • Setting Up Our Homepage
    • React Router Outlet
    • Navigation Bar Component
    • React Router Link
    • Styling for Navigation + Logo
    • Course Check-In
  •   Authentication + Firebase
    • Setting Up Firebase
    • Authentication Flow
    • Authenticating With Firebase
    • Optional: Async Await
    • Optional: How to fix 403: restricted_client error
    • Introducing Firestore Data Models
    • Setting Up User Documents
    • Finish Creating User Documents
    • Sign In With Redirect
    • Sign Up Form Pt.1
    • Sign Up Form Pt.2
    • Sign Up With Email + Password
    • Generalizing Form Input Component
    • Custom Button Component
    • Sign In Form
    • Finishing Authentication Page
    • Implement a New Life System
  •   React Context For State Management
    • Need For Context
    • User Context
    • Re-rendering From Context
    • Signing Out
    • Exercise: Imposter Syndrome
  •   Observer Pattern
    • Observer: onAuthStateChange
    • Finalizing Auth Listener
    • Observer Pattern
  •   React Context Continued
    • New Shop Page
    • Products Context
    • Product Card Component
    • Cart Icon & Dropdown
    • Toggle Cart Open
    • Add To Cart Pt.1
    • Add To Cart Pt.2
    • Optional: reduce()
    • Cart Item Designs
    • Creating Checkout Page
    • Decrement Checkout Item Quantity
    • Checkout Item Pt.2
    • Checkout Item Pt.3
    • Cart Total
  •   Firebase Database Storage
    • Firestore DB No-SQL
    • addCollectionAndDocuments Pt.1
    • addCollectionAndDocuments Pt.2
    • Get Products + Categories From Firestore
    • Using Our CategoriesMap
    • Category Preview Component
    • Nested Routes in Shop
    • Category Page
  •   CSS-In-JS + Styled-Components
    • Fixing Clashing Styles
    • Introducing Styled-Components
    • Styled-Components - Button
    • Styled-Component - Cart Dropdown
    • Styled-Component - Directory Item & Cart Icon
    • Styled-Component - Form Input Component
    • Last Touches
  •   Deploying With Netlify
    • Deploying On Netlify
    • Adding Redirects For Netlify
  •   Reducers
    • Reducers explained
    • User Reducer
    • Cart Reducer Pt. 1
    • Cart Reducer Pt. 2
    • Cart Reducer Pt. 3
  •   Redux
    • Redux Toolkit Aside
    • Redux vs Context: Access
    • Redux vs Context: Data Flow
    • React-Redux: Installation
    • React-Redux: Setting Up Our Store
    • React-Redux: Creating User Reducer
    • Redux Part: Selectors
    • Categories Reducer
    • Categories Selectors
    • Business Logic in Our Selectors
    • What Triggers useSelector
    • Demystifying Middleware
    • Redux Triggers Extra Re-renders
    • Optional: Memoization
    • Reselect Library
    • Migrating Cart Context to Redux Pt. 1
    • Migrating Cart Context to Redux Pt. 2
    • Migrating Cart Context to Redux Pt. 3
    • Migrate Cart Context to Redux Pt. 4
  •   Redux Extended Tools
    • Redux-Persist
    • Redux-Devtools
  •   Asynchronous Redux: Redux-Thunk
    • Asynchronous Redux: Redux-Thunk
    • Redux-Thunk Pt. 2
    • Redux-Thunk Pt. 3
  •   Asynchronous Redux: Redux-Saga
    • Asynchronous Redux: Redux-Saga
    • Generator Functions
    • Redux-Saga: fetchCategoriesAsync Thunk to Saga
    • Redux-Saga: Converting onAuthStateChanged Listener to Promise
    • Redux-Saga: Check User Session Saga Pt. 1
    • Redux-Saga: Check User Session Saga Pt. 2
    • Redux-Saga: Sign in Sagas
    • Redux-Saga: Sign up Sagas
    • Redux-Saga: Sign out Sagas
  •   Redux Toolkit
    • Redux Toolkit Intro
    • Using createSlice
    • Using Redux Toolkit Action Creators
    • Non Serializable Value Middleware
    • Immutable Middleware
    • Categories to createSlice
    • Cart to createSlice
  •   Serverless Functions + Stripe
    • The Need for Serverless Functions
    • Serverless Functions Explained
    • Setting up Stripe
    • Setting up Our PaymentForm
    • Writing Our First Serverless Function
    • Finishing Stripe Payment
    • Tidying Up Our UI
    • Adding Auth With Netlify URL
    • Adding Environment Variables To Netlify
  •   Typescript Basics: Typing Monsters-Rolodex
    • Typescript Introduction
    • Starting our Typing
    • Typescript Interfaces
    • Typescript Types & Third Party Library Types
    • ChangeEvent Type From React
    • Understanding Generics
    • Typing React's SetState
  •   Typescript Advanced: Typing Redux + Crwn-Clothing
    • Crwn-Clothing Typescript Overview
    • Typing createAction
    • Typing User Action Creators
    • Typing User Selectors
    • The Problem With Discriminating Unions
    • Type Predicate Functions
    • Intersections + Return Types
    • withMatcher Type
    • Improving Our Reducer Typing
    • Typing Redux Cart Files Pt. 1
    • Typing Redux Cart Files Pt. 2
  •   Typescript Advanced: Typing Firebase + User Redux Files
    • Typing Out Firebase Utils
    • Typing User Actions
    • Typing User Reducer + Selectors
  •   Typescript Advanced: Redux Store + Middleware
    • Typing Our Rootstate
    • Typing Third Party Libraries
    • Typing Our Custom Middleware
  •   Typescript Advanced: Redux-Saga
    • Typing Categories Saga
    • Typing User Sagas Pt. 1
    • Typing User Sagas Pt. 2
  •   Typescript Advanced: Typing Our Crwn-Clothing Components
    • Typing Button Component
    • Typing Input & Form Components
    • Typing SVG Imports
    • Typing Our Payment Form
  •   GraphQL + Apollo Client
    • GraphQL Explained
    • GraphQL Playground
    • Graphql Queries
    • Categories Query
    • Updating Components To Consume GraphQL Values
    • Variables In useQuery & Caching
    • Mutations
    • Apollo vs Redux
  •   Performance Optimizations
    • Do Not Optimize For Performance Until You Need It
    • useCallback Pt.1
    • useCallback Pt. 2
    • useMemo
    • React Devtools Profiling & Memo
    • Code Splitting, Dynamic Imports, Suspense & Lazy
    • React Compiler
  •   Firebase Rule Security
    • Firebase Rule Security
  •   React Interview Questions + Advice
    • Don't Over Complicate
    • Be a Late Follower
    • Break Things Down
    • It Will Never Be Perfect
    • Learning Guideline
    • Endorsements On LinkedIn
    • Become An Alumni
    • Common React Interview Questions
  •   React and Generative AI Coding
    • Introduction to Generative AI Coding
    • Introduction to Cline
    • What are Tokens
    • Cost of Tokens
    • Search Bar Feature
    • Hallucinations
    • Building a Product Page with Context Engineering
  •   Bonus: Progressive Web App
    • Note About This Section
    • Progressive Web Apps
    • Opt-In Service Worker in CRA
    • Resources: Progressive Web Apps
    • Progressive Web Apps Examples
    • PWA - HTTPS
    • Note on server.js code
    • Resources: PWA - HTTPS
    • PWA - App Manifest
    • PWA - Service Workers
    • Resources: PWA - Service Workers
    • Update for CRA v4.0.0+ and React 17+
    • PWA - Final Thoughts
    • PWA - Our Application
    • Global Styles and Media Queries
    • Remaining Mobile Styles
  •   Bonus: Testing
    • Note About This Section
    • Section Overview
    • Updated Code For This Section
    • 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
    • Quick Note: Upcoming API Endpoint + ES6 Modules
    • Asynchronous Tests
    • Asynchronous Tests 2
    • Resources: Jest Cheat Sheet
    • Mocks and Spies
    • Exercise: #1 - Testing With Jest
    • Resources: Enzyme
    • Enzyme vs React Testing Library
    • Introduction To Enzyme
    • Quick Note: Empty Snapshots
    • Snapshot Testing
    • Snapshot Testing + Code Coverage
    • Testing Stateful Components
    • Quick Recap
    • Testing Connected Components
    • Testing Connected Components 2
    • Testing Reducers
    • Testing Actions
    • Section Review
    • Aside - React Testing Library
    • Basics of RTL - Render and Screen
    • Button Tests - Part 1
    • Button Tests - Part 2
    • Render with Providers and Cart Icon Tests
    • Navigation Tests - Part 1
    • Navigation Tests - Part 2
    • Product Card and Testing Redux Actions
    • Navigation Tests - Part 3
    • Category Tests and React-Router-Dom Mocks
    • Category Reducer Test
    • Category Selector Test
    • Category Sagas - Part 1
    • Category Sagas - Part 2
  •   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
    • map()
    • Promises
    • filter()
    • includes()
    • CWD: Git + Github
    • Github Update: Master --> Main
    • CWD: Git + Github 2
    • Async Await
    • find()
    • reduce()
    • Memoization
    • Currying
    • ES6 Classes
    • Inheritance
  •   Open Source Projects
    • Watch Git, Github + Open Source Projects Section
  •   Where To Go From Here?
    • Thank You!
    • Review This Course!
    • Become An Alumni
    • Learning Guideline
    • ZTM Events Every Month
    • LinkedIn Endorsements
    • AMA - 100,000 Students!!

Taught by

Andrei Neagoie and Yihua Zhang

Reviews

Start your review of Complete React Developer (w/ Redux, Hooks, GraphQL)

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.