最近一直在使用React.js开发项目，在开发过程中也用到了一些开源UI组件库。上次有给大家分享React移动端组件库，今天，就给大家推荐9个常用React PC端组件库。

2020年7个优质React移动端UI组件库

1、Element-React

element-react | 饿了么团队出品的一套为开发者、设计师等准备的基于 React 的 PC端组件库，是 ElementUI 的 React 版本。

https://elemefe.github.io/element-react/index

https://github.com/ElemeFE/element-react

安装

$ npm i element-react -S
// 安装主题包
$ npm i element-theme-default -S

使用

// 引入组件
import React from "react";
import ReactDOM from "react-dom";
import { Button } from 'element-react';
import 'element-theme-default';

return (
  <Button type="primary">
    Hello Element
  </Button>
);

2、Ant Design

antd | 阿里巴巴团队出品的基于 Ant Design 设计体系的 React UI 组件库。

主要用于研发企业级中后台产品，有自己独特的设计风格和理念。在支付宝、蚂蚁金服等多个阿里项目中投入使用。组件化质量非常高，开箱即用。

https://ant.design/docs/react/introduce-cn

https://github.com/ant-design/ant-design/

特性

• 提炼自企业级产品的交互语言和视觉风格。
• 开箱即用的高质量 React 组件。
• 使用 TypeScript 开发，提供完整的类型定义文件。
• 全链路开发和设计工具体系。
• 数十个国际化语言支持。
• 深入每个细节的主题定制能力。

安装

$ npm i antd -S

使用

// 引入组件
import React from "react";
import ReactDOM from "react-dom";
import { DatePicker, message } from 'antd';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

const App = () => {
  const handleChange = value => {
    message.info(`您选择的日期是: ${value ? value.format('YYYY年MM月DD日') : '未选择'}`);
  };
  return (
    <div style={{ width: 400, margin: '100px auto' }}>
        <DatePicker onChange={handleChange} />
    </div>
  );
};

render(<App />, document.getElementById('root'));

3、Zan UI

Zent | Zent ( \'zent\ ) 是 有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。

目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，并会在此基础上，持续开发一些新组件。

https://youzan.github.io/zent/

https://github.com/youzan/zent

特性

• 高质量 React 基础组件及丰富的业务组件
• 内置 TypeScript 类型定义文件
• 支持定制主题
• 代码/样式按需加载
• 一套有赞设计师绘制的图标库

安装

$ npm i zent -S

使用

// 引入组件
import React from "react";
import ReactDOM from "react-dom";
import { Button } from 'zent';
import 'zent/css/index.css';
// 按需引入
// import Button from 'zent/es/button';

ReactDOM.render((
  <Button />
), document.getElementById('root'));

4、React Bootstrap

react-bootstrap | 一款基于 ReactJS 对 Bootstrap 进行封装前端组件库。

组件依赖于bootstrap。与 Twitter Bootstrap 一致外观与感受，通过 Facebook 的 React.js 框架获得更清爽代码。

https://react-bootstrap.github.io/

https://github.com/react-bootstrap/react-bootstrap

安装

$ npm i react-bootstrap bootstrap -S

使用

// 引入组件
import React from "react";
import ReactDOM from "react-dom";
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
// 按需引入
// import Button from 'react-bootstrap/Button';

export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );
};

5、Evergreen

evergreen | Segment 推出的 React 组件库，风格简单好看。

用于在web上构建企业级Web应用程序，拥有丰富的组件、具有无限的可组合性、开箱即用。

https://evergreen.segment.com/

https://github.com/segmentio/evergreen

安装

$ npm i evergreen-ui -S

使用

// 引入组件
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'evergreen-ui';

ReactDOM.render(
  <Button>Hello Evergreen!</Button>,
  document.getElementById('root')
)

6、React Suite

rsuite | 一套基于 React 的 UI 组件库，贴心的 UI 设计，友好的开发体验，为中后台产品而生。

https://rsuitejs.com/

https://github.com/rsuite/rsuite

安装

$ npm i rsuite -S

使用

// 引入组件
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'rsuite';
import 'rsuite/lib/styles/index.less'; // or 'rsuite/dist/styles/rsuite-default.css'

ReactDOM.render(
  <Button>Hello Rsuite!</Button>,
  document.getElementById('root')
)

7、Base Web

baseweb | Uber 出品的 React web组件库，黑色主色风格，网站体验不错。

https://baseweb.design

https://github.com/uber/baseweb

安装

$ npm i baseui styletron-engine-atomic styletron-react -S

使用

import {Client as Styletron} from 'styletron-engine-atomic';
import {Provider as StyletronProvider} from 'styletron-react';
import {LightTheme, BaseProvider, styled} from 'baseui';
import {StatefulInput} from 'baseui/input';

const engine = new Styletron();

const Centered = styled('div', {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: '100%',
});

export default function Hello () {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        <Centered>
          <StatefulInput />
        </Centered>
      </BaseProvider>
    </StyletronProvider>
  );
}

8、React Belle

belle | 提供一系列漂亮的，可配置的组件，包括扁平按钮、开关、下拉列表框、评分、文本输入、卡片等等。

http://nikgraf.github.io/belle/

https://github.com/nikgraf/belle

安装

$ npm i belle -S

使用

// 引入组件
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'belle';

ReactDOM.render(
  <Button>Hello</Button>,
  document.getElementById('root')
)

9、SHINEOUT

shineout | 一个更加轻量、快速、高性能的基于React的pc端组件库。

https://shine.wiki

https://github.com/sheinsight/shineout

安装

$ npm i shineout -S

使用

// 引入组件
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'shineout';
import 'shineout/dist/theme.default.css'; // or 'shineout/dist/theme.antd.css'

export default (props) => {
  return (
    <Button type="success">Success Button</Button>
  );
};

OK，这次就分享到这里啦。如果小伙伴们有比较好的react pc端UI组件库，欢迎大家在下方进行留言讨论，很期待你的分享！

最后

如果觉得这篇文章对你有帮助，点个『赞/转发』，让更多的人也能看到你的贡献！