20+ React 开发工具助你提高编程效率

从本文标题可以看出，我们的目标是提高 React 应用程序的开发效率。因此，无需长篇大论。

在文章的开头我只想强调两点：

此列表仅代表个人观点。这意味着您可以自行添加。我相信它最终可以扩展到 30 个甚至 40 个 React 开发工具。因此，我们非常欢迎您在 Facebook 或 Twitter 上发表评论。
本文首先对初学者比较有用。因此，我在某些段落中提供了一些关于 React.js 的额外历史或背景信息。

反应肽

Github 星标： 9662
网址： http ://reactide.io/

学习 JavaScript — 图片来源：http://reactide.io/

Reactide 是一个面向使用 React.js 的 Web 开发者的集成开发环境 (IDE)。使用此工具，您无需配置服务器和构建工具。Reactide 只是一个桌面应用程序，它通过实时代码编辑提供了绝佳的可视化功能。

美女

Github 星标： 2406
网址： https://nikgraf.github.io/belle

这个开源库是由 React 社区成员创建的。Belle 是一个 UI 框架，它的诞生源于 React 在短时间内难以创建出令人满意的 UI。React 的过度自由会导致大量时间的浪费。而这正是 Belle 这个组件库的用武之地。您可以轻松自定义这些组件，只考虑您需要的功能。此外，Belle 还具备移动端支持和与 React 兼容的 API 一致性，这也是它的两大优势。

React Material 管理员

Github 星标： 338
网站： https://flatlogic.com/templates/react-material-admin

使用管理模板的好处众所周知。这款特殊的管理面板遵循 Google Material Design 指南。它完全免费使用 jQuery 和 Bootstrap，可用于快速开发几乎任何类型的 Web 应用程序。

基本表；
反应路由器；
图表；
验证;
基本仪表板；
通知栏。

React 语义 UI

Github 星标： 10228
网址： https://react.semantic-ui.com/

有一个原生的 Semantic UI 库。要在 React 中使用它，你需要使用这个库和 Semantic UI CSS 包的 React 集成。由于预置的 UI 组件，它将有助于加快开发过程。React Semantic UI 无需 jQuery。你可能知道，jQuery 是一个用于 DOM 操作的库。因此，无需将真实 DOM 与虚拟 DOM 保持同步（React 使用真实 DOM 的 JS 表示）。

React 的语义 UI 的其他功能包括：

声明式 API
速记道具
子组件
增强
自动控制状态

分析器

Github 星标： 2482
网址： https://github.com/reactjs/rfcs/pull/51

两年前，React 团队推出了 Profiler。它可以提供应用程序重新渲染的概要信息。借助此分析功能，“记录”你的一系列交互，可以提高调试性能。你将能够看到重新渲染的可视化效果以及 DOM 更新的屏幕截图。

React 组件基准测试

Github 星标： 276
网址： https://github.com/paularmstrong/react-component-benchmark

你还记得 react-addons-perf 吗？这个工具曾为开发者提供应用性能洞察。React 16 发布后，你将无法再使用 react-addons-perf。React Component Benchmark 是一个开源项目，旨在解决获取精准基准指标的问题。但重要的是要明白，只有足够大的样本才能提供可靠的指标。之所以出现这种情况，是因为这个项目没有直接与 React 挂钩。因此，其值不够准确。因此，运行大样本是合理的。

React 工具箱

Github 星标： 8486
网址： http ://react-toolbox.io/#/

这是开发 Material Design UI 的最佳工具。它拥有大量符合 Google Material Design 指南的响应式组件。您可以在这里找到详尽的组件列表。React Toolbox 基于 CSS Modules、ES6 和 Webpack 构建。文档页面包含每个组件的所有实例，非常直观易懂。

反应引导

Github 星标： 16243
网址： https://react-bootstrap.github.io

你可以说 Bootstrap 是世界上最大的 UI 生态系统。因此，React-Bootstrap 就是为了兼容 Bootstrap 而构建的。它是 React 最古老的库之一。它拥有 Bootstrap 核心，依赖于 Bootstrap 样式表，并与 React.js 本身同步全面发展。如果你想要一组默认可访问的组件，React-Bootstrap 比普通的 Bootstrap 能提供更多的可能性。

唱歌应用 React

网址： https://flatlogic.com/templates/sing-app-react

这款完全响应式管理模板下载量超过 1000 次。该模板功能多样，由专业的 UI/UX 专家打造。它包含 60 多个可立即使用的组件，并提供直观的框架。它可用于构建 CRM、CMS、SAAS 等应用。

数十页
完全响应
8个图表库
2 个仪表板
主题支持
电子商务版块
静态和悬停侧边栏
完整记录的代码库

潜望镜

Github 星标： 22
网址： https://github.com/shea-hawkins/periscope

关于这个开源项目，没什么好说的。这是针对 Redux 应用的监控。你可以随时查看你的应用，并调整时间线范围。

反应浪费监测器

Github 星标： 93
网站： https://github.com/MalucoMarinero/react-wastage-monitor

该项目通过检测浪费的渲染时间帮助您管理性能问题。要理解此工具的重要性，您需要深入了解的概念。实现 PureComponent 会停止称为 React 协调的过程（您可以在此处阅读更多信息）。并且 PureComponent 仅在必要时重新渲染。如果您依赖 Redux 管理来发现潜在的性能错误，则可能会犯下严重错误。React Wastag Monitor 可确保您不会在不必要的渲染上浪费计算资源。

React Studio

网址： https://reactstudio.com/

React Studio 是 Web 开发者和 Web 设计人员的得力工具。Web 开发者可以享受简洁的 JS 代码、符合 React.js 理念的出色视觉设计表达。您可以使用代码生成器设计单独的 UI 组件。设计人员可以享受响应式布局，轻松将其转换为 React 代码，并进行移动预览，并将其用作原型设计工具。您可以快速获得简洁的代码，无需任何额外操作。