Zero To Mastery · Video summary

Learn React Router v7: Build Better React Apps.

Learn React Router v7 to build modern, performant React apps by mastering routing, data loading, and state management. This course covers fundamentals to advanced patterns.

Watch on YouTube ↗

Key takeaways

• ⚡Leveraging the browser's built-in caching via `Cache-Control` headers in loaders is a performant strategy that avoids the need for external caching libraries.06:43
• 🎯React Router v7 is now a full-stack framework, comparable to Next.js, enabling server-side rendering and data loading directly within routes.08:15
• 💡The core philosophy of React Router is to 'use the platform', leveraging existing web APIs and fundamentals like forms, HTTP, and caching, making learned skills highly transferable.11:52
• 🚀Start new projects with `npx create react router@latest` to leverage the latest framework features.36:45
• 🔧Utilizing entry files (`entry.server.tsx` and `entry.client.tsx`) provides deep customization over server response generation and client-side hydration.43:33
• 🔍Route files (e.g., `sales.tsx`) are central, defining UI (default export), data loading (`loader`), data mutations (`action`), and error handling (`errorBoundary`) for specific URLs.45:42

Chapters

• 0:04🎯 Introduction to React Router and Course Overview
• 8:15🎯 React Router as a Full Stack Framework
• 8:37🎯 Prerequisites and History of React Router
• 11:06🎯 Why Learn React Router?
• 15:21🎯 React Router and Remix Merger
• 17:20🎯 Building the React Router Recipes App
• 51:43🎯 Basic Routing Setup
• 51:43🎯 Dynamic and Parameterized Routes
• 53:44🎯 Nested Routes in React Router
• 57:20🎯 Using the Outlet Component for Nested Routes
• 58:52🎯 The Root Route and Global Layout
• 1:09:24🎯 Styling with Links and CSS
• 1:21:40🎯 Styling Techniques: CSS Modules and Tailwind
• 1:25:01🎯 Building a Navbar with Tailwind
• 1:28:16🎯 Adding Icons to Navigation with Hero Icons
• 1:34:49🎯 Highlighting Active Links with NavLink
• 1:37:21🎯 Responsive Navbar Design for Mobile
• 1:39:27🎯 Data Loading with Loaders
• 1:42:11🎯 Parallel Data Loading and Streamed Responses
• 1:46:13🎯 Implementing Pending UI During Data Load
• 1:56:02🎯 Handling Slow Loader Responses with Suspense
• 1:57:25🎯 Rerendering Suspense on Route Changes
• 1:58:47🎯 Benefits of Remix Data Loading Strategy
• 2:08:17🎯 Error Handling and Boundaries
• 2:12:59🎯 Setting up PostgreSQL with Docker
• 2:28:16🎯 Installing Prisma for Database Interaction
• 2:35:24🎯 Using Prisma in Remix

The digest

More from Zero To Mastery

All Zero To Mastery summaries →