In this document, you will learn how to build a React application using Rsbuild.
You can use create-rsbuild
to create a project with Rsbuild + React. Just execute the following command:
Then select React
when prompted to "Select framework".
To compile React, you need to register the Rsbuild React Plugin. The plugin will automatically add the necessary configuration for React builds.
For example, register in rsbuild.config.ts
:
For projects using Create React App, you can refer to the CRA Migration Guide.
Rsbuild supports convert SVG to React components via SVGR.
If you need to use svgr, you also need to register the SVGR plugin.
Rsbuild uses React's official Fast Refresh capability to perform component hot updates.
Note that React Refresh requires components to be written according to the standards. Otherwise HMR may not work. You can use eslint-plugin-react-refresh for validation.
For example, if the hot update of the React component cannot take effect, or the state of the React component is lost after the hot update, it is usually because your React component uses an anonymous function. In the official practice of React Fast Refresh, it is required that the component cannot be an anonymous function, otherwise the state of the React component cannot be preserved after hot update.
Here are some examples of wrong usage:
The correct usage is to declare a name for each component function:
Rsbuild supports compiling styled-components, improve the debugging experience and add server-side rendering support to styled-components.
If you need to use styled-components, We recommend register the Styled Components plugin.
You can also refer to this example: styled-components.
Rsbuild supports compiling Emotion, you can add the following configuration to use:
You can also refer to this example: emotion.
Rsbuild supports @vanilla-extract/webpack-plugin. You can add the following config to use vanilla-extract:
You can also refer to this example: vanilla-extract.