「干货」9个最热门React PC端组件库|UI框架

2023-06-01 0 707

前段时间始终在采用React.js合作开发工程项目,在合作开发操作过程中也加进了许多开放源码UI模块库。那次有给我们撷取React终端端模块库,那时,就给我们所推荐9个常见React PC端模块库。

2020年7个高质量React终端端UI模块库

「干货」9个最热门React PC端组件库|UI框架
「干货」9个最热门React PC端组件库|UI框架

1、Element-React

element-react | 饿了么工程项目组公司出品的两套为合作开发人员、雕塑家等预备的如前所述 React 的 PC端模块库,是 ElementUI 的 React 版。

「干货」9个最热门React PC端组件库|UI框架
「干货」9个最热门React PC端组件库|UI框架
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> );
「干货」9个最热门React PC端组件库|UI框架

2、Ant Design

antd | 阿里巴巴工程项目组公司出品的如前所述 Ant Design 设计体系的 React UI 模块库。

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

「干货」9个最热门React PC端组件库|UI框架
「干货」9个最热门React PC端组件库|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));
「干货」9个最热门React PC端组件库|UI框架

3、Zan UI

Zent | Zent ( \ˈzent\ ) 是 有赞 PC 端 WebUI 规范的 React 实现,提供了一整套基础的 UI 模块以及许多常见的业务模块。

目前我们有 50+ 模块,这些模块都已经在有赞的各类 PC 业务中采用,并会在此基础上,持续合作开发许多新模块。

「干货」9个最热门React PC端组件库|UI框架
「干货」9个最热门React PC端组件库|UI框架
「干货」9个最热门React PC端组件库|UI框架
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));
「干货」9个最热门React PC端组件库|UI框架

4、React Bootstrap

react-bootstrap | 一款如前所述 ReactJS 对 Bootstrap 进行封装前端模块库。

模块依赖于bootstrap。与 Twitter Bootstrap 一致外观与感受,通过 Facebook 的 React.js 架构获得更清爽代码。

「干货」9个最热门React PC端组件库|UI框架
「干货」9个最热门React PC端组件库|UI框架
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> ); };
「干货」9个最热门React PC端组件库|UI框架

5、Evergreen

evergreen | Segment推出的 React 模块库,风格简单好看。

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

「干货」9个最热门React PC端组件库|UI框架
「干货」9个最热门React PC端组件库|UI框架
「干货」9个最热门React PC端组件库|UI框架
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) )
「干货」9个最热门React PC端组件库|UI框架

6、React Suite

rsuite | 两套如前所述 React 的 UI 模块库,贴心的 UI 设计,友好的合作开发体验,为中后台产品而生。

「干货」9个最热门React PC端组件库|UI框架
「干货」9个最热门React PC端组件库|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) )
「干货」9个最热门React PC端组件库|UI框架

7、Base Web

baseweb | Uber 公司出品的 React web模块库,黑色主色风格,网站体验不错。

「干货」9个最热门React PC端组件库|UI框架
「干货」9个最热门React PC端组件库|UI框架
「干货」9个最热门React PC端组件库|UI框架
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> ); }
「干货」9个最热门React PC端组件库|UI框架

8、React Belle

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

「干货」9个最热门React PC端组件库|UI框架
「干货」9个最热门React PC端组件库|UI框架
「干货」9个最热门React PC端组件库|UI框架
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个最热门React PC端组件库|UI框架

9、SHINEOUT

shineout | 一个更加轻量、快速、高性能的如前所述React的pc端模块库。

「干货」9个最热门React PC端组件库|UI框架
「干货」9个最热门React PC端组件库|UI框架
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> ); };
「干货」9个最热门React PC端组件库|UI框架

OK,这次就撷取到这里啦。如果小伙伴们有比较好的react pc端UI模块库,欢迎我们在下方进行留言讨论,很期待你的撷取!

❤️ 最后

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

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务