React Router is a multi-strategy router for React, which means it can be used in different ways depending on the needs of your application. In this guide, we’ll explore the framework mode, which is a new way to use React Router that allows you to define your routes in a more declarative way.

Generating a new React project

The framework mode is the one that offers the most features (check comparison table), hence it has a few dependencies than the other modes. For that reason, setting it up manually it’s a bit tricky. A better idea is to generate a new project using the following command:

npx create-react-router@latest my-react-router-app

Where my-react-router-app is the name of our project. This command will generate a new React project with the all the necessary dependencies to use React Router in framework mode.

Once we have our project created, we can navigate to the root folder and start the development server:

cd my-react-router-app
npm run dev

Important Files

If we open the project in our code editor, we should see a bunch of files and folders, but the most important ones are inside the app folder:

• app/root.tsx: This is the entry point of our application, from where we export:
  • The Route.LinksFunction.
  • The Layout component.
  • The App component.
  • An ErrorBoundary component.
• app/routes.ts: This is where we define our routes.

Defining Routes

Routes must be defined in the app/routes.ts file. For example, let’s define a simple route that renders a route module named home.tsx when the URL is /:

import { type RouteConfig, index } from '@react-router/dev/routes'

export default [
    route('/', 'routes/home.tsx')
] satisfies RouteConfig

The route function is known as a route matcher; this route matcher takes two arguments:

• A URL pattern to match the URL, in this case ’/’.
• A file path to the route module that will be rendered when the URL matches the pattern.

Since having a route for the home page is a common use case, React Router provides a helper function called index that does the same as route('/', 'routes/home.tsx'):

import { type RouteConfig, index } from '@react-router/dev/routes'

export default [
    route('/', 'routes/home.tsx')
    index('routes/home.tsx')
] satisfies RouteConfig

These are the contents of routes/home.tsx:

export default function Index() {
  return <h1>You are at Index</h1>
}

You made a GET request to / but did not provide a `loader` for route "routes/home", so there is no way to handle the request.

Adding a Loader

Let’s define data loading for our route module. There are two ways to do this:

• Client Data Loading, using the clientLoader function.
• Server Data Loading, using the loader function.

Client Data Loading

Let’s add a clientLoader function to fetch a list of TODOs from the JSONPlaceholder API. We’ll render the list of TODOs in the home.tsx route module:

import type { Route } from '../+types/root'

interface Todo {
  userId: number
  id: number
  title: string
  completed: boolean
} // Better move this type to a separate file (types/todo.ts) and import it here.

export async function clientLoader() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos')
  if (!response.ok) {
    throw new Error('Failed to fetch todos')
  }

  return response.json()
}

export default function Home({ loaderData }: Route.ComponentProps) {
  return (
    <main>
      <h1>You are at Index</h1>
      <h2>Todos</h2>
      <ul>
        {(loaderData ?? []).map((todo: Todo) => (
          <li key={todo.id} className="py-4">
            <h3>{todo.title}</h3>
            <p>{todo.completed ? 'Completed' : 'Not Completed'}</p>
          </li>
        ))}
      </ul>
    </main>
  )
}

Yeah, I know, it’s a lot of code for rendering just a TODO list!, but let’s break it down:

• We define a Todo type that represents the structure of the data we’re going to fetch.
• Note that clientLoader runs on the client side, like a traditional SPA; open the network tab to verify the request.
• In the React component, we destructure the loaderData prop to access the data fetched by the clientLoader function. Then we render the list of TODOs.

// HydrateFallback is rendered while the client loader is running
export function HydrateFallback() {
  return <div>Loading...</div>;
}

Server Data Loading

Server Data Loading works the same way as the clientLoader, but it runs on the server side. Let’s add a loader function to fetch the individual TODOs:

import type { Route } from '../+types/root'
import { Link } from 'react-router'
import type { Todo } from 'types/todo'

export async function loader({ params }: { params: { id: string } }) {
  const { id } = params
  const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
  if (!response.ok) {
    throw new Error('Failed to fetch todos!')
  }

  return await response.json()
}

export default function Todo({ loaderData }: Route.ComponentProps) {
  const todo = loaderData ? (loaderData as Todo) : null

  return (
    <main>
      <Link to="/">Back Home</Link>

      {todo && (
        <div key={todo.id}>
          <h3>{todo.title}</h3>

          <p>{todo.completed ? 'Completed' : 'Not Completed'}</p>
        </div>
      )}
    </main>
  )
}

