The Ultimate React Course 2025: React, Next.js, Redux & More
0% Completed
01 – Welcome, Welcome, Welcome!
02 – PART 1 REACT FUNDAMENTALS [4 PROJECTS]
03 – A First Look at React
Download Attachment
Reading
Lesson 001 Section Overview
Video - 00:00:39 mins
Lesson 002 Why Do Front-End Frameworks Exist
Video - 00:10:27 mins
Lesson 003 React vs. Vanilla JavaScript
Video - 00:7:8 mins
Lesson 004 What is React
Video - 00:9:17 mins
Lesson 005 Setting Up Our Development Environment
Video - 00:8:47 mins
Lesson 006 Pure React
Video - 00:14:49 mins
Lesson 007 A Quick Look at React's Official Documentation
Video - 00:3:16 mins
Lesson 008 Setting Up a New React Project The Options
Video - 00:7:41 mins
Lesson 009 Setting Up a Project With Create-React-App
Video - 00:12:48 mins
04 – [Optional] Review of Essential JavaScript for React
Lesson 001 Section Overview
Video - 00:00:55 mins
Lesson 002 Destructuring Objects and Arrays
Video - 00:10:58 mins
Lesson 003 RestSpread Operator
Video - 00:9:53 mins
Lesson 004 Template Literals
Video - 00:4:50 mins
Lesson 005 Ternaries Instead of ifelse Statements
Video - 00:5:49 mins
Lesson 006 Arrow Functions
Video - 00:4:59 mins
Lesson 007 Short-Circuiting And Logical Operators &&, ,
Video - 00:10:32 mins
Lesson 008 Optional Chaining
Video - 00:6:30 mins
Lesson 009 The Array map Method
Video - 00:8:35 mins
Lesson 010 The Array filter Method
Video - 00:8:36 mins
Lesson 011 The Array reduce Method
Video - 00:7:20 mins
Lesson 012 The Array sort Method
Video - 00:6:38 mins
Lesson 013 Working With Immutable Arrays
Video - 00:11:6 mins
Lesson 014 Asynchronous JavaScript Promises
Video - 00:8:11 mins
Lesson 015 Asynchronous JavaScript AsyncAwait
Video - 00:7:30 mins
05 – Working With Components, Props, and JSX
Download Attachment
Reading
Lesson 001 Section Overview
Video - 00:00:54 mins
Lesson 002 Rendering the Root Component and Strict Mode
Video - 00:7:25 mins
Lesson 003 Before We Start Coding Debugging
Video - 00:9:46 mins
Lesson 004 Components as Building Blocks
Video - 00:4:34 mins
Lesson 005 Creating And Reusing a Component
Video - 00:9:40 mins
Lesson 006 What is JSX
Video - 00:6:25 mins
Lesson 007 Creating More Components
Video - 00:8:7 mins
Lesson 008 JavaScript Logic in Components
Video - 00:4:26 mins
Lesson 009 Separation of Concerns
Video - 00:5:57 mins
Lesson 010 Styling React Applications
Video - 00:12:17 mins
Lesson 011 Passing and Receiving Props
Video - 00:9:8 mins
Lesson 012 Props, Immutability, and One-Way Data Flow
Video - 00:7:9 mins
Lesson 013 CHALLENGE #1 Profile Card (v1)
Video - 00:17:25 mins
Lesson 014 The Rules of JSX
Video - 00:3:37 mins
Lesson 015 Rendering Lists
Video - 00:11:24 mins
Lesson 016 Conditional Rendering With &&
Video - 00:9:16 mins
Lesson 017 Conditional Rendering With Ternaries
Video - 00:4:45 mins
Lesson 018 Conditional Rendering With Multiple Returns
Video - 00:5:3 mins
Lesson 019 Extracting JSX Into a New Component
Video - 00:4:32 mins
Lesson 020 Destructuring Props
Video - 00:4:52 mins
Lesson 021 React Fragments
Video - 00:5:36 mins
Lesson 022 Setting Classes and Text Conditionally
Video - 00:8:00 mins
Lesson 023 Section Summary
Video - 00:5:33 mins
Lesson 024 CHALLENGE #2 Profile Card (v2)
Video - 00:8:15 mins
06 – State, Events, and Forms Interactive Components
Download Attachment
Reading
Lesson 001 Section Overview
Video - 00:1:2 mins
Lesson 002 Let's Build a Steps Component
Video - 00:14:48 mins
Lesson 003 Handling Events the React Way
Video - 00:7:21 mins
Lesson 004 What is State in React
Video - 00:6:8 mins
Lesson 005 Creating a State Variable With useState
Video - 00:9:7 mins
Lesson 006 Don't Set State Manually!
Video - 00:5:17 mins
Lesson 007 The Mechanics of State
Video - 00:4:51 mins
Lesson 008 Adding Another Piece of State
Video - 00:8:36 mins
Lesson 009 React Developer Tools
Video - 00:6:9 mins
Lesson 010 Updating State Based on Current State
Video - 00:5:16 mins
Lesson 011 More Thoughts About State + State Guidelines
Video - 00:6:33 mins
Lesson 012 A Vanilla JavaScript Implementation
Video - 00:6:34 mins
Lesson 013 CHALLENGE #1 Date Counter (v1)
Video - 00:13:9 mins
Lesson 014 Starting a New Project The Far Away Travel List
Video - 00:4:8 mins
Lesson 015 Building the Layout
Video - 00:8:54 mins
Lesson 016 Rendering the Items List
Video - 00:8:42 mins
Lesson 017 Building a Form and Handling Submissions
Video - 00:11:55 mins
Lesson 018 Controlled Elements
Video - 00:18:26 mins
Lesson 019 State vs. Props
Video - 00:3:30 mins
Lesson 020 EXERCISE #1 Flashcards
Video - 00:13:56 mins
Lesson 021 CHALLENGE #2 Date Counter (v2)
Video - 00:10:31 mins
07 – Thinking In React State Management
Download Attachment
Reading
Lesson 001 Section Overview
Video - 00:00:58 mins
Lesson 002 What is Thinking in React
Video - 00:4:59 mins
Lesson 003 Fundamentals of State Management
Video - 00:9:24 mins
Lesson 004 Thinking About State and Lifting State Up
Video - 00:14:41 mins
Lesson 005 Reviewing Lifting Up State
Video - 00:6:25 mins
Lesson 006 Deleting an Item More Child-to-Parent Communication!
Video - 00:8:14 mins
Lesson 007 Updating an Item Complex Immutable Data Operation
Video - 00:7:43 mins
Lesson 008 Derived State
Video - 00:3:3 mins
Lesson 009 Calculating Statistics as Derived State
Video - 00:10:43 mins
Lesson 010 Sorting Items
Video - 00:10:48 mins
Lesson 011 Clearing the List
Video - 00:5:3 mins
Lesson 012 Moving Components Into Separate Files
Video - 00:8:53 mins
Lesson 013 EXERCISE #1 Accordion Component (v1)
Video - 00:14:15 mins
Lesson 014 The children Prop Making a Reusable Button
Video - 00:16:10 mins
Lesson 015 More Reusability With the children Prop
Video - 00:8:12 mins
Lesson 016 EXERCISE #2 Accordion Component (v2)
Video - 00:10:15 mins
Lesson 017 CHALLENGE #1 Tip Calculator
Video - 00:22:9 mins
08 – [Optional] Practice Project Eat-‘N-Split
Lesson 001 Section Overview
Video - 00:00:55 mins
Lesson 002 Project Setup
Video - 00:3:52 mins
Lesson 003 Building the Static App List of Friends
Video - 00:12:1 mins
Lesson 004 Building the Static App Forms
Video - 00:9:27 mins
Lesson 005 Displaying the New Friend Form
Video - 00:6:33 mins
Lesson 006 Adding a New Friend
Video - 00:18:38 mins
Lesson 007 Selecting a Friend
Video - 00:15:2 mins
Lesson 008 Creating Controlled Elements
Video - 00:9:53 mins
Lesson 009 Splitting a Bill
Video - 00:12:47 mins
09 – PART 2 INTERMEDIATE REACT [2 PROJECTS]
10 – Thinking in React Components, Composition, and Reusability
Download Attachment
Reading
Lesson 001 Section Overview
Video - 00:1:00 mins
Lesson 002 Setting Up the usePopcorn Project
Video - 00:4:10 mins
Lesson 003 How to Split a UI Into Components
Video - 00:12:35 mins
Lesson 004 Splitting Components in Practice
Video - 00:23:57 mins
Lesson 005 Component Categories
Video - 00:2:42 mins
Lesson 006 Prop Drilling
Video - 00:7:31 mins
Lesson 007 Component Composition
Video - 00:4:50 mins
Lesson 008 Fixing Prop Drilling With Composition (And Building a Layout)
Video - 00:8:49 mins
Lesson 009 Using Composition to Make a Reusable Box
Video - 00:6:30 mins
Lesson 010 Passing Elements as Props (Alternative to children)
Video - 00:4:44 mins
Lesson 011 Building a Reusable Star Rating Component
Video - 00:11:22 mins
Lesson 012 Creating the Stars
Video - 00:13:4 mins
Lesson 013 Handling Hover Events
Video - 00:7:43 mins
Lesson 014 Props as a Component API
Video - 00:4:28 mins
Lesson 015 Improving Reusability With Props
Video - 00:19:27 mins
Lesson 016 PropTypes
Video - 00:7:24 mins
Lesson 017 CHALLENGE #1 Text Expander Component
Video - 00:18:20 mins
11 – How React Works Behind the Scenes
Lesson 001 Section Overview
Video - 00:1:55 mins
Lesson 002 Project Setup and Walkthrough
Video - 00:11:11 mins
Lesson 003 Components, Instances, and Elements
Video - 00:5:9 mins
Lesson 004 Instances and Elements in Practice
Video - 00:7:53 mins
Lesson 005 How Rendering Works Overview
Video - 00:6:55 mins
Lesson 006 How Rendering Works The Render Phase
Video - 00:18:28 mins
Lesson 007 How Rendering Works The Commit Phase
Video - 00:11:27 mins
Lesson 008 How Diffing Works
Video - 00:5:52 mins
Lesson 009 Diffing Rules in Practice
Video - 00:5:13 mins
Lesson 010 The Key Prop
Video - 00:7:41 mins
Lesson 011 Resetting State With the Key Prop
Video - 00:4:2 mins
Lesson 012 Using the Key Prop to Fix Our Eat-'N-Split App
Video - 00:4:7 mins
Lesson 013 Rules for Render Logic Pure Components
Video - 00:9:24 mins
Lesson 014 State Update Batching
Video - 00:9:10 mins
Lesson 015 State Update Batching in Practice
Video - 00:15:43 mins
Lesson 016 How Events Work in React
Video - 00:13:42 mins
Lesson 017 Libraries vs. Frameworks & The React Ecosystem
Video - 00:9:52 mins
Lesson 018 Section Summary Practical Takeaways
Video - 00:10:26 mins
12 – Effects and Data Fetching
Download Attachment
Reading
Lesson 001 Section Overview
Video - 00:00:58 mins
Lesson 002 The Component Lifecycle
Video - 00:4:31 mins
Lesson 003 How NOT to Fetch Data in React
Video - 00:9:48 mins
Lesson 004 useEffect to the Rescue
Video - 00:4:40 mins
Lesson 005 A First Look at Effects
Video - 00:6:23 mins
Lesson 006 Using an async Function
Video - 00:5:40 mins
Lesson 007 Adding a Loading State
Video - 00:3:47 mins
Lesson 008 Handling Errors
Video - 00:13:2 mins
Lesson 009 The useEffect Dependency Array
Video - 00:12:17 mins
Lesson 010 Synchronizing Queries With Movie Data
Video - 00:15:8 mins
Lesson 011 Selecting a Movie
Video - 00:13:19 mins
Lesson 012 Loading Movie Details
Video - 00:17:43 mins
Lesson 013 Adding a Watched Movie
Video - 00:26:11 mins
Lesson 014 Adding a New Effect Changing Page Title
Video - 00:8:44 mins
Lesson 015 The useEffect Cleanup Function
Video - 00:4:20 mins
Lesson 016 Cleaning Up the Title
Video - 00:5:22 mins
Lesson 017 Cleaning Up Data Fetching
Video - 00:10:16 mins
Lesson 018 One More Effect Listening to a Keypress
Video - 00:14:6 mins
Lesson 019 CHALLENGE #1 Currency Converter
Video - 00:16:43 mins
13 – Custom Hooks, Refs, and More State
Download Attachment
Reading
Lesson 001 Section Overview
Video - 00:00:57 mins
Lesson 002 React Hooks and Their Rules
Video - 00:10:55 mins
Lesson 003 The Rules of Hooks in Practice
Video - 00:8:36 mins
Lesson 004 More Details of useState
Video - 00:12:30 mins
Lesson 005 Initializing State With a Callback (Lazy Initial State)
Video - 00:13:30 mins
Lesson 006 useState Summary
Video - 00:3:14 mins
Lesson 007 How NOT to Select DOM Elements in React
Video - 00:3:38 mins
Lesson 008 Introducing Another Hook useRef
Video - 00:5:36 mins
Lesson 009 Refs to Select DOM Elements
Video - 00:10:9 mins
Lesson 010 Refs to Persist Data Between Renders
Video - 00:10:15 mins
Lesson 011 What are Custom Hooks When to Create One
Video - 00:4:22 mins
Lesson 012 Creating our First Custom Hook useMovies
Video - 00:13:2 mins
Lesson 013 Creating useLocalStorageState
Video - 00:9:6 mins
Lesson 014 Creating useKey
Video - 00:8:19 mins
Lesson 015 CHALLENGE #1 useGeolocate
Video - 00:7:27 mins
14 – [Optional] React Before Hooks Class-Based React
Lesson 001 Section Overview
Video - 00:1:16 mins
Lesson 002 Our First Class Component
Video - 00:9:32 mins
Lesson 003 Working With Event Handlers
Video - 00:10:24 mins
Lesson 004 Class Components vs. Function Components
Video - 00:5:37 mins
Lesson 005 Starting the Classy Weather App
Video - 00:7:45 mins
Lesson 006 Fetching Weather Data
Video - 00:9:39 mins
Lesson 007 Displaying the Weather
Video - 00:14:10 mins
Lesson 008 Removing Boilerplate Code With Class Fields
Video - 00:4:5 mins
Lesson 009 Child to Parent Communication
Video - 00:4:19 mins
Lesson 010 Lifecycle Methods
Video - 00:15:36 mins
15 – PART 3 ADVANCED REACT + REDUX [4 PROJECTS]
16 – The Advanced useReducer Hook
Download Attachment
Reading
Lesson 001 Section Overview
Video - 00:1:3 mins
Lesson 002 Yet Another Hook useReducer
Video - 00:17:58 mins
Lesson 003 Managing Related Pieces of State
Video - 00:12:23 mins
Lesson 004 Managing State With useReducer
Video - 00:14:13 mins
Lesson 005 The React Quiz App
Video - 00:7:57 mins
Lesson 006 Loading Questions from a Fake API
Video - 00:18:31 mins
Lesson 007 Handling Loading, Error, and Ready Status
Video - 00:9:5 mins
Lesson 008 Starting a New Quiz
Video - 00:4:54 mins
Lesson 009 Displaying Questions
Video - 00:7:45 mins
Lesson 010 Handling New Answers
Video - 00:16:42 mins
Lesson 011 Moving to the Next Question
Video - 00:6:22 mins
Lesson 012 Displaying Progress
Video - 00:8:57 mins
Lesson 013 Finishing a Quiz
Video - 00:15:7 mins
Lesson 014 Restarting a Quiz
Video - 00:7:5 mins
Lesson 015 Setting Up a Timer With useEffect
Video - 00:20:56 mins
Lesson 016 Section Summary useState vs. useReducer
Video - 00:5:53 mins
Lesson 017 CHALLENGE #1 Creating a Bank Account With useReducer
Video - 00:19:50 mins
17 – React Router Building Single-Page Applications (SPA)
Lesson 001 Section Overview
Video - 00:1:1 mins
Lesson 002 Creating Our First App With Vite WorldWise
Video - 00:15:41 mins
Lesson 003 Routing and Single-Page Applications (SPAs)
Video - 00:6:40 mins
Lesson 004 Implementing Main Pages and Routes
Video - 00:12:15 mins
Lesson 005 Linking Between Routes With Link and NavLink
Video - 00:9:57 mins
Lesson 006 Styling Options For React Applications
Video - 00:5:50 mins
Lesson 007 Using CSS Modules
Video - 00:16:30 mins
Lesson 008 Building the Pages
Video - 00:16:59 mins
Lesson 009 Building the App Layout
Video - 00:8:44 mins
Lesson 010 Nested Routes and Index Route
Video - 00:13:25 mins
Lesson 011 Implementing the Cities List
Video - 00:18:42 mins
Lesson 012 Implementing the Countries List
Video - 00:11:7 mins
Lesson 013 Storing State in the URL
Video - 00:5:31 mins
Lesson 014 Dynamic Routes With URL Parameters
Video - 00:10:28 mins
Lesson 015 Reading and Setting a Query String
Video - 00:10:34 mins
Lesson 016 Programmatic Navigation with useNavigate
Video - 00:11:50 mins
Lesson 017 Programmatic Navigation with Navigate
Video - 00:4:12 mins
18 – Advanced State Management The Context API
Download Attachment
Reading
Lesson 001 Section Overview
Video - 00:00:59 mins
Lesson 002 CHALLENGE #1 Understand The Atomic Blog App
Video - 00:4:22 mins
Lesson 003 What is the Context API
Video - 00:5:16 mins
Lesson 004 Creating and Providing a Context
Video - 00:9:26 mins
Lesson 005 Consuming the Context
Video - 00:10:53 mins
Lesson 006 Advanced Pattern A Custom Provider and Hook
Video - 00:16:15 mins
Lesson 007 Thinking In React Advanced State Management
Video - 00:11:38 mins
Lesson 008 Back to WorldWise Creating a CitiesContext
Video - 00:8:32 mins
Lesson 009 Consuming the CitiesContext
Video - 00:4:26 mins
Lesson 010 Finishing the City View
Video - 00:17:58 mins
Lesson 011 Including a Map With the Leaflet Library
Video - 00:9:25 mins
Lesson 012 Displaying City Markers on Map
Video - 00:5:58 mins
Lesson 013 Interacting With the Map
Video - 00:13:38 mins
Lesson 014 Setting Map Position With Geolocation
Video - 00:11:33 mins
Lesson 015 Fetching City Data in the Form
Video - 00:17:42 mins
Lesson 016 Creating a New City
Video - 00:23:27 mins
Lesson 017 Deleting a City
Video - 00:5:37 mins
Lesson 018 Advanced State Management System Context + useReducer
Video - 00:22:38 mins
Lesson 019 Adding Fake Authentication Setting Up Context
Video - 00:11:2 mins
Lesson 020 Adding Fake Authentication Implementing Login
Video - 00:16:24 mins
Lesson 021 Adding Fake Authentication Protecting a Route
Video - 00:11:21 mins
Lesson 022 CHALLENGE #2 Refactoring React Quiz to Context API
Video - 00:8:22 mins
19 – Performance Optimization and Advanced useEffect
Lesson 001 Section Overview
Video - 00:1:3 mins
Lesson 002 Performance Optimization and Wasted Renders
Video - 00:6:6 mins
Lesson 003 The Profiler Developer Tool
Video - 00:8:21 mins
Lesson 004 A Surprising Optimization Trick With children
Video - 00:11:49 mins
Lesson 005 Understanding memo
Video - 00:5:29 mins
Lesson 006 memo in Practice
Video - 00:13:17 mins
Lesson 007 Understanding useMemo and useCallback
Video - 00:6:39 mins
Lesson 008 useMemo in Practice
Video - 00:8:42 mins
Lesson 009 useCallback in Practice
Video - 00:10:9 mins
Lesson 010 Optimizing Context Re-Renders
Video - 00:14:47 mins
Lesson 011 Back to The WorldWise App
Video - 00:12:37 mins
Lesson 012 Optimizing Bundle Size With Code Splitting
Video - 00:15:52 mins
Lesson 013 Don't Optimize Prematurely!
Video - 00:2:59 mins
Lesson 014 useEffect Rules and Best Practices
Video - 00:10:1 mins
Lesson 015 CHALLENGE #1 Fix Performance Issues in Workout Timer
Video - 00:12:15 mins
Lesson 016 Setting State Based on Other State Updates
Video - 00:11:55 mins
Lesson 017 Using Helper Functions In Effects
Video - 00:15:4 mins
Lesson 018 Closures in Effects
Video - 00:9:52 mins
20 – Redux and Modern Redux Toolkit (With Thunks)
Lesson 001 Section Overview
Video - 00:1:7 mins
Lesson 002 Introduction to Redux
Video - 00:12:13 mins
Lesson 003 Creating a Reducer Bank Account
Video - 00:10:47 mins
Lesson 004 Creating a Redux Store
Video - 00:9:46 mins
Lesson 005 Working With Action Creators
Video - 00:6:28 mins
Lesson 006 Adding More State Customer
Video - 00:12:30 mins
Lesson 007 Professional Redux File Structure State Slices
Video - 00:11:47 mins
Lesson 008 Back to React! Connecting our Redux App With React
Video - 00:5:46 mins
Lesson 009 Dispatching Actions from Our React App
Video - 00:17:21 mins
Lesson 010 The Legacy Way of Connecting Components to Redux
Video - 00:4:50 mins
Lesson 011 Redux Middleware and Thunks
Video - 00:4:28 mins
Lesson 012 Making an API Call With Redux Thunks
Video - 00:17:50 mins
Lesson 013 The Redux DevTools
Video - 00:10:21 mins
Lesson 014 What is Redux Toolkit (RTK)
Video - 00:3:40 mins
Lesson 015 Creating the Store With RTK
Video - 00:4:37 mins
Lesson 016 Creating the Account Slice
Video - 00:21:43 mins
Lesson 017 Back to Thunks
Video - 00:5:2 mins
Lesson 018 Creating the Customer Slice
Video - 00:9:14 mins
Lesson 019 Redux vs. Context API
Video - 00:7:43 mins
21 – PART 4 PROFESSIONAL REACT DEVELOPMENT [2 PROJECTS]
22 – React Router With Data Loading (v6.4+)
Lesson 001 Section Overview
Video - 00:00:51 mins
Lesson 002 Setting Up a New Project Fast React Pizza Co
Video - 00:8:13 mins
Lesson 003 Application Planning
Video - 00:21:24 mins
Lesson 004 Setting Up a Professional File Structure
Video - 00:8:20 mins
Lesson 005 A New Way Of Implementing Routes
Video - 00:10:30 mins
Lesson 006 Building the App Layout
Video - 00:11:18 mins
Lesson 007 Fetching Data With React Router Loaders Pizza Menu
Video - 00:11:50 mins
Lesson 008 Displaying a Loading Indicator
Video - 00:6:00 mins
Lesson 009 Handling Errors With Error Elements
Video - 00:6:24 mins
Lesson 010 Fetching Orders
Video - 00:12:40 mins
Lesson 011 Writing Data With React Router Actions
Video - 00:19:3 mins
Lesson 012 Error Handling in Form Actions
Video - 00:10:26 mins
23 – [Optional] Tailwind CSS Crash Course Styling the App
Lesson 001 Section Overview
Video - 00:00:59 mins
Lesson 002 What is Tailwind CSS
Video - 00:7:56 mins
Lesson 003 Setting Up Tailwind CSS
Video - 00:12:3 mins
Lesson 004 Working With Color
Video - 00:8:59 mins
Lesson 005 Styling Text
Video - 00:10:00 mins
Lesson 006 The Box Model Spacing, Borders, and Display
Video - 00:11:17 mins
Lesson 007 Responsive Design
Video - 00:10:48 mins
Lesson 008 Using Flexbox
Video - 00:6:31 mins
Lesson 009 Using CSS Grid
Video - 00:12:20 mins
Lesson 010 Styling Buttons Element States and Transitions
Video - 00:12:11 mins
Lesson 011 Styling Form Elements
Video - 00:10:22 mins
Lesson 012 Reusing Styles With @apply
Video - 00:4:28 mins
Lesson 013 Reusing Styles With React Components
Video - 00:12:27 mins
Lesson 014 Absolute Positioning, z-index, and More
Video - 00:6:30 mins
Lesson 015 Configuring Tailwind Custom Font Family
Video - 00:10:53 mins
Lesson 016 Styling the Menu
Video - 00:18:27 mins
Lesson 017 Styling the Cart
Video - 00:11:46 mins
Lesson 018 Styling the Order Form
Video - 00:13:21 mins
Lesson 019 Styling the Order Overview
Video - 00:13:53 mins
24 – Adding Redux and Advanced React Router
Lesson 001 Section Overview
Video - 00:00:39 mins
Lesson 002 Modeling the User State With Redux Toolkit
Video - 00:13:23 mins
Lesson 003 Reading and Updating the User State
Video - 00:10:37 mins
Lesson 004 Modeling the Cart State
Video - 00:14:20 mins
Lesson 005 Adding Menu Items to the Cart
Video - 00:7:6 mins
Lesson 006 Building the Cart Overview With Redux Selectors
Video - 00:8:59 mins
Lesson 007 Building the Cart Page
Video - 00:7:5 mins
Lesson 008 Deleting Cart Items
Video - 00:14:44 mins
Lesson 009 Updating Cart Quantities
Video - 00:13:32 mins
Lesson 010 Using the Cart for New Orders
Video - 00:14:30 mins
Lesson 011 Redux Thunks With createAsyncThunk
Video - 00:16:4 mins
Lesson 012 Integrating Geolocation
Video - 00:16:4 mins
Lesson 013 Fetching Data Without Navigation useFetcher
Video - 00:12:44 mins
Lesson 014 Updating Data Without Navigation
Video - 00:14:37 mins
25 – Setting Up Our Biggest Project + Styled Components
Lesson 001 Section Overview
Video - 00:00:54 mins
Lesson 002 Application Planning
Video - 00:18:29 mins
Lesson 003 Setting Up the Project The Wild Oasis
Video - 00:8:11 mins
Lesson 004 Introduction to Styled Components
Video - 00:12:22 mins
Lesson 005 Global Styles With Styled Components
Video - 00:14:36 mins
Lesson 006 Styled Component Props and the css Function
Video - 00:10:25 mins
Lesson 007 Building More Reusable Styled Components
Video - 00:11:2 mins
Lesson 008 Setting Up Pages and Routes
Video - 00:6:27 mins
Lesson 009 Building the App Layout
Video - 00:14:21 mins
Lesson 010 Building the Sidebar and Main Navigation
Video - 00:13:9 mins
26 – Supabase Crash Course Building a Back-End!
Lesson 001 Section Overview
Video - 00:00:46 mins
Lesson 002 What is Supabase
Video - 00:2:24 mins
Lesson 003 Creating a New Database
Video - 00:5:27 mins
Lesson 004 Modeling Application State
Video - 00:5:34 mins
Lesson 005 Creating Tables
Video - 00:9:31 mins
Lesson 006 Relationships Between Tables
Video - 00:8:29 mins
Lesson 007 Adding Security Policies (RLS)
Video - 00:6:18 mins
Lesson 008 Connecting Supabase With Our React App
Video - 00:8:45 mins
Lesson 009 Setting Up Storage Buckets
Video - 00:4:38 mins
27 – React Query Managing Remote State
Download Attachment
Reading
Lesson 001 Section Overview
Video - 00:00:46 mins
Lesson 002 What is React Query
Video - 00:6:20 mins
Lesson 003 Setting Up React Query
Video - 00:7:19 mins
Lesson 005 Fetching Cabin Data
Video - 00:21:41 mins
Lesson 006 Mutations Deleting a Cabin
Video - 00:17:21 mins
Lesson 007 Displaying Toasts (Notifications)
Video - 00:8:41 mins
Lesson 008 Introducing Another Library React Hook Form
Video - 00:11:17 mins
Lesson 009 Creating a New Cabin
Video - 00:12:13 mins
Lesson 010 Handling Form Errors
Video - 00:22:42 mins
Lesson 011 Uploading Images to Supabase
Video - 00:14:41 mins
Lesson 012 Editing a Cabin
Video - 00:30:39 mins
Lesson 013 Abstracting React Query Into Custom Hooks
Video - 00:17:26 mins
Lesson 014 Duplicating Cabins
Video - 00:6:49 mins
Lesson 015 Fetching Applications Settings
Video - 00:8:47 mins
Lesson 016 Updating Application Settings
Video - 00:11:27 mins
28 – Advanced React Patterns
Download Attachment
Reading
Lesson 001 Section Overview
Video - 00:1:13 mins
Lesson 002 An Overview of Reusability in React
Video - 00:5:44 mins
Lesson 003 Setting Up an Example
Video - 00:6:19 mins
Lesson 004 The Render Props Pattern
Video - 00:7:42 mins
Lesson 005 A Look at Higher-Order Components (HOC)
Video - 00:8:6 mins
Lesson 006 The Compound Component Pattern
Video - 00:18:17 mins
Lesson 007 Building a Modal Window Using a React Portal
Video - 00:19:54 mins
Lesson 008 Converting the Modal to a Compound Component
Video - 00:21:45 mins
Lesson 009 Detecting a Click Outside the Modal
Video - 00:13:36 mins
Lesson 010 Confirming Cabin Deletions
Video - 00:8:41 mins
Lesson 011 Building a Reusable Table
Video - 00:11:45 mins
Lesson 012 Applying the Render Props Pattern
Video - 00:4:38 mins
Lesson 013 Building a Reusable Context Menu
Video - 00:32:35 mins
29 – [Optional] Implementing More Features Authentication, Dark Mode, Dashboard, etc
Lesson 001 Section Overview
Video - 00:1:16 mins
Lesson 002 Client-Side Filtering Filtering Cabins
Video - 00:18:49 mins
Lesson 003 Client-Side Sorting Sorting Cabins
Video - 00:20:25 mins
Lesson 004 Building the Bookings Table
Video - 00:17:59 mins
Lesson 005 Uploading Sample Data
Video - 00:6:15 mins
Lesson 006 API-Side Filtering Filtering Bookings
Video - 00:17:10 mins
Lesson 007 API-Side Sorting Sorting Bookings
Video - 00:6:53 mins
Lesson 008 Building a Reusable Pagination Component
Video - 00:15:52 mins
Lesson 009 API-Side Pagination Paginating Bookings
Video - 00:10:39 mins
Lesson 010 Prefetching With React Query
Video - 00:7:58 mins
Lesson 011 Building the Single Booking Page
Video - 00:15:17 mins
Lesson 012 Checking In a Booking
Video - 00:28:18 mins
Lesson 013 Adding Optional Breakfast
Video - 00:14:4 mins
Lesson 014 Checking Out a Booking (+ Fixing a Small Bug)
Video - 00:9:50 mins
Lesson 015 Deleting a Booking
Video - 00:13:33 mins
Lesson 016 Authentication User Login With Supabase
Video - 00:22:6 mins
Lesson 017 Authorization Protecting Routes
Video - 00:23:23 mins
Lesson 018 User Logout
Video - 00:9:00 mins
Lesson 019 Fixing an Important Bug
Video - 00:5:35 mins
Lesson 020 Building the Sign Up Form
Video - 00:10:59 mins
Lesson 021 User Sign Up
Video - 00:15:1 mins
Lesson 023 Building The App Header
Video - 00:10:18 mins
Lesson 024 Updating User Data and Password
Video - 00:28:26 mins
Lesson 025 Implementing Dark Mode With CSS Variables
Video - 00:21:29 mins
Lesson 026 Building the Dashboard Layout
Video - 00:4:25 mins
Lesson 027 Computing Recent Bookings and Stays
Video - 00:15:20 mins
Lesson 028 Displaying Statistics
Video - 00:12:2 mins
Lesson 029 Displaying a Line Chart With the Recharts Library
Video - 00:22:55 mins
Lesson 030 Displaying a Pie Chart
Video - 00:15:52 mins
Lesson 031 Displaying Stays for Current Day
Video - 00:20:41 mins
Lesson 032 Error Boundaries
Video - 00:9:44 mins
Lesson 033 Final Touches + Fixing Bugs
Video - 00:14:38 mins
30 – Deployment With Netlify and Vercel
31 – PART 5 FULL-STACK REACT WITH NEXT.JS [1 PROJECT]
32 – Overview of Next.js With the App Router
Download Attachment
Reading
Lesson 001 Section Overview
Video - 00:00:46 mins
Lesson 003 An Overview of Server-Side Rendering (SSR)
Video - 00:15:45 mins
Lesson 004 Experiment Manual SSR With React DOM + Node.js
Video - 00:26:32 mins
Lesson 005 The Missing Piece Hydration
Video - 00:6:33 mins
Lesson 006 Implementing Hydration
Video - 00:15:4 mins
Lesson 007 What is Next.js
Video - 00:12:3 mins
Lesson 008 Setting Up a Next.js Project
Video - 00:10:11 mins
Lesson 010 Defining Routes and Pages
Video - 00:9:38 mins
Lesson 011 Navigating Between Pages
Video - 00:9:25 mins
Lesson 012 Creating a Layout
Video - 00:12:13 mins
Lesson 013 What are React Server Components (RSC – Part 1)
Video - 00:32:4 mins
Lesson 014 Fetching Data in a Page
Video - 00:6:36 mins
Lesson 015 Adding Interactivity With Client Components
Video - 00:8:2 mins
Lesson 016 Displaying a Loading Indicator
Video - 00:6:28 mins
Lesson 017 How RSC Works Behind the Scenes (RSC – Part 2)
Video - 00:18:35 mins
Lesson 018 RSC vs. SSR How are They Related (RSC – Part 3)
Video - 00:12:15 mins
33 – Starting to Build the Wild Oasis Website
Lesson 001 Section Overview
Video - 00:00:51 mins
Lesson 002 Project Planning The Wild Oasis Customer Website
Video - 00:13:9 mins
Lesson 003 Project Organization
Video - 00:11:1 mins
Lesson 004 Styling With Tailwind CSS
Video - 00:9:24 mins
Lesson 005 Adding Page Metadata and Favicon
Video - 00:10:25 mins
Lesson 006 Loading and Optimizing Fonts
Video - 00:6:24 mins
Lesson 007 Improving the Navigation and Root Layout
Video - 00:7:2 mins
Lesson 008 Optimizing Images With Next.js Image Component
Video - 00:8:39 mins
Lesson 009 Building the Home Page
Video - 00:9:47 mins
Lesson 010 Building the About Page With Responsive Images
Video - 00:13:29 mins
Lesson 011 Adding Nested Routes and Pages
Video - 00:6:55 mins
Lesson 012 Adding a Nested Layout
Video - 00:12:13 mins
34 – Data Fetching, Caching, and Rendering
Lesson 001 Section Overview
Video - 00:1:3 mins
Lesson 002 Setting Up Supabase
Video - 00:11:43 mins
Lesson 003 Fetching and Displaying Cabin List
Video - 00:11:13 mins
Lesson 004 Streaming Route Segments With loading.js File
Video - 00:7:15 mins
Lesson 005 What is React Suspense
Video - 00:12:18 mins
Lesson 006 Streaming UI With Suspense Cabin List
Video - 00:10:29 mins
Lesson 007 Dynamic Route Segments Building the Cabin Page
Video - 00:10:25 mins
Lesson 008 Generating Dynamic Metadata
Video - 00:3:39 mins
Lesson 009 Error Handling Setting Up Error Boundaries
Video - 00:9:3 mins
Lesson 010 Error Handling Not Found Errors
Video - 00:5:45 mins
Lesson 011 Different Types of SSR Static vs. Dynamic Rendering
Video - 00:14:14 mins
Lesson 012 Analyzing Rendering in Our App
Video - 00:4:47 mins
Lesson 013 Making Dynamic Pages Static With generateStaticParams
Video - 00:8:33 mins
Lesson 014 Static Site Generation (SSG)
Video - 00:9:11 mins
Lesson 015 Partial Pre-Rendering
Video - 00:6:57 mins
Lesson 016 How Next.js Caches Data
Video - 00:18:28 mins
Lesson 017 Experimenting With Caching and ISR
Video - 00:20:39 mins
Lesson 018 CHALLENGE #1 Fetching the Number of Cabins
Video - 00:3:46 mins
35 – Client and Server Interactions
Lesson 001 Section Overview
Video - 00:1:13 mins
Lesson 002 Blurring the Boundary Between Server and Client (RSC – Part 4)
Video - 00:15:5 mins
Lesson 003 Client Components in Server Components
Video - 00:8:14 mins
Lesson 004 Highlighting Current Side Navigation Link
Video - 00:7:45 mins
Lesson 005 Sharing State Between Client and Server The URL
Video - 00:34:28 mins
Lesson 006 Advanced Server Components in Client Components
Video - 00:10:39 mins
Lesson 007 Data Fetching Strategies for the Reservation Section
Video - 00:27:00 mins
Lesson 008 Using the Context API for State Management
Video - 00:25:46 mins
Lesson 009 Creating an API Endpoint With Route Handlers
Video - 00:11:35 mins
36 – Authentication With NextAuth (Auth.js)
Lesson 001 Section Overview
Video - 00:00:54 mins
Lesson 002 Setting Up NextAuth
Video - 00:21:38 mins
Lesson 003 Getting the User Session
Video - 00:14:11 mins
Lesson 004 What is Middleware in Next.js
Video - 00:4:12 mins
Lesson 005 Protecting Routes With NextAuth Middleware
Video - 00:10:52 mins
Lesson 006 Building a Custom Sign In Page
Video - 00:12:17 mins
Lesson 007 Building a Custom Sign Out Button
Video - 00:3:22 mins
Lesson 008 Creating a New Guest on First Sign In
Video - 00:14:35 mins
37 – Mutations With Server Actions + Modern React Hooks
Lesson 001 Section Overview
Video - 00:1:7 mins
Lesson 002 What are Server Actions
Video - 00:12:1 mins
Lesson 003 Updating the Profile Using a Server Action
Video - 00:30:43 mins
Lesson 004 Manual Cache Revalidation
Video - 00:5:52 mins
Lesson 005 Displaying a Loading Indicator The useFormStatus Hook
Video - 00:7:55 mins
Lesson 006 Building the Guest's Reservations Page
Video - 00:10:27 mins
Lesson 007 Deleting a Reservation
Video - 00:19:30 mins
Lesson 008 Another Loading Indicator The useTransition Hook
Video - 00:7:27 mins
Lesson 009 CHALLENGE #1 Updating a Reservation
Video - 00:30:24 mins
Lesson 010 Removing Reservations Immediately The useOptimistic Hook
Video - 00:22:22 mins
Lesson 011 Back to the Cabin Page Finishing the Date Selector
Video - 00:12:9 mins
Lesson 012 Creating a New Reservation
Video - 00:32:28 mins
38 – Deployment With Vercel
39 – [OPTIONAL] Legacy Next.js The Pages Router
Lesson 001 Section Overview
Video - 00:1:7 mins
Lesson 002 Setting Up Another Project
Video - 00:8:52 mins
Lesson 003 Routes, Pages, and Navigation
Video - 00:7:36 mins
Lesson 004 Dynamic Routes
Video - 00:3:33 mins
Lesson 005 Creating a Layout With a Custom _App
Video - 00:6:37 mins
Lesson 006 Creating Pages
Video - 00:2:28 mins
Lesson 007 Defining Page Title and Favicon
Video - 00:6:3 mins
Lesson 008 Fetching Data With getStaticProps (SSG)
Video - 00:8:12 mins
Lesson 009 Fetching Data With getServerSideProps (SSR)
Video - 00:10:50 mins
Lesson 010 API Routes
Video - 00:11:55 mins
Lesson 011 Handling Form Submissions
Video - 00:15:41 mins
40 – The End!
Download Attachment: Click here
Finish Course Early?
You have not completed all required lessons and assessments.
Your Progress
0%
