Bootstrap React application with Vite
To start a React application, run npx create-vite@latest and choose 'React'. Alternatively, you can bootstrap your application with other bundlers like Parcel or Webpack.
React Router · Getting started · all subjects
installation
25 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Declarative Mode page order
Declarative Mode is the 4th page in the React Router documentation start section.
Create Vite React project for React Router
Start with a React template from Vite by running: npx create-vite@latest and choose React.
React Router npm installation command
Install React Router from npm using the command: npm i react-router
React Router Framework Mode documentation location
React Router Framework Mode is documented in the official repository at docs/start/framework/index.md. This is the second ordered document in the start section (order: 2).
Using ready-to-deploy React Router templates
React Router provides ready-to-deploy templates available at https://github.com/remix-run/react-router-templates. To use a specific template, run `npx create-react-router@latest --template remix-run/react-router-templates/<template-name>` and replace `<template-name>` with the desired template name.
Start React Router development server
After creating a React Router project with `create-react-router@latest`, navigate to the project directory with `cd my-react-router-app`, then run `npm i` to install dependencies, and `npm run dev` to start the development server. The app will be accessible at `http://localhost:5173`.
Manual React Router setup reference
The default React Router template is available on GitHub at https://github.com/remix-run/react-router-templates/tree/main/default. This template can be viewed to understand how to manually set up a React Router project.
Create React Router project with CLI
To create a new React Router project, run `npx create-react-router@latest my-react-router-app` in the terminal. This uses the basic template maintained by React Router.
React Router Getting Started documentation index
The React Router documentation has a 'Getting Started' section that serves as the entry point for learning the framework. This section is ordered first in the documentation structure.
Express server example with React Router
Example Express server setup: import createRequestHandler from @react-router/express and express. Create an express app, serve static files from build/client, then use createRequestHandler with the build module from ./build/server/index.js passed to it.
Development workflow with Vite middleware
For development with instant feedback, use Vite in middleware mode. In development (when NODE_ENV is not production), create a Vite server with middlewareMode: true and use it as middleware in your server. Use virtual:react-router/server-build for ssrLoadModule instead of importing the built server module.
npm scripts for dev and production
Add dev and start scripts to package.json. The dev script runs: node ./server.js. The start script runs: cross-env NODE_ENV=production node ./server.js
React Router reveal command
Run npx react-router reveal to generate default entry files. This creates app/entry.client.tsx and app/entry.server.tsx, allowing you to customize React Router's entry points to the server and browser.
Minimal React Router project file structure
A minimal React Router app consists of four files: app/root.jsx (root layout), app/routes.js (route definitions), package.json (project config), and vite.config.js (Vite configuration).
Single Page Application option
React Router can also be used as a Single Page Application with no server. Refer to the Single Page Apps guide for more information on this alternative deployment mode.
Installation dependencies for React Router app
To set up a React Router app from scratch, install these runtime dependencies: react-router, @react-router/node, @react-router/serve, isbot, react, and react-dom. Install these dev dependencies: @react-router/dev and vite.
Create React Router CLI for quick start
You can use the create-react-router CLI to quickly initialize a batteries-included React Router project with templates. Run: npx create-react-router@latest
Vite config with React Router plugin
React Router requires a Vite config file at vite.config.js. The minimal config must import the reactRouter plugin from @react-router/dev/vite and defineConfig from vite, then export a defineConfig call with plugins: [reactRouter()].
Package.json type module configuration
Set type as module in package.json to satisfy ES module requirements for react-router. Run: npm pkg set type="module"
Build command for React Router
Build the app for production using: npx react-router build. This creates a build folder with a server folder (server version) and client folder (browser version) containing build artifacts.
Run app with react-router-serve
After building, run the app using: npx react-router-serve build/server/index.js. The app will be accessible at http://localhost:3000.
React Router framework mode compilation output
React Router framework mode compiles an app into two things: a request handler that you add to your own JavaScript server, and a pile of static assets in the public directory for the browser.
React Router as a request handler module
The result of react-router build is just a module that runs inside a server. The build/server directory can be used with any JavaScript server environment including Express, Cloudflare Workers, Netlify, Vercel, Fastly, AWS, Deno, Azure, Fastify, Firebase, and others.
Express adapter for React Router
To use React Router with Express, install express, @react-router/express, and cross-env. Use createRequestHandler from @react-router/express, passing the build module to configure the server.