React#

在这篇文档中，你可以了解到如何基于 Rsbuild 来构建一个 React 应用。

创建 React 项目#

你可以使用 create-rsbuild 来创建一个 Rsbuild + React 的项目，调用以下命令：

npm create rsbuild@latest

然后在 Select framework 时选择 React 即可。

在已有项目中使用 React#

为了能够编译 React，你需要注册 Rsbuild 的 React 插件，插件会自动添加 React 构建所需的配置。

例如，在 rsbuild.config.ts 中注册：

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

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

使用 SVGR#

Rsbuild 支持调用 SVGR，将 SVG 图片转换为一个 React 组件使用。

如果你需要使用 SVGR，需要注册 Rsbuild 的 SVGR 插件。

使用 styled-components#

Rsbuild 提供对 styled-components 的编译时支持，优化调试体验并对 styled-components 添加服务器端渲染支持。

如果你需要使用 styled-components, 我们推荐你注册 Styled Components 插件。

部署应用#

当你执行 rsbuild build 构建应用后，你会在 dist 目录下得到一份静态资源产物，这份产物可以被部署到任意平台或服务器上。

请留意 Rsbuild 默认的产物结构并不适用于所有的平台，因为不同的平台对产物目录结构有不同的要求。你可以参考 构建产物目录 章节对目录结构进行修改，以满足部署平台的要求。

此外，如果你需要在本地预览待部署的产物，可以使用 Rsbuild CLI 提供的 rsbuild preview 命令。

React Fast Refresh#

Rsbuild 使用 React 官方的 Fast Refresh 能力来进行组件热更新。

注意 React Refresh 要求组件按照规范的方式编写，否则热更新可能无效，你可以使用 eslint-plugin-react-refresh 进行校验。

比如，如果 React 组件的热更新无法生效，或者是热更新后 React 组件的 state 丢失，这通常是因为你的 React 组件使用了匿名函数。在 React Fast Refresh 的官方实践中，要求组件不能为匿名函数，否则热更新后无法保留 React 组件的 state。

以下是一些错误用法的例子：

// 错误写法 1
export default function () {
  return <div>Hello World</div>;
}

// 错误写法 2
export default () => <div>Hello World</div>;

正确用法是给每个组件函数声明一个名称：

// 正确写法 1
export default function MyComponent() {
  return <div>Hello World</div>;
}

// 正确写法 2
const MyComponent = () => <div>Hello World</div>;

export default MyComponent;