Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Complete React Developer in 2024 (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
Understanding Your Video Player (notes, video speed, subtitles + more)
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 (6:13)
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
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)
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)
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