Autoplay
Autocomplete
Speed
Previous Lecture
Complete and Continue
Complete React Developer in 2021 (w/ Redux, Hooks, GraphQL): Zero to Mastery
Introduction
Course Outline (4:57)
Join Our Online Classroom!
Exercise: Meet The Community
How-to's: Speed up videos, Downloading videos, Subtitles
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)
React Latest Version!
Web Developer Monthly
React Basics
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)
Master Project: Setting Up E-commerce Project
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)
Master Project: React Router and Routing
Routing In React (4:31)
Routing In Our Project (9:09)
React Router Dom (15:22)
withRouter() (9:26)
Master Project: Forms + Components
Shopping Data
Shop Page (12:38)
Collection Item (9:32)
Header Component (9:27)
Resources: Importing SVG In React
Introducing Forms In React (7:22)
Sign In Component (9:23)
Form Input Component (8:41)
Custom Button Component (6:07)
Master Project: Firebase + User Authentication
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
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)
Master Project: Redux 1
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)
Master Project: Session Storage + Persistence
Local Storage and Session Storage (8:02)
Redux Persist (11:01)
Master Project: Redux 2
Directory State Into Redux (12:09)
Collection State Into Redux (7:47)
Collection Overview Component (7:38)
Master Project: Advanced Routing
Nested Routing in Shop Page (8:08)
Improving Naming Of Component (1:47)
Collection Routing and Selector (8:11)
Memoizing selectCollection and collectionUrlParam
Optional: Currying
Master Project: State Normalization
Data Normalization + Collection Page (9:26)
Optional: Hash Tables vs Arrays
Data Flow In Our App (10:10)
Thinking About Data Flow (3:23)
Master Project: Stripe Payments Part 1
Introduction To Stripe (5:39)
Stripe Integration (16:31)
Cloning From This Point On
Finishing Touches + Look Ahead (6:13)
Master Project: Deploying To Production
Deploying To Heroku (12:06)
Resources: Buildpack
Linking Github to Heroku
Optional: Git + Heroku commands
Optimizing Production Build (7:02)
Master Project: CSS in JS - styled-components
CSS in JS (11:35)
styled-components (8:57)
styled-components In Our App (12:31)
Thinking About Tradeoffs (3:38)
styled-components In Our App 2 (3:22)
styled-components In Our App 3 (11:02)
Exercise: styled-components
Master Project: Advanced Redux + Firebase
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
Master Project: HOC Patterns
WithSpinner HOC (10:58)
WithSpinner HOC 2 (8:46)
Quick Note About Next Lesson
Optional: How To Build HOCs (19:19)
Master Project: Asynchronous Redux
Observables + Observer Pattern (12:41)
Promise Pattern (11:56)
Redux Thunk (19:48)
What Does Redux Thunk Do? (2:40)
Debugging Our Code (10:44)
Master Project: Container Pattern
Container Pattern (14:30)
Refactoring Is A Tradeoff (4:52)
Master Project: Redux-Saga
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)
Master Project: React Hooks
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)
Master Project: Stripe Payments Part 2 - Backend
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)
Master Project: Context API
Quick note about cloning this repo
Introduction To Context API (6:22)
Context Consumer + useContext Hook (12:11)
Context Provider (13:29)
Cart Context (14:04)
Provider Context Pattern (16:53)
Provider Context Pattern 2 (11:20)
Redux vs Context API (9:26)
Master Project: GraphQL + Apollo
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)
Master Project: Mobile Support
Mobile Responsiveness (10:22)
Mobile Responsiveness 2 (14:10)
Exercise: Mobile Friendly App
Master Project: React Performance
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
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)
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+
Bonus: Firebase Security
Firebase Security Rules (8:44)
User Security Rule (10:56)
User Security Rule 2 (7:21)
More Security Rules (5:51)
Coding Challenge: Firebase Cart
Bonus: Testing
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:36)
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
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)
Open Source Projects
Contributing To Open Source (14:44)
Contributing To Open Source 2 (9:42)
Exercise: Contribute To Open Source
AMA + Bonus
AMA - 100,000 Students!! (38:30)
Coding Challenges
Become a ZTM Ambassador ➡ Refer new students. Earn cash.
Course Outline
Download