You are NOT signed in as a student! Your progress will not be saved and you won't see milestones on your ZTM Passport.
Make sure you are logged into
Academy
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Complete React Developer in 2025 (w/ Redux, Hooks, GraphQL): Zero to Mastery
Introduction
Complete React Developer: Zero to Mastery (3:48)
Course Outline (4:57)
Exercise: Meet Your Classmates and Instructor
ZTM Plugin + Understanding Your Video Player
Set Your Learning Streak Goal
React Key Concepts
React Concepts (2:06)
The Birth of React.js (9:24)
Declarative vs Imperative (6:18)
Component Architecture (5:23)
One Way Data Flow (6:10)
UI Library (4:52)
How To Be A Great React Developer (4:18)
Web Developer Monthly
React Basics
Section Overview (4:05)
Course Guideline + Code
Environment Setup For Mac (8:08)
Environment Setup For Windows (9:53)
NPM vs YARN
Yihua's VSCode Font and Settings
VSCode Settings Update
Getting Started (10:19)
Create React App - NPX (11:00)
Create React App - React-Scripts 1 (11:42)
Create React App - React-Scripts 2 (11:44)
Create React App - Everything Else (6:03)
Don't Eject (1:57)
Vite (9:38)
Quick Note: React 18 and Strict Mode
Monsters Rolodex - Class Components (9:00)
Monsters Rolodex - Component State (7:37)
Monsters Rolodex - setState (9:27)
Monsters Rolodex - States and Shallow Merge (5:57)
Monsters Rolodex - setstate and Secondary Callback (9:01)
Monsters Rolodex - Mapping Arrays to Elements (9:26)
Optional: map() + key attribute
Monsters Rolodex - Keys for Mapping (5:08)
Monsters Rolodex - Single Page Applications (SPAs) (7:18)
Monsters Rolodex - Lifecycle Method: componentDidMount (10:14)
Optional: Promises
Monsters Rolodex - Renders & Re-renders (5:43)
Monsters Rolodex - Input Search Box Component (11:19)
Monsters Rolodex - Searching & Filtering (7:51)
Optional: filter(), includes()
Monsters Rolodex - Storing Original Data (9:32)
Monsters Rolodex - Optimizations (7:30)
Monsters Rolodex - Understanding Components (7:56)
Monsters Rolodex - CardList Component (7:09)
Monsters Rolodex - Component Props (7:26)
Monsters Rolodex - Rendering and Re-rendering part 2 (7:05)
Monsters Rolodex - SearchBox Component (8:49)
Monsters Rolodex - CSS in React (9:29)
Monsters Rolodex - CardList Component (7:01)
Monsters Rolodex - Finishing Touches (7:41)
Functional vs Class Components (4:22)
Class Component Lifecycle Method Breakdown (5:21)
Monsters Rolodex - Functional Component Intro (5:51)
Pure & Impure Functions (6:22)
Monsters Rolodex - Hooks: useState (7:10)
Monsters Rolodex - Functional Component Re-rendering (6:47)
Monsters Rolodex - Infinite Re-rendering (7:32)
Monsters Rolodex - Hooks: useEffect (11:16)
Monsters Rolodex - Remaining Components (5:50)
React v18: Migrating from React v17 + ReactDOM v18 Changes (5:38)
React v18: Strict Mode Changes (4:43)
DOM & Virtual DOM (10:10)
React & ReactDOM (11:07)
React & ReactDOM part 2 (6:25)
ReactDOM v18 Changes (2:28)
DOM Paint Flashing (6:09)
Let's Have Some Fun (+ Free Resources)
Capstone Project: Intro + Setup
Optional: Git + Github
Optional: Connecting With SSH To Github
The Long Road Ahead (2:52)
Project Overview (1:47)
Github Strategy (7:21)
Scaffolding Our Capstone Project (7:15)
Setting Up Our Categories (6:01)
Endorsements On LinkedIn
Adding Sass (6:56)
Category Item Component (6:58)
Directory Component (7:16)
Adding Fonts (9:21)
Unlimited Updates
Routing + React-Router
Routing (6:18)
Updating/Upgrading Libraries (8:22)
Setting Up Our Homepage (11:16)
React Router Outlet (7:01)
Navigation Bar Component (5:04)
React Router Link (7:44)
Styling for Navigation + Logo (6:59)
Course Check-In
Authentication + Firebase
Setting Up Firebase (8:21)
Authentication Flow (13:01)
Authenticating With Firebase (14:34)
Optional: Async Await
Optional: How to fix 403: restricted_client error
Introducing Firestore Data Models (6:49)
Setting Up User Documents (14:03)
Finish Creating User Documents (6:49)
Sign In With Redirect (11:39)
Sign Up Form Pt.1 (15:10)
Sign Up Form Pt.2 (10:20)
Sign Up With Email + Password (12:33)
Generalizing Form Input Component (13:43)
Custom Button Component (10:59)
Sign In Form (10:47)
Finishing Authentication Page (8:05)
Implement a New Life System
React Context For State Management
Need For Context (8:26)
User Context (12:19)
Re-rendering From Context (6:15)
Signing Out (8:44)
Exercise: Imposter Syndrome (2:55)
Observer Pattern
Observer: onAuthStateChange (11:00)
Finalizing Auth Listener (8:21)
Observer Pattern (10:25)
React Context Continued
New Shop Page (6:01)
Products Context (6:46)
Product Card Component (8:16)
Cart Icon & Dropdown (9:27)
Toggle Cart Open (7:56)
Add To Cart Pt.1 (8:46)
Add To Cart Pt.2 (10:40)
Optional: reduce()
Cart Item Designs (8:08)
Creating Checkout Page (8:18)
Decrement Checkout Item Quantity (7:24)
Checkout Item Pt.2 (9:01)
Checkout Item Pt.3 (8:42)
Cart Total (3:52)
Firebase Database Storage
Firestore DB No-SQL (7:01)
addCollectionAndDocuments Pt.1 (9:28)
addCollectionAndDocuments Pt.2 (7:04)
Get Products + Categories From Firestore (9:24)
Using Our CategoriesMap (9:09)
Category Preview Component (7:39)
Nested Routes in Shop (6:24)
Category Page (8:51)
CSS-In-JS + Styled-Components
Fixing Clashing Styles (9:09)
Introducing Styled-Components (11:34)
Styled-Components - Button (9:09)
Styled-Component - Cart Dropdown (9:36)
Styled-Component - Directory Item & Cart Icon (10:52)
Styled-Component - Form Input Component (8:54)
Last Touches (3:56)
Deploying With Netlify
Deploying On Netlify (8:57)
Adding Redirects For Netlify (9:34)
Reducers
Reducers explained (11:25)
User Reducer (17:14)
Cart Reducer Pt. 1 (9:56)
Cart Reducer Pt. 2 (7:21)
Cart Reducer Pt. 3 (9:15)
Redux
Redux Toolkit Aside (4:13)
Redux vs Context: Access (8:49)
Redux vs Context: Data Flow (4:52)
React-Redux: Installation (10:39)
React-Redux: Setting Up Our Store (7:13)
React-Redux: Creating User Reducer (10:33)
Redux Part: Selectors (6:07)
Categories Reducer (7:45)
Categories Selectors (8:01)
Business Logic in Our Selectors (8:41)
What Triggers useSelector (8:04)
Demystifying Middleware (13:21)
Redux Triggers Extra Re-renders (5:22)
Optional: Memoization
Reselect Library (13:41)
Migrating Cart Context to Redux Pt. 1 (8:42)
Migrating Cart Context to Redux Pt. 2 (5:53)
Migrating Cart Context to Redux Pt. 3 (8:37)
Migrate Cart Context to Redux Pt. 4 (6:38)
Redux Extended Tools
Redux-Persist (7:05)
Redux-Devtools (9:31)
Asynchronous Redux: Redux-Thunk
Asynchronous Redux: Redux-Thunk (8:10)
Redux-Thunk Pt. 2 (7:46)
Redux-Thunk Pt. 3 (8:32)
Asynchronous Redux: Redux-Saga
Asynchronous Redux: Redux-Saga (7:59)
Generator Functions (8:38)
Redux-Saga: fetchCategoriesAsync Thunk to Saga (10:34)
Redux-Saga: Converting onAuthStateChanged Listener to Promise (7:13)
Redux-Saga: Check User Session Saga Pt. 1 (11:03)
Redux-Saga: Check User Session Saga Pt. 2 (7:54)
Redux-Saga: Sign in Sagas (9:04)
Redux-Saga: Sign up Sagas (10:25)
Redux-Saga: Sign out Sagas (8:30)
Redux Toolkit
Redux Toolkit Intro (8:33)
Using createSlice (11:41)
Using Redux Toolkit Action Creators (7:23)
Non Serializable Value Middleware (10:34)
Immutable Middleware (4:03)
Categories to createSlice (4:37)
Cart to createSlice (9:31)
Serverless Functions + Stripe
The Need for Serverless Functions (8:53)
Serverless Functions Explained (6:57)
Setting up Stripe (8:39)
Setting up Our PaymentForm (8:19)
Writing Our First Serverless Function (9:30)
Finishing Stripe Payment (12:34)
Tidying Up Our UI (12:56)
Adding Auth With Netlify URL (1:23)
Adding Environment Variables To Netlify (5:19)
Typescript Basics: Typing Monsters-Rolodex
Typescript Introduction (7:51)
Starting our Typing (8:14)
Typescript Interfaces (9:51)
Typescript Types & Third Party Library Types (11:49)
ChangeEvent Type From React (3:29)
Understanding Generics (11:20)
Typing React's SetState (9:19)
Typescript Advanced: Typing Redux + Crwn-Clothing
Crwn-Clothing Typescript Overview (7:54)
Typing createAction (13:03)
Typing User Action Creators (8:35)
Typing User Selectors (8:46)
The Problem With Discriminating Unions (7:45)
Type Predicate Functions (5:53)
Intersections + Return Types (8:35)
withMatcher Type (7:20)
Improving Our Reducer Typing (9:15)
Typing Redux Cart Files Pt. 1 (9:20)
Typing Redux Cart Files Pt. 2 (7:26)
Typescript Advanced: Typing Firebase + User Redux Files
Typing Out Firebase Utils (13:20)
Typing User Actions (8:47)
Typing User Reducer + Selectors (6:33)
Typescript Advanced: Redux Store + Middleware
Typing Our Rootstate (9:39)
Typing Third Party Libraries (2:23)
Typing Our Custom Middleware (1:43)
Typescript Advanced: Redux-Saga
Typing Categories Saga (8:08)
Typing User Sagas Pt. 1 (8:53)
Typing User Sagas Pt. 2 (5:28)
Typescript Advanced: Typing Our Crwn-Clothing Components
Typing Button Component (7:58)
Typing Input & Form Components (9:30)
Typing SVG Imports (7:16)
Typing Our Payment Form (8:19)
GraphQL + Apollo Client
GraphQL Explained (5:33)
GraphQL Playground (7:39)
Graphql Queries (10:09)
Categories Query (8:36)
Updating Components To Consume GraphQL Values (6:29)
Variables In useQuery & Caching (11:51)
Mutations (5:46)
Apollo vs Redux (5:17)
Performance Optimizations
Do Not Optimize For Performance Until You Need It (3:22)
useCallback Pt.1 (6:16)
useCallback Pt. 2 (3:59)
useMemo (6:44)
React Devtools Profiling & Memo (7:50)
Code Splitting, Dynamic Imports, Suspense & Lazy (10:40)
React Compiler (5:22)
Firebase Rule Security
Firebase Rule Security (6:35)
React Interview Questions + Advice
Don't Over Complicate (2:05)
Be a Late Follower (2:56)
Break Things Down (1:38)
It Will Never Be Perfect (1:53)
Learning Guideline
Endorsements On LinkedIn
Become An Alumni
Common React Interview Questions
Bonus: Progressive Web App
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
Update for CRA v4.0.0+ and React 17+
PWA - Final Thoughts (2:03)
PWA - Our Application (10:41)
Global Styles and Media Queries (8:36)
Remaining Mobile Styles (10:04)
Bonus: Testing
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 + ES6 Modules
Asynchronous Tests (10:18)
Asynchronous Tests 2 (11:41)
Resources: Jest Cheat Sheet
Mocks and Spies (12:50)
Exercise: #1 - Testing With Jest
Resources: Enzyme
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)
Aside - React Testing Library (4:04)
Basics of RTL - Render and Screen (8:56)
Button Tests - Part 1 (9:32)
Button Tests - Part 2 (5:21)
Render with Providers and Cart Icon Tests (14:21)
Navigation Tests - Part 1 (10:48)
Navigation Tests - Part 2 (5:56)
Product Card and Testing Redux Actions (7:17)
Navigation Tests - Part 3 (8:41)
Category Tests and React-Router-Dom Mocks (11:47)
Category Reducer Test (7:57)
Category Selector Test (6:09)
Category Sagas - Part 1 (9:21)
Category Sagas - Part 2 (13:57)
Bonus: Webpack + Babel
Introduction to Webpack + Babel (12:10)
Webpack Config (10:40)
Bonus: Build a GatsbyJS Blog
Quick Note About This Section
Introduction to Gatsby.js (7:55)
Starting a Gatsby Project (9:03)
Gatsby Pages (9:29)
Gatsby GraphQL + Markdown (8:39)
Building Our Blog 1 (10:53)
Building Our Blog 2 (9:12)
Building Our Blog 3 (6:54)
Building Our Blog 4 (7:26)
Building Our Blog 5 (9:32)
Appendix 1: Key Developer Concepts
map() (5:48)
Promises (14:57)
filter() (2:55)
includes() (12:50)
CWD: Git + Github (17:40)
Github Update: Master --> Main
CWD: Git + Github 2 (16:52)
Async Await (9:35)
find() (3:06)
reduce() (6:51)
Memoization (7:47)
Currying (4:24)
ES6 Classes (8:44)
Inheritance (14:41)
Open Source Projects
Watch Git, Github + Open Source Projects Section
Where To Go From Here?
Thank You! (1:17)
Review This Course!
Become An Alumni
Learning Guideline
ZTM Events Every Month
LinkedIn Endorsements
AMA - 100,000 Students!! (38:30)
Styled-Component - Directory Item & Cart Icon
This lecture is available exclusively for ZTM Academy members.
If you're already a member,
you'll need to login
.
Join ZTM To Unlock All Lectures