Curriculum
- 3 Sections
- 170 Lessons
- Lifetime
Expand all sectionsCollapse all sections
- 01. Reusability66
- 1.1Custom Hooks – useEffectOnUpdate
- 1.2Custom Hooks – useToggle
- 1.3Custom Hooks – useToggle Part 2
- 1.4Custom Hooks – useToggle Part 3
- 1.5Custom Hooks – useToggle Part 4
- 1.6Custom Hooks – useToggle Part 5
- 1.7Custom Hooks – useToggle Part 6
- 1.8Custom Hooks – useToggle Part 7
- 1.9Custom Hooks – useToggle Part 8
- 1.10Custom Hooks – useToggle Part 9
- 1.11Reusability Section Recap
- 1.12Solo Project – Component Library++
- 1.13Remove Star Component
- 1.14Use Toggle with Menu Component
- 1.15Composing New Components with Toggle
- 1.16onToggle Event Listener
- 1.17Menu onClose Event
- 1.18Intro to Refs
- 1.19Refs and DOM Manipulation
- 1.20Fix onToggle Bug Using Refs
- 1.21Fix Missing onToggle Bug Using a Noop Function
- 1.22Render Props Part 1
- 1.23Render Props Part 2
- 1.24Render Props Part 4 – Children as Render Props
- 1.25Render Props Part 3
- 1.26Toggle.Display Intro
- 1.27Toggle.Display
- 1.28Custom Hooks Intro
- 1.29Compound Components Quiz
- 1.30Compound Components in React – Part 2
- 1.31Compound Components in React – Part 3
- 1.32Summarize Challenge – Compound Components in React
- 1.33Prop Drilling Problem #2 – Implicit State
- 1.34The React.Children API
- 1.35React.Children Shortcomings
- 1.36Context Intro
- 1.37createContext() & Context Provider
- 1.38useContext()
- 1.39Add Context to the Menu Component
- 1.40Compound Components in React – Part 1
- 1.41State + Context
- 1.42Theme Switcher Final Touches
- 1.43Menu Component Final Touches
- 1.44Headless Toggle Component
- 1.45Aside – Compound Components W/ Dot Syntax
- 1.46Toggle – Setup
- 1.47Toggle – Planning
- 1.48Toggle Context
- 1.49Toggle.Button
- 1.50Toggle.On & Toggle.Off
- 1.51Button – Props Review Challenge
- 1.52Advanced React Intro
- 1.53Aside: Compound Components Intro
- 1.54Prop Drilling
- 1.55Menu Component Intro
- 1.56Mega Challenge – Overloaded Avatar Component
- 1.57Challenge – Button W/ Variants
- 1.58Button – Fix ClassName Issue
- 1.59Button – Size Prop
- 1.60Aside – Destructuring Props
- 1.61Aside – Props Spreading
- 1.62Challenge – Add onClick Event Listener
- 1.63Button – More Complex React Children
- 1.64Challenge – Button W/ Children
- 1.65Aside – Children in HTML
- 1.66Aside – React Children
- 02. Routing85
- 2.1Placeholders Are Gone! ?
- 2.2Cloud Firestore Setup ?
- 2.3Collection Ref and getVans() Function
- 2.4Cloud Firestore Code Setup
- 2.5Create getVan Function
- 2.6Refactor getHostVans Function
- 2.7Final Loose Ends
- 2.8Outro
- 2.9Challenge – Send User to Original Page
- 2.10useLocation
- 2.11Link State
- 2.12Back to All Vans
- 2.13Challenge: Conditionally Render the Back Button Text
- 2.14404 Page
- 2.15Coding the Sad Path – Error Handling (New)
- 2.16“Happy Path” vs. “Sad Path” (New)
- 2.17Quick Update to Our Fetching Code
- 2.18Initial Login Form
- 2.19Note from the Future: Importing Image Assets in Vite
- 2.20Coding the Sad Path – Loading State (New)
- 2.21Protected Routes Intro (FDCP)
- 2.22Protected Routes – AuthRequired Layout Route (FDCP)
- 2.23Protected Routes – Implementing “Auth” (FDCP)
- 2.24Protected Routes – Navigate (FDCP)
- 2.25VanLife Protected Routes (FDCP)
- 2.26Protected Routes Quiz
- 2.27Navigation State (FDCP)
- 2.28Setup for Authentication – Happy Path (FDCP)
- 2.29Authentication Setup – Sad Path (FDCP)
- 2.30Navigate to /Host Route After Login (FDCP)
- 2.31Nested Routes Quiz
- 2.32Add Footer
- 2.33NavLink
- 2.34Active Link Styling with NavLink
- 2.35Active Link Styling with NavLink – Part 2
- 2.36Adding Host Vans Routes
- 2.37? Optional Side Quest – Building Out the Host Vans List and Detail Pages
- 2.38Building Out the Host Van Detail Page
- 2.39Relative Links
- 2.40Back to All Vans
- 2.41Add /Host/Vans/:Id Nested Routes
- 2.42Add the Final Navbar!
- 2.43Outlet Context
- 2.44Search Params Intro
- 2.45useSearchParams
- 2.46Challenge: Set Up Search Params in VanLife
- 2.47Filter the Array W/ the Search Param
- 2.48Challenge: Filter the Vans in VanLife
- 2.49Using Links to Add Search Params
- 2.50Challenge: Filter the Vans with Links
- 2.51Using the Search Params Setter Function
- 2.52Challenge: Filter the Vans with a Setter Function
- 2.53Caveats to Setting Params
- 2.54Merging Search Params with Links
- 2.55Merging Search Params with the setSearchParams Function
- 2.56Challenge: Conditional Rendering Practice
- 2.57Fix Remaining Absolute Paths
- 2.58History Stack and Replace (FDCP)
- 2.59React Router Setup & BrowserRouter
- 2.60Multi-Page vs Single-Page Apps
- 2.61Route Params – Part 1
- 2.62Challenge: Vans Page – Part 2
- 2.63Mirage JS Server
- 2.64Challenge: Vans Page – Part 1
- 2.65Initial Deploy to Netlify
- 2.66VanLife Project Bootstrapping
- 2.67Link
- 2.68Quick Re-Org
- 2.69Route, Path, & Element
- 2.70BrowserRouter & Routes Challenge
- 2.71Routes
- 2.72Introduction to React Router 6
- 2.73To Nest or Not to Nest?
- 2.74Index Routes
- 2.75Creating the Host Layout
- 2.76Nested Routes Intro
- 2.77Fixing the Navbar with a Layout Route
- 2.78Fixing the Navbar with a Layout Route Part 2
- 2.79Bootstrap the Host Pages
- 2.80Nesting the /Host Routes
- 2.81Relative Paths
- 2.82Route Params Quiz
- 2.83Route Params Part 3.1 – useParams() & Challenge
- 2.84Route Params Part 3.2 – useParams() Challenge
- 2.85Route Params – Part 2
- 03. Performance19
- 3.1Course Outro
- 3.2Code Splitting, Lazy, Suspense – Part 1
- 3.3StrictMode – Rerunning Side Effects
- 3.4StrictMode – Double Renders Components
- 3.5Using Dev Tools to Measure Performance
- 3.6Rendering Phases Quiz
- 3.7Three Phases of “Rendering”
- 3.8Recursive Rendering
- 3.9Performance Intro
- 3.10useCallback() Practice
- 3.11useCallback()
- 3.12useMemo() Practice
- 3.13useMemo(), React.memo(), and Referential Equality
- 3.14Value vs. Reference Types & Referential Equality
- 3.15React.memo() Practice
- 3.16React.memo() – Reducing Rerenders
- 3.17useMemo() Practice
- 3.18useMemo()
- 3.19Code Splitting, Lazy, Suspense – Part 2