React Router Fundamentals - Data Processing and Middleware

Live Workshops
with Alem TuzlakAlem Tuzlak


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 2 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 authenticate your users, create persistent sessions, custom global server contexts, use middleware for self-committing sessions, handle form submissions, handle user authentication and many more features that this framework offers! By the end we will have a user dashboard where they can add, edit and review products that the store is selling.

This workshop is picking up where the first part of the React Router Fundamentals - Painting the screen left off as we dive deeper into React Router and everything it offers.

Workshop outcomes

When you're finished with this workshop you will:

  • Understand how to submit data to the server, validate it, and communicate validation errors back to the client
  • Deeply understand middleware, how to use middleware and how you can use it to achieve some really advanced scenarios to make your code better -Understand how authentication works with React Router, how you can have persistent sessions, keep your users logged in, authenticate them through requests and middleware and do it with the most up-to-date approach
  • Understand how actions work in React Router, what happens after they run, how you can handle errors and recover from them and what it takes to have a fully functioning, modern web application.

What you'll learn

React Router is a vast Framework with a lot of features, the first part of the React Router fundamentals focused on painting the screen with data, routing, loaders, error handling and everything it takes to make the UI pretty!

This workshop is all about submitting data through forms, then processing that data on the server, we will be building a full authentication flow by rolling our own auth and you will learn the following through these exercises:

  • Form handling - Learn all about handling forms on the client, showing custom errors returned from the server in your forms, submitting data to actions, handling validation on both sides, best practices related to form handling and what to do once we validate the data on the server
  • Sessions and cookies - You'll learn about persistent user sessions, how we can store logged-in user data into cookies to keep it alive across our client and browser, how to create self-committing sessions with middleware, how to use AsyncLocalStorage to create globally available contexts without having to pass through objects through your functions and more.
  • Middleware - This workshop will teach you how to use React Router middleware efficiently, the pitfalls, the trade-offs, and when you should use it opposed to just using loaders or actions.

Prerequisites

You do not have to have any experience with React Router, this workshop 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 type safety 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.

Share this Live Workshop

alem tuzlak profile picture
Hosted by Alem Tuzlak

Alem Tuzlak is an experienced software developer, co-founder of Forge 42, and a recognized expert in Remix.run and React Router. With a strong focus on open-source development, Alem has created and maintained several high-impact projects such as Remix Development Tools, Remix-Toast, Remix-Client-Cache, and Remix-Hook-Form. These open-source projects have accumulated over a few million downloads, with weekly counts going over 150k. Alem is passionate about modern web development, specifically server-side rendering (SSR), event-driven architectures, and optimizing developer experience (DX). Alem’s work extends beyond coding, as he also contributes to fostering regional engagement with developer communities. He organizes events like Supabase and Remix-run meetups in Sarajevo, where he brings together developers to learn and collaborate. As an entrepreneur, Alem is dedicated to scaling his agency, Forge 42, which specializes in Remix-run consulting and open-source solutions. His leadership focuses on creating impactful tools while also building a strong and sustainable business.