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 with Toolkits (11:12)
- Introducing Monsters Rolodex (1:54)
- Getting Started with Vite (5:44)
- Quick Note: React 18 and Strict Mode
- Vite Packages (12:50)
- Vite Scripts (10:29)
- Update React to 19 (6:59)
- Installing and Using Yarn (4:01)
- Understanding React main.jsx (8:11)
- Intro to JSX (8:20)
- Components and useState - Part 1 (8:45)
- useState Setter Function - Part 2 (8:38)
- Basics of Props (10:57)
- Iterating Components Through an Array (8:56)
- Optional: map() + key attribute
- Rendering (9:19)
- useState and Re-rendering (11:44)
- Side Effects and useEffect (10:13)
- Fetching User Data (8:08)
- Optional: Promises
- Getting Images with RoboHash (3:32)
- Folder Structure and Components (13:10)
- Filtering by Search Input (6:53)
- Optional: filter(), includes()
- Finishing Styles (10:22)
- Scaffolding a project with Create React App (9:37)
- Don't Eject (1:57)
- 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