Course Curriculum
Introduction
Available in
days
days
after you enroll
React Key Concepts
Available in
days
days
after you enroll
React Basics
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Authentication + Firebase
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Observer Pattern
Available in
days
days
after you enroll
React Context Continued
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
CSS-In-JS + Styled-Components
Available in
days
days
after you enroll
Deploying With Netlify
Available in
days
days
after you enroll
Reducers
Available in
days
days
after you enroll
Redux
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Asynchronous Redux: Redux-Thunk
Available in
days
days
after you enroll
Asynchronous Redux: Redux-Saga
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Serverless Functions + Stripe
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Typescript Advanced: Typing Redux + Crwn-Clothing
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Typescript Advanced: Redux Store + Middleware
Available in
days
days
after you enroll
Typescript Advanced: Redux-Saga
Available in
days
days
after you enroll
Typescript Advanced: Typing Our Crwn-Clothing Components
Available in
days
days
after you enroll
GraphQL + Apollo Client
Available in
days
days
after you enroll
Performance Optimizations
Available in
days
days
after you enroll
Firebase Rule Security
Available in
days
days
after you enroll
React Interview Questions + Advice
Available in
days
days
after you enroll
Bonus: Progressive Web App
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Bonus: Build a GatsbyJS Blog
Available in
days
days
after you enroll
Appendix 1: Key Developer Concepts
Available in
days
days
after you enroll
Open Source Projects
Available in
days
days
after you enroll
Where To Go From Here?
Available in
days
days
after you enroll