2019年，React开发人员应该掌握的22种神奇工具(3)

在使用诸如 material-ui 或 semantic-ui-react 之类的组件库时，Bit 是一个很好的替代方案。它可以让我们探索数千个开源组件，并使用它们来构建项目。

有很多不同的 React 组件，可供任何人使用，包括选项卡、按钮、图表、表格、导航条、下拉菜单、加载旋转器、日期选择器、面包屑导航（breadcrumbs）、图标、布局等等。

这些是由其他 React 开发人员上传的，这些开发人员就跟你我一样。

但是，也有一些可用的实用程序，如格式化日期之间的距离。

10. Storybook

如果大家还不了解 Storybook，并且希望能够轻松地构建 UI 组件，我强烈建议你立即使用它。该工具启动了支持热重载的实时开发服务器，让我们可以在其中独立地实时开发 React 组件。

另一个很棒的事情是，我们可以使用现有的开源插件，将我们的开发经验提升到一个全新的水平。例如，利用 Storybook README 包，我们可以在同一页面上创建 README 文档，同时开发供生产使用的 React 组件。这足以作为常规文档页面了：

11. React Sight

大家有没有想过自己的应用程序在流程图中看起来是什么样的？React -sight 可以让整个应用程序以树状图的形式展示层次结构，清楚查看我们的 React 应用程序。它还支持 React Router，Redux 和 React Fibre。

使用此工具，我们可以将鼠标悬停在节点上，这些节点是指向树中与它们直接相关的组件的链接。

如果大家在查看结果时遇到问题，可以在地址栏上输入 chrome:extensions，找到 React Sight

框并单击 Allow access to file URLs 开关，如下所示：

12. React-cosmos

React-cosmos 是用于创建可重复使用 React 组件的开发工具。

它会扫描项目中的组件，并且可以实现以下功能：

•  用属性、上下文和状态的任意组合下渲染组件
•  模拟每个外部依赖项（例如 API 响应、localStorage 等）
•  与正在运行的实例进行交互时，查看应用程序状态的实时变化

13. CodeSandbox

这是本次推荐中最好的可用工具之一，它可以让我们手动使用 React 的速度比眨眼还快（好吧，也许也没那么快）。

这个称为 CodeSandbox的工具是一个在线编辑器，我们从创建原型到 Web 应用程序部署 - 都可以在这个网站实现！

在早期，Codesandbox 仅支持 React，但现在已经扩展到 Vue 和 Angular 等库。他们还支持常见的静态站点生成器（如 gatsby 或 nextjs ）创建项目来启动下一个 React Web 项目。

关于 codesandbox，它不仅活跃，还有很多有意思的事情可以讨论。

如果大家需要探索一下人们为方便大家起见正在构建的一些项目，那么单击 explore 就可以轻松访问到大量代码示例，来帮助大家更新下一个项目：

大家一旦开始编辑项目，就会意识到，实际上要使用的是个功能强大的 VSCode 编辑器。

我很想写一篇完整的文章，介绍我们今天在 codeandbox 上可以使用的所有功能，不过，现在看起来工作已经完成了。

14. React bits

React bits 是 React 模式、技术、技巧和窍门的集合，所有这些都以类似在线文档的格式编写，大家可以在同一个选项卡上快速访问不同的设计模式和技术、反模式、样式、UX 变体以及其他有用的与 React 相关的材料。

他们有一个 GitHub 存储库，目前有 10437 星。

一些示例包括诸如道具代理，在不同场景下处理各种 UX 的组合之类的概念，甚至还提示了每个开发人员应该避免的一些陷阱。

（编辑：ASP站长网）