2019 年，React 开发人员应该使用的 22 个神奇工具
|
Bit 让我们探索数以千计的开源组件，并允许我们使用它们来构建项目。
有很多不同的 React 组件，可供任何人使用，包括选项卡、按钮、图表、表格、导航条、下拉菜单、加载旋转器、日期选择器、面包屑导航(breadcrumbs)、图标、布局等等。 这些是由其他 React 开发人员上传的，这些开发人员就跟你我一样。 但是，也有一些可用的实用程序，如格式化日期之间的距离。 10. Storybook 如果你还不知道 Storybook ，并希望能够更容易地构建 UI 组件，那么，我强烈建议你开始使用它。 该工具启动一个实时开发服务器，支持开箱即用的热重载，我们可以在其中独立地实时开发 React 组件。 关于这个还有一件很棒的事情是，我们可以使用现有的开源插件，把我们的开发体验提升到一个全新的水平。 比如，借助 Storybook README 包，我们可以创建 README 文档，同时，在同一页面上开发用于生产的 React 组件。 这足以作为普通的文档页面了：  11. React Sight 大家有没有想过，自己的应用程序在流程图中看起来是什么样子? React Sight 可以让大家可视化自己的 React 应用程序，借助整个应用程序的实时组件层次结构树呈现。 它还支持 反应路由器(react-router) 、 Redux ，以及 React Fiber 。 借助该工具，大家可以将鼠标悬停于节点上，它们是指向那些跟树中直接跟它们有关的组件的链接。 如果大家在查看结果时遇到困难，那么，可以在地址栏中键入 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 等库的附加启动模板。 它们还通过使用 Gateby 或 Next.js 等常用静态站点生成器创建项目，支持启动下一个 React web 项目。 谈到 CodeSandbox，有很多好东西可以讲。首先，它非常活跃。 如果大家需要探索一下人们为方便大家起见正在构建的一些项目，那么简单地点击一下 explore 就可以访问一大堆代码示例，来帮助大家更新下一个项目：  一旦大家开始编辑一个项目，就会意识到，将要使用的实际上是个强大的 VS Code编辑器。 我很想写一篇文章全面介绍一下如今我们可以在 CodeSandbox 使用的功能，但是，看起来，这项工作 已经完成了 。 14. React Bits React Bits 是 React 模式、技术、技巧和窍门的集合，都是用类似于在线类文档的格式编写的，大家可以快速地访问不同的设计模式和技术、反模式、样式、UX 变体和其他有帮助的与 React 相关的材料，所有这一切都在同一个选项卡上。 他们有个 GitHub 存储库 ，目前有 9923 个星标。 一些示例包括一些概念，如属性代理、用于在不同场景中处理不同 UX 的组合，甚至公开了一些每个 React 开发人员都应该知道的一些陷阱。 这就是在他们页面上的感觉。正如大家可以在左侧菜单上看到的，上面有很多信息：  15. folderize folderize 是一个 VS Code 扩展，发布的时间还不到 7 天。它使我们能够把一个组件文件转换为组件文件夹结构。我们的 React 组件仍将是个组件，只是现在它转换成一个目录而已。 比如，假设我们在创建一个 React 组件，它把文件作为属性以显示有用的信息，比如它们的元数据。 用于元数据组件的逻辑占用了很多行，因此，我们决定把这个拆分成一个单独的文件。但是，当我们决定这么做的时候，我们就有了两个相互关联的文件。 因此，如果我们有个像这样的目录：  我们可能想把 FileView.js 和 FileMetadata.js 抽象到一个目录结构中，就像 Apples 那样——尤其是，如果我们正在考虑添加更多与 FileScanner.js 等文件相关的组件。 （编辑：辽源站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
