React Router Fundamentals part 1 ⛓️

First part of the react-router fundamentals workshop. We go over everything you need to know about data reading and display.

This workshop focuses on data loading and display. It is designed to teach you the core concepts of react-router v7 in a hands-on, project-based way.

We will learn how to build an e-commerce app from scratch using react-router v7. Along the way, we will cover topics such as:

• Setting up a react-router v7 project
• Creating routes and nested routes
• Loading data with loaders
• Displaying data with components
• Handling loading states
• Using fetchers to fetch data
• Sorting, filtering, and paginating data
• Progressive enhancement and accessibility

By the end of this workshop, you will have a solid understanding of how to use react-router v7 to build data-driven applications. You will also have a working e-commerce app that you can use as a starting point for your own projects.

This workshop assumes you have a basic understanding of React and JavaScript. No prior knowledge of react-router is required.

---

---

Prerequisites

• React knowledge
• Some JavaScript experience
• Basic understanding of TypeScript (types, interfaces, etc)
• Basic understanding of HTML & CSS
• Basic understanding of web development (HTTP, APIs, etc)
• Basic understanding of command line usage
• Basic understanding of server/client architecture
• NO react-router knowledge is needed!

Pre-workshop Resources

Here are some resources you can read before taking the workshop to get you up to speed on some of the tools and concepts we'll be covering:

• https://react.dev/blog/2024/12/05/react-19 (React 19 blog post)
• https://react.dev/learn (React official docs - learn section)
• https://reactrouter.com/home (React Router official docs)
• https://www.typescriptlang.org/docs/handbook/2/basic-types.html (TypeScript basic types docs)

Useful to go through if you want to get a head start on the workshop:

• https://v2.remix.run/docs/discussion/introduction (Remix introduction docs, keep in mind that react-router v7 framework mode is a continuation of Remix v2)
• https://v2.remix.run/docs/discussion/progressive-enhancement (Progressive enhancement in Remix, also applicable to react-router v7 framework mode)
• https://developer.mozilla.org/en-US/ (this is your best friend for web development, check out anything you don't understand here)

System Requirements

• git v2.18 or greater
• NodeJS v18 or greater
• npm v8 or greater

All of these must be available in your PATH. To verify things are set up properly, you can run this:

git --version
node --version
npm --version

If you have trouble with any of these, learn more about the PATH environment variable and how to fix it here for windows or mac/linux.

Setup

This is a pretty large project (it's actually many apps in one) so it can take several minutes to get everything set up the first time. Please have a strong network connection before running the setup and grab a snack.

Warning: This repo is very large. Make sure you have a good internet connection before you start the setup process. The instructions below use --depth to limit the amount you download, but if you have a slow connection, or you pay for bandwidth, you may want to find a place with a better connection.

Follow these steps to get this set up:

git clone --depth 1 https://github.com/epicweb-dev/react-router-fundamentals-pt-1.git
cd react-router-fundamentals-pt-1
npm run setup

If you experience errors here, please open an issue with as many details as you can offer.

The Workshop App

Learn all about the workshop app on the Epic Web Getting Started Guide.