The loader function runs on the server, so you won’t be able to see the network request in the browser’s console. We get good old HTML from the backend, which you can verify it by disabling JavaScript in the browser.

import { type RouteConfig, index, route } from '@react-router/dev/routes'

export default [
    index('routes/home.tsx'),
    route('todo/:id', 'routes/todo.tsx')
] satisfies RouteConfig

Adding a Layout Route

It’s pretty common to have a layout component shared amongst several routes in our application. As you can see, both our route modules have a main element repeated (in real life scenarios we’d have way more than that). We can define a layout route in the app/root.tsx file:

import { Layout } from '@react-router/dev/routes'

export default [
    layout("./components/layout.tsx", [
        index('routes/home.tsx'),
        route('todo/:id', 'routes/todo.tsx')
    ]),
]

An this is the content of components/layout.tsx:

import { Outlet } from 'react-router'

export default function Layout() {
  return (
    <div>
      <header>
        <h1>TODO list app</h1>
      </header>

      <main>
        <Outlet />
      </main>
    </div>
  )
}

So the way this works is that the Layout component is rendered for all the nested routes, wrapping them, and the Outlet component is used to render the child routes.

Nested routes

We can also define nested routes in our application. Let’s say we want to have a

Adding a 404 Route

This one is really simple, we just have to add a route matcher that matches any URL:

import { type RouteConfig, index, route } from '@react-router/dev/routes'

export default [
    index('routes/home.tsx'),
    route('todo/:id', 'routes/todo.tsx'),
    route('*', 'routes/not-found.tsx')
] satisfies RouteConfig

And the content of routes/not-found.tsx:

export default function NotFound() {
  return <h1>404 - Not Found</h1>
}

uv is an extremely fast package and project manager for Python, written in Rust. I hear you mumbling, another package manager for Python? Bro, this time is different, hear me out, uv really is the future. In this post we’ll spend some minutes learning how to use it.

What can I do with it?

Lots of things, but from the top of my head:

• Install packages, duh, but 10-100x faster than pip, the official package manager for Python.
• Install and manage Python versions; goodbye pyenv.
• It’s also a project manager; sayonara Poetry.
• Run and install command-line tools, alla npx.
• Workspaces, what?!

Installation

There are plenty of ways to get this puppy up and running in our machine. The first one, if you’re lucky enough to be on Linux or macOS:

$ curl -LsSf https://astral.sh/uv/install.sh | sh

After the installation, we have to restart our shell (just type exit in your terminal). That’s because the installer added uv to our PATH.

powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

pip install uv

Anyways, once you’ve installed it, and as a sanity test, run:

$ uv
An extremely fast Python package manager.

Usage: uv [OPTIONS] <COMMAND>

Installing Python Versions

uv can also install and manage Python versions:

$ uv python install

That would get us the latest version, but if you want to install a specific one, just say it:

$ uv python install 3.12

To see a list of the available and installed Python versions:

$ uv python list

Projects

uv supports managing Python projects, which define their dependencies in a pyproject.toml file. Like in other languages, we can create a new Python project using the uv init command:

uv init my-proj

That will create the following project structure within the my-proj folder:

.
├── .python-version
├── README.md
├── main.py
└── pyproject.toml

The main.py file contains a simple “Hello world” program. Try it out with uv run:

$ cd my-proj
$ uv run main.py
Using CPython 3.13.2 interpreter at: /usr/bin/python3.13
Creating virtual environment at: .venv
Hello from my-proj!

Now, if we list the content of our project:

$ ls -a
.
├── .git
├── .gitignore
├── .venv
│   ├── bin
│   ├── lib
│   └── pyvenv.cfg
├── .python-version
├── README.md
├── main.py
├── pyproject.toml
└── uv.lock

That’s right, uv has created a virtual environment (in .venv folder), and initialized a git repo for us. From a project point of view, the pyproject.toml contains our project’s metadata (sort of the package.json in Node.js):

[project]
name = "hello-world"
version = "0.1.0"
description = "Add your description here"
readme = "README.md"
dependencies = []

Managing Dependencies

Managing dependencies is easy. Let’s say we want to install marimo:

uv add marimo

Marimo includes a tutorial, so let’s run it, to verify it’s installed:

uv run marimo tutorial intro

marimo tutorial
zsh: command not found: marimo

I hope that was enough to get you started; feel free to check the official docs, they’re awesome.