Create React App #

Create React App 是 React 官方支持的创建单页 React 应用的方式。以下将介绍如何在 Create React App 中使用 rsuite。

自动安装 #

Create React App 允许用户使用模板创建项目，rsuite 提供了两个模板，分别是 JavaScript 和 TypeScript。

JavaScript 模版 #

生成 JavaScript 项目的入门模板，请运行以下命令：

TypeScript 模版 #

生成 TypeScript 项目的入门模板，请运行以下命令：

手动安装 #

如果您已经有了一个 Create React App 项目，您可以按照以下步骤安装 rsuite。

1、安装 rsuite #

在 Create React App 项目目录中，通过运行以下任一命令来安装 rsuite：

2、使用 rsuite 组件 #

编辑./src/App.js，使用 CustomProvider 组件包裹根组件，设置默认主题为 light:

import React from 'react';
import { Button, CustomProvider, Container } from 'rsuite';
import logo from './logo.svg';
import 'rsuite/dist/rsuite.css';
import './App.css';

function App() {
  return (
    <CustomProvider theme="light">
      <Container className="app">
        <header className="app-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>

          <Button href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
            Learn React
          </Button>
        </header>
      </Container>
    </CustomProvider>
  );
}

export default App;

示例项目 #

• examples/create-react-app