React Apps with React Router 7 (formerly Remix)

Note: Remix merged into React Router in late 2024. The framework is now distributed as React Router 7 in framework mode (@react-router/* packages), with the same loader/action/server-module model. Existing Remix codebases run with minimal changes; this course teaches the React Router 7 idioms while flagging where the names have changed.

Duration

5 Days

Description

This course teaches full-stack React 19 development with React Router 7 in framework mode — the unified framework that absorbed the original Remix project in late 2024. Participants learn the loader/action/server-module model that made Remix beloved, applied to React 19 features (Actions, useActionState, useOptimistic, the use hook). Coverage includes the file-based routing system, server-side rendering with hydration, progressive enhancement (forms that work without JS), <Form> vs. useFetcher for non-navigating mutations, network concurrency, the React Compiler, error boundaries, and deployment. The course flags every place where a Remix idiom has been renamed in React Router 7 so participants can confidently work in either codebase. Recommended for teams choosing an alternative to Next.js or migrating existing Remix apps to React Router 7.

Objectives

Grasp why React and Remix are chosen for modern web development and the specific problems they solve.
Dive into Remix's architecture, including React Router, Compiler, server-side HTTP handling, Web Fetch API, and understanding both server and browser frameworks.
Master setting up a development environment, including installing Node.js, configuring Visual Studio Code, React Developer Tools, and Remix NPM packages.
Learn to create and manage a Remix project, understanding folder structures, browser support, handling styles and assets, and managing dependencies.
Gain proficiency in creating and rendering React components, understanding JSX, and optimizing rendering with keys and various JSX operators.
Master advanced concepts like component props, events, and hooks, including state, effect, callback, and custom hooks.
Explore Remix's full-stack capabilities including isomorphic rendering, progressive enhancement, pending UI concepts, state management, and network concurrency.
Learn styling techniques (CSS Modules, Tailwind CSS, CSS-in-JS), unit testing (Jest, Testing Library), and deploy a fully functional React app with Remix.

Target Audience

All attendees must have experience with modern JavaScript or TypeScript, including the new language features like classes, modules, arrow functions, and destructuring.

Training Materials

All students receive comprehensive courseware covering all topics in the course. Courseware is distributed via GitHub in the form of documentation and extensive code samples. Students practice the topics covered through challenging hands-on lab exercises.

Software Requirements

Students will need a free, personal GitHub account to access the courseware. Students will need permission to install Node.js and Visual Studio Code on their computers. Also, students will need permission to install NPM Packages and Visual Studio Extensions. If students are unable to configure a local environment, a cloud-based environment can be provided.

Training Topics

Introduction

React 19 and React Router 7 Overview

Why React Router 7 (framework mode) in 2026?
The Remix → React Router 7 merge: what changed and what stayed the same
What problem does React solve?
What problem does React Router 7 solve (vs. Next.js)?

React Router 7 Architecture

React Router 7 packages: react-router, @react-router/node, @react-router/dev, etc.
The compiler and dev server (Vite-based)
Server-side HTTP handler
Web Fetch API throughout
Server framework and browser framework, working as one

Development Environment

Node.js 22+
Visual Studio Code with React Developer Tools
React Router 7 CLI (react-router dev, react-router build)
Migration cheatsheet from Remix imports to React Router 7 imports

React Router 7 Project Setup

create-react-router and the modern templates
Folder structure under app/
Browser support
Styles and assets
Dependencies and react-router.config.ts

React Components

Creating an Element
Create a Function Component
Rendering a Component
Composing & Reuse

React Component Rendering and JSX

What problem does JSX solve?
Embedding Expressions
Specifying Attributes
Using Fragments
Virtual DOM and Fiber Nodes
Ternary Operator (?)
Logical (&& and ||) Operators
Rendering a list of data
Optimizing rendering with keys

React Component Props

Immutable Props
String Literals vs. Expressions
Prop Types
Default Prop Values
Naming Patterns for Props

React Component Events

What are Events?
Common Events in React: Click and Change
Event Handlers and Functional Component
Passing Event Handlers via Props

React 19 Hooks

useState, useEffect, useCallback, useMemo (and what the React Compiler removes the need for)
useActionState and useFormStatus for form state
useOptimistic for optimistic UI
use for unwrapping promises
Custom hooks

Capture Data with Forms

Controlled and Uncontrolled Components
Enable Change Logic across Multiple Form Controls
Wiring up Input, Textarea, and Select
Handling different types of Input

React Component Architecture

Reusable Components
Component Communication
Design Patterns
Container and Presentation Components
Defining Prop Drilling

React Router 7 Routing

File-based routes under app/routes/
routes.ts for explicit route configuration
Dynamic and optional segments
Layout routes and route nesting
Linking and navigation with <Link> and <NavLink>
Error boundaries and ErrorBoundary exports
Pending and skeleton UI

Full-Stack Data Flow

loader functions for data loading
action functions for mutations
The meta and headers exports
Submission and automatic revalidation
clientLoader and clientAction for client-only paths

Isomorphic Rendering

Server vs. Client Execution
Server Rendering
Client Rendering
Server and Client Composition Patterns

Progressive Enhancement

What is Progressive Enhancement?
Why Progressive Enhancement?
Progressive Enhancement and Remix
Performance
Resilience and Accessibility
Simplicity

Pending UI

What is a Pending UI?
Busy Indicators
Optimistic UI
Skeleton Fallbacks

State Management

What is state management in a React Router 7 world?
Server state vs. client state
Anti-patterns: useState for data that belongs in the URL or on the server
Managing state with loaders/actions instead of React state

Network Concurrency Management

Multiple in-flight submissions
Cancellation
Race-condition handling

Form vs. Fetcher

<Form> component (replaces traditional <form> for navigating submissions)
useActionData() hook
useFetcher() hook for non-navigating mutations
useNavigation() hook for pending UI
URL considerations: when the URL should and shouldn't change

Styling

CSS Modules
Tailwind CSS
CSS-in-JS (Styled Components)
Sass

Testing

Vitest + Testing Library for components
Tests, test suites, assertions, and mocking
Testing components, event handlers, and custom hooks
Testing loaders and actions
Playwright for end-to-end tests

Deployment

Node adapter (default)
Cloudflare and Vercel adapters
Static export
Single-Page App mode