【react】ReactJS中几个比较最优秀的UI框架

一.Material-UI

Material-UI是一款React组件库来实现Google的Material Design风格UI界面框架。也是首个React的UI工具集之一。使用它可以快速搭建出赏心悦目的应用界面。

英文文档:https://material-ui.com
中文文档:http://design.1sters.com
Github: https://github.com/mui-org/material-ui

二.React-Bootstrap

React-Bootstrap是可重用的前端组件库。React-Bootstrap是一款基于ReactJS对Bootstrap进行封装的库。

官网:https://react-bootstrap.github.io
中文文档: http://react.tgwoo.com
Github: https://github.com/react-bootstrap/react-bootstrap/

三.Ant-design

提到Ant-design,大家可能会想前段时间的出现的‘圣诞彩蛋’事故。Ant-design是阿里巴巴团队出品的ReactUI组件库。有自己独特的设计风格和理念。在支付宝、蚂蚁金服等多个阿里项目中投入使用。组件化质量非常高,开箱即用。

官网:https://ant.design/docs/react/introduce-cn
Github: https://github.com/ant-design/ant-design/

四.SemanticUI

Semantic UI 是一款非常优秀的前端开发框架。它在用户体验的设计上与Bootstrap和Foundation相比,更胜一筹。集成了很多很漂亮的UI模块,能够使网页制作更加高效和美观。

官网:https://semantic-ui.com
Github: https://github.com/semantic-org/semantic-ui/

五.React Desktop

一款面向MacOS Sierra和Windows10桌面风格的ReactUI组件库。React-Desktop是跨平台桌面应用程序的 UI 组件,可以在上面找到 Mac OS 和 Windows 10 的均可用 UI 组件。

官网:http://reactdesktop.js.org/docs/
Github: https://github.com/gabrielbull/react-desktop

六.Blueprint

Blueprint提供了一系列ReactUI组件,这些组件包含常用的元素、模式和Web交互。它适用于为桌面应用构建复杂且数据密集型的Web界面。它的组件使用TypeScript编写,并以Sass编写样式风格,以实现快速且灵活的开发流程。

官网:https://apiblueprint.org
Github: https://github.com/gabrielbull/react-desktop

七.Fabric

Fabric是一款用于构建类似Office和Office 365风格的React组件库。是官方用TypeScript编写的Office库之一。有所有你能见到的Office组件,包括开发入门指南、博客、官方色调以及字体等。

官网:https://fabric-chs.readthedocs.io/zh_CN/chs/
Github: https://github.com/fabric/fabric/

八.Rebass

Rebass 它包含60个组件,是一个UI库及UI设计系统。

官网:https://rebassjs.org
Github: https://github.com/rebassjs/rebass

九.amaze UI (不维护了)

image

Amaze UI 是一个移动优先的跨屏前端框架。提供基础样式,网格,表格、表单、按钮及常用组件样式。是一个轻量级(所有 CSS 和 JS gzip 后 100 kB 左右)、 Mobile first 的前端框架

官网地址:http://amazeui.org/
Github: https://github.com/zordius/lightncandy

十.ReactGrommet

屏幕快照 2019-01-21 下午2.46.32.png

Grommet是一个非常强调体验的的React组件库,所有组件都可访问,具备跨浏览器兼容性且支持主题定制。通过对属性的配置,组件的灵活性也可以进一步提高

官网地址:https://v2.grommet.io
Github: https://github.com/grommet/grommet

目前React是如今流行的前端技术,而React最棒的一个特点就是有大量功能丰富的组件库和开发框架可用。以上是适合React的UI组件库,如有遗漏,请评论告知!谢谢!

作者:honey缘木鱼
链接:https://www.jianshu.com/p/87ec34e59891
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文地址:https://www.cnblogs.com/yuanjili666/p/11762104.html

时间: 2024-10-09 08:30:26

【react】ReactJS中几个比较最优秀的UI框架的相关文章

构建 React.js 应用的十佳 UI 框架,都在这了!

