Advanced React

Placeholders Are Gone! ?

Cloud Firestore Setup ?

Collection Ref and getVans() Function

Cloud Firestore Code Setup

Create getVan Function

Refactor getHostVans Function

Final Loose Ends

Outro

Challenge – Send User to Original Page

useLocation

Link State

Back to All Vans

Challenge: Conditionally Render the Back Button Text

404 Page

Coding the Sad Path – Error Handling (New)

“Happy Path” vs. “Sad Path” (New)

Quick Update to Our Fetching Code

Initial Login Form

Note from the Future: Importing Image Assets in Vite

Coding the Sad Path – Loading State (New)

Protected Routes Intro (FDCP)

Protected Routes – AuthRequired Layout Route (FDCP)

Protected Routes – Implementing “Auth” (FDCP)

Protected Routes – Navigate (FDCP)

VanLife Protected Routes (FDCP)

Protected Routes Quiz

Navigation State (FDCP)

Setup for Authentication – Happy Path (FDCP)

Authentication Setup – Sad Path (FDCP)

Navigate to /Host Route After Login (FDCP)

Nested Routes Quiz

Add Footer

NavLink

Active Link Styling with NavLink

Active Link Styling with NavLink – Part 2

Adding Host Vans Routes

? Optional Side Quest – Building Out the Host Vans List and Detail Pages

Building Out the Host Van Detail Page

Relative Links

Back to All Vans

Add /Host/Vans/:Id Nested Routes

Add the Final Navbar!

Outlet Context

Search Params Intro

useSearchParams

Challenge: Set Up Search Params in VanLife

Filter the Array W/ the Search Param

Challenge: Filter the Vans in VanLife

Using Links to Add Search Params

Challenge: Filter the Vans with Links

Using the Search Params Setter Function

Challenge: Filter the Vans with a Setter Function

Caveats to Setting Params

Merging Search Params with Links

Merging Search Params with the setSearchParams Function

Challenge: Conditional Rendering Practice

Fix Remaining Absolute Paths

History Stack and Replace (FDCP)

React Router Setup & BrowserRouter

Multi-Page vs Single-Page Apps

Route Params – Part 1

Challenge: Vans Page – Part 2

Mirage JS Server

Challenge: Vans Page – Part 1

Initial Deploy to Netlify

VanLife Project Bootstrapping

Link

Quick Re-Org

Route, Path, & Element

BrowserRouter & Routes Challenge

Routes

Introduction to React Router 6

To Nest or Not to Nest?

Index Routes

Creating the Host Layout

Nested Routes Intro

Fixing the Navbar with a Layout Route

Fixing the Navbar with a Layout Route Part 2

Bootstrap the Host Pages

Nesting the /Host Routes

Relative Paths

Route Params Quiz

Route Params Part 3.1 – useParams() & Challenge

Route Params Part 3.2 – useParams() Challenge

Route Params – Part 2

Course Outro

Code Splitting, Lazy, Suspense – Part 1

StrictMode – Rerunning Side Effects

StrictMode – Double Renders Components

Using Dev Tools to Measure Performance

Rendering Phases Quiz

Three Phases of “Rendering”

Recursive Rendering

Performance Intro

useCallback() Practice

useCallback()

useMemo() Practice

useMemo(), React.memo(), and Referential Equality

Value vs. Reference Types & Referential Equality

React.memo() Practice

React.memo() – Reducing Rerenders

useMemo() Practice

useMemo()

Code Splitting, Lazy, Suspense – Part 2