Remix

Essential React

01 Server-Side Rendering

02 Setup

03 Routing

04 Data Fetching

05 Forms & Actions

Setup

Create a new Remix app


                $ npx create-remix@latest pokedex-remix
                  ? What type of app do you want to create?
                    > Just the basics
                  ? Where do you want to deploy?
                    > Remix App Server
                  ?  TypeScript or JavaScript?
                    > TypeScript
                  ?  Do you want me to run `npm install`?
                    > Yes
 
                $ cd ./pokedex-remix
                $ npm run dev

File Structure

app/routes/*.tsx
route files (more details in next chapter)
app/entry.*.tsx
complete control over server and client entry points (optional)
app/root.tsx
describes the app's HTML document / root layout
public/*
public asset files
remix.config.js
dev server / build options

app/root.tsx

NPM Scripts

npm run dev

Starts the app in dev mode with hot reload

npm run build

Creates a production build of your app (output in build and public/build folders)

npm start

Starts Node.js server in build folder

For deployment to common platforms consider using a template (see README.md)

npm run typecheck

Runs TypeScript compiler to ensure type-safety in build pipeline (not done automatically by Remix compiler)

Routing

Intro to Route File Naming

General conventions

Remix uses the same concepts and core logic as React Router
Use file names to define routes
Route files are placed in app/routes
Flat file structure (no nested route folders)
Co-location of non-route files is possible

_index indicates an index route

→ URLs / and /blog

Static route segments

→ e.g. /about and/blog/archive

Use the dot delimiter for nested routes

→ URLs /blog/…

Dynamic route segments (parameters) start with a dollar symbol

→ e.g. /blog/five-great-tips-for-2024

See Remix docs for more details.

Route Module API

blog.$slug.tsx

How can we redirect to a different route?

E.g. / → /blog

How can we redirect to a different route?

E.g. / → /blog

_index.tsx

Must be a named export called loader.

_index.tsx

→ redirects to blog.tsx

Other Useful Route Module Exports

Exercise

npx create-remix@latest <app-name>
Set up routes for pokemon list, pokemon detail, and profile pages
Display mock data

Solution

_index.tsx

pokemon._index.tsx

pokemon.$pokemonName.tsx

Complete solution code can be found on GitHub on the branch exercise-02-routing.

Data Fetching

Loaders

Single, optional loader per route (export loader)
Run on the server (only)
Define a HTTP endpoint: request → response
useLoaderData to access response data in component

blog.$slug.tsx

Modifying the HTTP response

Return a Response object…

Modifying the HTTP response

…or throw it!

Exercise

Load the data for the list and detail pages from the Poke API
Show the Not Found page if an unknown pokemon name is passed in the URL
Stretch goal: Transform the data from the PokeAPI so that only the needed data is sent to the client

Solution

fetcher.ts

pokemon._index.tsx

pokemon.$pokemonName.tsx

Complete solution code can be found on GitHub on the branch exercise-03-data-fetching.