构建你的下一个 React.js APP,有这些优秀的 UI 框架就够了. 1.Material-UI 一套实现 Google Material Design 的 React 组件 同时,它也是 React 的第一批 UI 工具套件之一.Material-UI 包含你需要的所有组件(甚至更多). Material-UI 预定义的调色板和 <MuiThemeProvider>  可配置性极高,允许为 APP 自定义颜色主题. Material-UI 之前的版本个人认为有一些性能问题,但从 3.0

Facebook React Native 中文教程一:介绍

React Native 中文版 Facebook 在 [React.js Conf 2015](http://conf.reactjs.com/) 大会上推出了基于 JavaScript 的开源框架 [React Native](http://facebook.github.io/react-native/),本中文教程翻译自 [React Native 官方文档](http://facebook.github.io/react-native/docs/getting-started.html

React开发中使用fetch进行异步请求

React开发中使用fetch进行异步请求 最新的Web API接口中提供了一个全局fetch方法,从而以一种更为简单.合理的方式来支持跨网络异步获取资源. 这种功能以前是使用 XMLHttpRequest实现的.Fetch提供了一个更好的替代方法,可以很容易地被其他技术使用,例如 Service Workers.Fetch还提供了单个逻辑位置来定义其他HTTP相关概念,例如CORS和HTTP的扩展. 请注意,fetch规范与jQuery.ajax()主要有两种方式的不同: 当接收到一个代表错误

React脚手架中使用less

最近在用react.js 结合蚂蚁金服的 Ant Design Mobile 做一个单页面的应用程序,遇到了一个很棘手的问题——那就是 react脚手架不支持less,看了不少优秀博主如何在react脚手架中使用less,,觉得繁琐且又不能解决实际问题,于是自己弄明白后感觉如此简单,做了这么个教程,避免新手走弯路. 首先声明一下我用的是微软的代码编辑软件VS code,下面的是详细的图文教程. 前期准备: 通过命令 create-react-app react-demo 创建了自己的React应

巧用React Fiber中的渲染字符串新功能

虽然React Fiber还没有正式发布,但是我们已经可以预先领教其带来的新的编程模式了. 在React Fiber中,render函数可以直接返回一个字符串了,换言之,一个组件可以直接渲染为一个字符串,而不是必须渲染为一个HTML模样的物体. 举个例子,下面这个控件LongString,显示一个input和一个p,p中文字可以是很长的字符串,相当于一个模板,在input中输入的字符串会用来填补p中的模板面. 代码如下. import React from 'react'; class Long

React Native中的网络请求

React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810652 /** * Sample React Native App * https://github.com/facebook/react-native * 周少停 2016-09-28 * fetch请求数据 header 参数 response转json 请求方式 */ import React

react native中如何往服务器上传网络图片

1 let common_url = 'http://192.168.1.1:8080/'; //服务器地址 2 let token = ''; //用户登陆后返回的token 3 /** 4 * 使用fetch实现图片上传 5 * @param {string} url 接口地址 6 * @param {JSON} params body的请求参数 7 * @return 返回Promise 8 */ 9 function uploadImage(url,params){ 10 return

react native中Unable to load script from assets &#39;index.android.bundle&#39;解决方案

刚刚朋友问我,说是创建好一个项目,运行后报错:Unable to load script from assets 'index.android.bundle',以前好好的没出现这种现象,于是我找到一个解决方案,分享一下. 解决这个问题的方案是: 进入你该项目的根目录下的 android目录下的app目录下的src文件下的mian文件,(可能说的有点绕),在main件夹下,创建一个assets文件,这个文件是rn的资源文件夹! 之后用dos进入你的项目根目录,执行一下命令: react-nativ

React Native 中 component 生命周期

React Native 中 component 生命周期 转自 csdn 子墨博客  http://blog.csdn.net/ElinaVampire/article/details/51813677 (非原创) React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps object getDefaultProps() 执行过一次后,被创建的类会有缓存,映