Alem TuzlakReact Router has evolved quickly, with stable middleware and RSCs right around the corner, there’s never been a better time to truly understand how the framework works.
This 4-day live workshop bundle is a complete, end-to-end introduction to React Router Framework Mode (formerly Remix v2). Across two connected workshops, you’ll build a comprehensive e-commerce application while learning how routing, data loading, metadata, and middleware all work together.
Instead of learning features in isolation, you’ll understand how React Router thinks, from painting the screen, to fetching and shaping data, to processing requests before they ever hit your UI.
-
Painting the Screen: focuses on how your app renders: routing, screens, metadata, loaders, and SEO.
-
Data Processing and Middleware: focuses on how your app processes data: request handling, middleware, and the mechanics that power everything behind the scenes.
By the end of the bundle, you won’t just “use” React Router, you’ll understand how to design applications with it confidently and intentionally.
What You’ll Build
Throughout these workshops, we’ll incrementally build a real-world e-commerce application, using React Router Framework Mode as the foundation.
You’ll learn how to:
- Design routes and conventions that scale
- Fetch, filter, sort, and paginate data efficiently
- Optimize loaders for performance
- Paint screens with metadata for SEO
- Understand request lifecycles and middleware
- Make informed trade-offs between different rendering and data-fetching approaches
What You’ll Learn
Core React Router Fundamentals
- The structure of a React Router application
- File-based vs config-based routing (and when to use each)
- How routing conventions actually work — and how to create your own
- How parent and child routes compose together
Painting the Screen & SEO
- How metadata works in React Router
- Trade-offs between React 19 metadata and React Router metadata
- Merging parent and child metadata
- Optimizing SEO for real applications
Data Fetching & Loaders
- Using loaders to fetch and present data
- Filtering, sorting, and pagination patterns
- Progressive enhancement with the platform
- Simple but effective loader performance optimizations
- Understanding trade-offs between different data-fetching strategies
Data Processing & Middleware
- How requests flow through a React Router application
- Using middleware to process data before it reaches your routes
- Structuring server logic in a maintainable way
- Connecting data processing decisions to routing and rendering outcomes
Required Experience
You don’t need prior React Router experience.
Recommended:
- Basic experience with React (components, props, hooks)
- Basic familiarity with TypeScript
- General understanding of databases (helpful, but not required)
All database setup and advanced patterns are prepared ahead of time so you can focus on learning React Router, not fighting tooling.
