React Plugin#

The React plugin provides support for React features. The plugin internally integrates features such as React Refresh.

Quick Start#

Install Plugin#

You can install the plugin using the following command:

npm add @rsbuild/plugin-react -D

Register Plugin#

You can register the plugin in the rsbuild.config.ts file:

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

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

After registering the plugin, you can directly develop React.

Import component library on demand#

The on-demand import capability of the React component library comes from source.transformImport.

When the Ant Design component library <= 4.x version is installed in the project, Rsbuild will automatically add on-demand import capabilities, and the default configuration is as follows:

const defaultAntdConfig = {
  libraryName: 'antd',
  libraryDirectory: isServer ? 'lib' : 'es',
  style: true,
};

When the Arco Design component library is installed in the project, Rsbuild will automatically add on-demand import capabilities, and the default configuration is as follows:

const defaultArcoConfig = [
  {
    libraryName: '@arco-design/web-react',
    libraryDirectory: isServer ? 'lib' : 'es',
    camelToDashComponentName: false,
    style: true,
  },
  {
    libraryName: '@arco-design/web-react/icon',
    libraryDirectory: isServer ? 'react-icon-cjs' : 'react-icon',
    camelToDashComponentName: false,
  },
];