React是如今最火爆的前端技术,而React最棒的一个特点就是有大量功能丰富的组件库和开发框架可用。从按钮到卷轴到工具条,应有尽有,而且这些组件可以各行其是,也可以组装成复杂的UI,你也可以把UI分解成独立的可服用的模块。

以下IT经理网介绍几个非常重要而有用的React组件库和开发框架,方便你在现有React组件基础上快速拼装UI:

1.React Material UI

Material UI是实现谷歌拟物设计原则最流行的框架,包含大量组件,如工具条、表格、按钮、导航等等。甚至还为UI设计提供了超过900个不同的SVG图标。

2.React Bootstrap

React Bootstrap提供面向React组件的Bootstrap重构框架,Bootstrap是目前最流行的UI框架,将它与React组件合体,夫复何求?

3.React Belle

React Belle提供哦你一系列漂亮的,可配置的组件,包括开关、下拉列表框、评分、文本输入、卡片等等。这个框架引以为傲的是为桌面和移动端都做了优化的同时,也支持进行样式上的高级自定义配置。

4.React ToolBox

React Toolbox是非常流行的React组件库,包含大量拟物设计组件。React Toolbox基于最流行的方案例如CSS Modules(由SASS编写),Webpack和ES6,能够与Webpack工作流无缝集成,并且非常容易定制,也非常灵活。虽然包含多大十种组件,React Toolbox的可配置性非常高,提供绝佳的UI开发体验。

5.React Grommet

Grommet是一个非常强调体验的的React组件库,所有组件都可访问,具备跨浏览器兼容性且支持主题定制。通过对属性的配置,组件的灵活性也可以进一步提高。Grommet颜值很高,非常适合用来快速开发干净简洁,具备关键基本功能的UI。

6.Semantic UI

React Semantic UI是React官方集成的Semantic UI组件库。作为一个开发框架,Semantic可用来创建界面美观的响应式布局,支持对HTML标签或组件渲染的控制。你也无需增加额外的嵌套组件来编辑组件功能和属性。这对于同时使用MenuLinks和React-router来说非常重要。

7.React With Bit

Bit是一个非常强大的工具,可以调用任何其他应用或者代码库中找到的任何组件。Bit在你的源代码文件之上增加了一个虚拟层,帮助创建、管理和复用组件,而无需导入整个代码库。Bit会自动解析文档并在任意地点和框架中运行组件测试,这使Bit成为一个极为有用的React组件工具。在Bit community hub社区,你还能找到所需的几乎任何React UI功能

七个不可错过的React组件库与开发框架的更多相关文章

  1. 如何快速构建React组件库

    前言 俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...

  2. React组件库

    图表组件库:Recharts(React和D3构建的图表库) UI组件库:react-bootstrap

  3. React 组件库框架搭建

    前言 公司业务积累了一定程度,需要搭建自己的组件库,有了组件库,整个团队开发效率会提高恨多. 做组件库需要提供开发调试环境,和组件文档的展示,调研了几个比较主流的方案,如下: docz 配置简单,功能 ...

  4. React组件库集锦及学习视频

    [转载]https://www.rails365.net/articles/react-zui-hao-de-ui-zu-jian-ku-ji-jin 这里有一篇讨论,说了哪个才是 React 最好的 ...

  5. [翻译]怎么写一个React组件库(二)

    本文同步发布于知乎专栏 https://zhuanlan.zhihu.com/p/27434018,喜欢本文的就去知乎点个赞支持下吧- 引言 该系列文章将通过创建一个组件库来引导你学习如何构建自己的组 ...

  6. [翻译]怎么写一个React组件库(一)

    本文同步发布于知乎专栏 https://zhuanlan.zhihu.com/p/27401329,喜欢本文的就去知乎点个赞支持下吧- 引言 该系列文章将通过创建一个组件库来引导你学习如何构建自己的组 ...

  7. React组件库Ant Design的安装与使用

    一.什么是 Ant Design 1.Ant Design 提炼自企业级中后台产品的交互语言和视觉风格 2.Ant Design 使用 TypeScript 构建,提供完整的类型定义文件 二.Ant ...

  8. 使用dumi生成react组件库文档并发布到github pages

    周末两天玩了下号称西湖区东半球最牛逼的react文档站点生成工具dumi,顺带结合github pages生成了react-uni-comps文档站, 一套弄下来,感觉真香,现在还只是浅尝,高级的特性 ...

  9. 从0开始用webpack开发antd,react组件库npm包并发布

    一.初始化一个npm包 1.新建一个文件夹(名称随意,建议和报名一致),输入命令 :npm init -y 会自动生成一个包的说明文件 package.json如下(本文以scroll-antd-ta ...

随机推荐

  1. [Unity动画]03.动画事件

    1.找到动画,添加动画事件 2.在脚本中添加回调方法 TestAnimator.cs using UnityEngine; public class TestAnimator : MonoBehavi ...

  2. python学习笔记_week11

    一.RabbitMQ python的queue(生产者消费者模型)分为线程queue(不能跨进程)和进程queue(父进程与子进程进行交互或者同属于同一父进程下多个子进程进行交互),那两个独立的进程间 ...

  3. [多线程]wait和notify

    线程之间的通信   使用wait/notify方法实现线程间的通信.这两个方法都是Object类的方法,也就是说Java所有的对象都提供这两个方法.1.wait和notify必须配合synchroni ...

  4. $(document).ready和window.onload 简单分析区别

    <锋利的JQuery>翻开没看几页,就遇到了这个神奇的问题,之前在橙旭园学习的时候,JQuery只教了一些基础的,像链式操作等,那时以为这个和window.onload()差不多一模一样, ...

  5. 10. js时间格式转换

    {   field : 'CREATE_TIME',   width : fixWidth(0.10),   title : '创建时间',   align : 'center',   hidden: ...

  6. 32. 安装oracle11g时,先决条件一直失败的解决方法

    解决方法:1. 在命令提示符下 net share c$=c: 补充: 如果这个命令提示错误:“发生系统错误 5,拒绝访问的时候”,那我们可以修改注册表,检查AutoShareServer和AutoS ...

  7. 通过指定的 url 去网络或者文件服务器下载文件到本地某个文件夹

    /** * 从网络Url中下载文件 * @param urlStr 指定的url * @param fileName 下载文件到本地的名字 * @param savePath 本地保存下载文件的路径 ...

  8. easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

    <!-- 父页面 --> <!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "ht ...

  9. js中实现cookie的增删改查(document.cookie的使用详情)

    一.设置cookie的值 1.每个cookie都是一个名称/值对,名称/值对用等号连接,并将该名称/值对赋值给document.cookie即可.如:document.cookie="id= ...

  10. Unable to locate Spring NamespaceHandler for XML schema namespace

    1. 问题 本文将讨论Spring中最常见的配置问题 —— Spring的一个命名空间的名称空间处理程序没有找到. 大多数情况下,是由于一个特定的Spring的jar没有配置在classpath下,让 ...