「干货」9个最热门React PC端组件库|UI框架
最近一直在使用React.js开发项目，在开发过程中也用到了一些开源UI组件库。上次有给大家分享React移动端组件库，今天，就给大家推荐9个常用React PC端组件库。
1、Element-React
element-react | 饿了么团队出品的一套为开发者、设计师等准备的基于 React 的 PC端组件库，是 ElementUI 的 React 版本。
https://elemefe.github.io/element-react/indexhttps://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 (
);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 (
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((
), 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 (
);
};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(
,
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(
,
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 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 (
);
}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(
,
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 (
);
};OK，这次就分享到这里啦。如果小伙伴们有比较好的react pc端UI组件库，欢迎大家在下方进行留言讨论，很期待你的分享！
最后
如果觉得这篇文章对你有帮助，点个『赞/转发』，让更多的人也能看到你的贡献！
