16个面向界面开发人员的React工具



要创建用户界面,有大量的工具(您的K.O.,不用了,谢谢)。 最有效的方法之一是React。 在哈勃(Habr)上,可能无需谈论它是什么以及为什么。

今天,我们决定为使用React的开发人员发布精选的好帮手元素。 可能的选择并不详尽,但是可以让您补充工具。 如果您使用集合中未包含的其他内容,请分享评论,我们将一起感谢您,并向集合中添加有趣的建议。 警告-削减后有很多GIF支付了流量-小心一点。

因此,我们昂首阔步冲入游泳池,以后不再推迟:

反应数据表


您可以在React应用程序中嵌入类似于Excel的工具。 允许使用数学公式(基础是math.js)。 下拉菜单和按钮可以添加到表格单元格中。

React Native for Web


好的,此组件使您可以添加活动指示器,按钮,进度条(进度指示器),开关等。

反应物


Reactide被描述为第一个使用React开发应用程序的专用IDE工具。 实际上,它是一个跨平台的桌面应用程序,可让您无需服务器配置即可快速呈现项目,从而降低了开发复杂性并节省了时间。

故事书




该工具是功能最强大和最著名的工具之一。 在它的帮助下,组件得以组装。 开发人员将其视为用户界面开发的交互式组件。 它支持React,React-native,Vue和Angular。 该工具使您可以查看项目的所有组件。 在工具包中-大量用于文档,组件,测试开发的补充。

React styleguidist




Styleguidist是具有开发服务器(可以热重启)和出色文档的组件的开发环境。 该工具提供了查看各种组件使用示例的机会。

产品目录




好吧,我们这里有一个工具,可让您创建数字产品的实时样式指南。 它提供了将文档和资产与相关组件结合在一起的机会。 当需要显示系统的视觉元素时,应使用它。

React Studio


这是一个设计工具,可让您无需编码即可获得高质量的反应项目。 该应用程序与Sketch兼容,这将为开发人员带来更多的乐趣。 如果您不是编码器-绝对值得一看。

反应宇宙




Cosmos会扫描整个项目并将其拆分为多个组件,从而使您可以以道具,环境,状态的任意组合来渲染它们。 如果项目已经在运行,这是必需的,但是您需要向组件中添加新功能。 在这种情况下,开发人员有机会实时跟踪更改。

ORY编辑器


基于React和Redux的移动内容编辑器。 可以随时将其添加到正在开发的网站的功能中。 最初,该工具是为来自德国的大型开放式教育平台而创建的。 好吧,德国人以其准确性着称,该工具真是太好了。

反应视线



出色的可视化工具,可让您快速配置开发人员所需的一切。

重新选择Devtools




还有另一个可视化工具,用于跟踪缓存层。 没有问题和担心-一切都以非常直观的方式显示。

Redux DevTools Profiler监视器




启动和停止Javascript配置文件的好工具。 创建了一个基于Redux的工具。

潜望镜




基于时间轴的Redux事件监视。

Redux-Promise-Middleware-Times


import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import logTimes from 'redux-promise-middleware-times';
const store = createStore(thunk, promiseMiddleware(), logTimes());


Redux-Promise-Middleware的小插件。 它记录执行特定事件的时间。

反应单片眼镜




一个强大的可视化工具,可以显示各个组件,它们的状态,Redux状态,并将其组合成一个易于理解的方案。




一个代码生成器框架,几乎可以在任何项目中使用以减少模板的大小。 对于使用React和Redux的人来说,这样的框架非常受欢迎。 模板的数量可能非常大,因为它们几乎是在工作的每个阶段创建的。

总的来说,我们认为远离完整的选择可以为界面开发人员的辛勤工作提供良好的帮助。 好吧,为了使工作更加有效,您可以参加一些Skillbox课程。

Source: https://habr.com/ru/post/zh-CN416005/


All Articles