<<Download>> Download Microsoft Word Course Outline Icon Word Version Download PDF Course Outline Icon PDF Version

Updated June 2026

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.

Class Duration

35 hours of live training delivered over 5 days.

Student Prerequisites

  • Experience with modern JavaScript or TypeScript
  • Working knowledge of the new language features like classes, modules, arrow functions, and destructuring

Target Audience

Web developers and teams building full-stack React 19 applications who want a clean alternative to Next.js, including teams migrating existing Remix apps to React Router 7 or working across both Remix and React Router 7 codebases.

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.

Learning Outcomes

  • 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.

Training Materials

Comprehensive courseware is distributed online at the start of class. All students receive a downloadable MP4 recording of the training.

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 Code extensions. If students are unable to configure a local environment, a cloud-based environment can be provided.

Training Topics

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
<<Download>> Download Microsoft Word Course Outline Icon Word Version Download PDF Course Outline Icon PDF Version