前段时间始终在采用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/indexhttps://github.com/ElemeFE/element-react

加装

$ npmi 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-cnhttps://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.designhttps://github.com/uber/baseweb

加装

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

采用

import {Client asStyletron}from styletron-engine-atomic; import {Provider as StyletronProvider} from styletron-react; import{LightTheme, BaseProvider, styled}from baseui; import {StatefulInput} from baseui/input; const engine = newStyletron();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.wikihttps://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> ); };