asp.net 安装element ui_「干货」9个最热门React PC端组件库｜UI框架

最近一直在使用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 (      Hello Element  );

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 (    

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 (    Danger!  );};

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(  Hello Evergreen!,  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(  Hello Rsuite!,  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 (      );}

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(  Hello,  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 (    Success Button  );};

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

❤️ 最后

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