React Router fundamentals - Painting the Screen

With the release of stable middleware and RSC's around the corner there has been no better time to learn react-router!

Join me for a 1 day live event where we will dive deep into the fundamentals of React Router and start our journey of Building a comprehensive e-commerce store using react-router Framework mode (formerly remix v2).

You will learn all it takes to get started with react-router and how to paint your screens with metadata, fetch dynamic data from databases, how to optimize your loader performance, pagination, sorting and filtering using react-router and by the end of it you'll be able to start of your journey with react-router.

Who Is This Workshop For:

• Developers who struggle to understand the concepts of react-router Framework mode and how to use it effectively to present data to your users.
• Developers who want to optimize their loaders and understand the trade-offs between different approaches of data-fetching.
• Developers who want to optimize their SEO experience and learn of all the ways they can do that with react-router.
• Developers who struggle to understand how routing Works with react-router and how they can create their own conventions

What you'll learn

React Router is a vast Framework with a lot of features, and for this workshop to make sense and be digestable we will focus on a specific subset of those features which is also the most important:

1. Basics - Learn the basic structure of any react-router application, what each one of these files is used for and how you can use different conventions for your routing needs, whether you want file-based or config-based routing.
2. SEO - You will learn about trade-offs of using React 19 vs react-router to render metadata, how to customize these behaviors and merge parent/child metadata together.
3. Data fetching - The most important part of any app is to fetch data from somewhere and show it to your user, in this module we will explore how to fetch data, filter it, sort it and paginate it using loaders, how to optimize your loaders to perform better with simple tricks, and how to use the platform to create all of this in a progressively enhanced way.

Required Experience

• You do not have to have any experience with react-router, this course is aimed at people who are freshly embarking on the react-router journey.
• Experience with databases and how to use them is recommended but not required, due to this not being focused on databases and ORM's everything will be prepared ahead for you to use in your apps and focus on the react-router specific things, but understanding how it all Works will be very beneficial for you.
• Basic experience with TypeScript is required, again, not focusing on TypeScript but we are using it and we will go through typesafety in react-router so it's highly recommended you understand how TypeScript Works.
• Experience with React is required, we will be using React extensively throughout the exercises as this is a React Framework. You do not need to be an expert, but you do need to know how to write components and pass in props and the basics like that, all the Advanced patterns will be prepared in advance for convenience if they are not tied to learning react-router.