#React

This document explains how to use Rsbuild to build a React application.

#Create a React application

Create a React application with Rsbuild using create-rsbuild. Run this command:

npm create rsbuild@latest

yarn create rsbuild

pnpm create rsbuild@latest

bun create rsbuild@latest

Then select React when prompted to "Select framework".

#Full-stack frameworks

The following full-stack React frameworks are built on Rsbuild and reuse Rsbuild's plugin ecosystem.

#TanStack Start

TanStack Start is a full-stack React framework powered by TanStack Router. It provides full-document SSR, streaming, Server Functions, client/server builds, and more.

• Documentation
• Basic example
• RSC example

You can initialize the TanStack Start example project with:

npx giget gh:rstackjs/rstack-examples/rsbuild/tanstack-start tanstack-start
cd tanstack-start
pnpm i

To migrate a TanStack Start project from Vite, see TanStack Start migration.

#Modern.js

Modern.js is a progressive web framework built on Rsbuild that provides out-of-the-box full-stack development capabilities for React applications.

#Use React in an existing project

To compile React's JSX syntax, register the Rsbuild React plugin. The plugin automatically adds the necessary configuration for building React applications.

For example, register in rsbuild.config.ts:

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [pluginReact()],
});

#Use SVGR

Rsbuild supports converting SVG to React components via SVGR.

To use SVGR, register the SVGR plugin.

#React Fast Refresh

Rsbuild uses React's official Fast Refresh capability to perform component hot updates.

React Refresh requires components to follow certain standards, or HMR may not work. Use eslint-plugin-react-refresh to validate your code.

If React component hot updates don't work, or component state is lost after updates, your React component is likely using an anonymous function. React Fast Refresh requires named functions to preserve component state after hot updates.

Here are some examples of wrong usage:

// bad
export default function () {
  return <div>Hello World</div>;
}

// bad
export default () => <div>Hello World</div>;

The correct usage is to declare a name for each component function:

// good
export default function MyComponent() {
  return <div>Hello World</div>;
}

// good
const MyComponent = () => <div