vlambda博客
学习文章列表

如有翻译不准，请多指正。

正如我们所知，React是一个JavaScript库，用于构建各种酷炫的用界面。但并非每个人都使用相同的插件，或者知道所有出色的插件，这些工具能让React开发体验更有趣。

如果你还没有使用过React，或者有朋友问你为什么应该使用这个库时，你会说什么？除了告诉他们库有多棒之外，我认为你还应该提一下，开源社区创建的工具能够将开发体验提升到一个全新的令人兴奋的高度。

以下是22个工具，可用于构建React应用程序（排名不分先后）

1. webpack-bundle-analyze

有没有想过你应用的那些包或部分占用了多少空间？好吧，您可以使用webpack-bundle-analyzer。它将帮助您识别占用最多空间的输出文件。

它将创建一个实时服务器，并向您显示捆绑包内容的交互式可视化树状图。在您的工具包中使用此文件，您可以看到显示的文件所在的位置，它们的gzip大小，解析的大小以及它们所属的父母/子项。

这样，您就可以根据所看到的内容优化您的React应用程序！

下面是一个运行截图：

您可以清楚地看到pdf包占用了应用程序中的最大空间，而且它也占用了屏幕上最多的空间。这非常实用。

但是，屏幕截图非常小。您还可以传入有用的选项来查看更多详细信息，例如，还可以选择生成一个静态HTML文件，该文件可以保存在开发环境之外的某个位置以供以后使用。

2. React-proto

React-proto是面向开发人员和设计人员的原型设计工具。它是一个桌面软件。

以下是正在使用的此软件的示例：

该应用程序允许您声明props及其类型、在树中查看组件、导入背景图像、将它们定义为有状态或无状态、其父组件是谁、放大/缩小以及将原型导出到新的或现有的项目中。

然而，该应用程序似乎更适合Mac用户，但Windows用户也可正常使用。

绘制完用户界面后，您可以选择导出到现有项目或新项目。如果选择导出到现有项目并选择根目录，则会将它们导出到./src/components，如下所示：

下面是我们在示例中使用的组件之一的示例：

react原型在GitHub上获得了2000多颗星。

就个人而言，我认为这个应用程序需要更新更多的功能，特别是随着Reacthooks的发布。它不会缩小，除非您有可见的背景图像。换句话说，如果您导入背景图像，缩小，然后继续删除背景图像，您将无法放大，因为按钮会显示为灰色。放大回原样的唯一方法是将背景图像导入回去，然后在放大后将其删除。这个缺陷改变了我对这个应用程序的看法，但依然将它列入了这个列表，因为我们在其他任何地方都看不到这个开源的。开源是这个应用程序的好处，它让开源存储库列表成为可能。

3.为什么更新（why-did-you-update）

why-did-you-update补丁可以通知你可以避免重新渲染。这不仅在指导您为项目进行性能修复方面非常有用，而且可以帮助您了解React的工作方式。当你对React的工作原理有了更多的了解时，这会让你成为一个更好的React开发人员。

您可以通过声明一个额外的静态属性及其值来将侦听器附加到任何自定义组件：

在这样做之后，您的控制台会被警告爆掉：

但，别急，重新渲染下就好。

4.create-React-app

每个人都知道，create-React-app是开发React项目的最快方法，我所有的教程都在使用 create-react-app构建React 界面，因为它又快又简单。

如果你还不知道如何使用CRA创建TS项目，看这里吧，您只需要在最后添加：

这将为您省去手动将TS添加到CRA项目的麻烦。

5.React-lifecycle-visualizer

React-lifecycle-visualizer是一个npm包，用于跟踪和可视化任意React组件的生命周期方法。

与"为什么要渲染"类似，您可以启用您选择的任何组件来显示生命周期可视化工具：

这将呈现可视化工具，如下所示：

但是，这样做的一个缺点是它目前仅适用于类组件，因此尚不支持hooks。

6.Guppy

Guppy 是一个友好、免费的、能在桌面上运行的React应用程序管理器和任务运行器。他们似乎会优先考虑那些新来开发者。但是，它对高级开发人员也很有用。

它为开发人员经常面临的许多典型任务提供了友好的图形用户界面，例如创建新项目，执行任务和管理依赖项。

Guppy长这样：

7.React-testing-library

我一直很喜欢React-testing-library，因为在编写单元测试时感觉很合适。此软件包提供了ReactDOM 测试实用程序，鼓励测试实践。

此解决方案旨在解决测试实现详细信息的问题，像用户看到的那样测试React组件的输入/输出。

测试实现详细信息不是确保应用按预期工作的有效方法。当然，您将能够对如何获取组件所需的数据，使用哪种排序方法等更有信心，但是如果您必须更改实现方式以指向不同的数据库，那么您的单元测试将失败，因为这些是耦合逻辑的实现细节。

这是一个可以用react测试库解决的问题，因为理想情况下，你只是希望你的用户界面能够正常工作，并最终正确呈现。如何将数据获取到这些组件并不重要，只要它们仍然提供预期的输出。

下面是有关如何使用此库放置测试的示例代码：

8.React Developer Tools

Reactdeveloper tools 是一个扩展，允许在Chrome和FirefoxDeveloper Tools 中检查React组件层次结构。

这是此列表中最广为人知的，并且也是React开发人员可用于调试其应用的最有用的工具之一。

9. Bit3

使用material-ui或semantic-ui-react等组件库的一个很好的替代方案是 Bit。这使您可以探索数千个开源组件，并使用它们来构建项目。

有这么多不同的可用的React组件可供任何人使用，包括选项卡、按钮、图表、表格、导航栏、下拉列表、加载微调器、日期选取器、痕迹导航、图标、布局等。这些是由其他React开发人员上传的，就像你和我一样。

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

10.storybook

如果您还不了解storybook，如果您想要更轻松地构建UI组件，我强烈建议您开始使用它。它可启动一个实时开发服务器，开箱即用地支持热重载，您可以在其中单独实时开发React组件。

关于这一点的另一个好处是，您可以使用当前开源的现有插件将您的开发体验提升到一个全新的水平。例如，使用storybook-readme，您可以创建自述文档，同时在同一页面上开发供生产使用的react组件。这足以像普通文档页面那样：

11.React-sight

你有没有想过你的应用在流程图中可能是什么样子的？React-sight允许您通过向您显示整个应用程序的实时组件hiearachy树来可视化您的React应用程序。它还支持react路由器，redux以及react fiber。

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

12.React-cosmos

React-cosmos是一种用于创建可重用react组件的开发工具。

它会扫描项目中的组件，并使您能够：

在属性、上下文和状态的任意组合下渲染组件

模拟每个外部依赖关系（例如。API响应、本地存储等）

在与正在运行的实例交互时实时查看应用程序状态的变化

13.CodeSandbox

这是最好的工具之一，react速度非常快。

这个名为CodeSandbox的工具是一个在线编辑器，可让您从原型到部署创建Web应用程序-所有这些都来自网站！

Codesandbox最初只在早期阶段支持React，但现在他们已经扩展到Vue和Angular等库的其他入门模板。它们还支持通过使用常见的静态站点生成器（如gatsby或nextjs）创建项目来启动您的下一个reactWeb项目。

当涉及到代码和盒子时，会有很多很棒的事情。首先，它非常活跃。

如果您需要浏览在方便时其他人正在构建的一些项目，可以轻松单击"浏览"并访问一堆代码示例，以帮助翻新您的下一个项目：

一旦你开始在一个项目中进行编辑，你就会开始意识到你将要使用的实际上是强大的VSCode编辑器。

我很想写一篇关于你今天可以在codesandbox上做的所有功能的整篇文章，但似乎这项工作已经完成了。

14.Reactbits

Reactbits是react模式，技术，提示和技巧的集合，所有这些都以在线文档般的格式编写，您可以在其中快速访问不同的设计模式和技术，反模式，样式，UX变体和其他有用的react相关材料，所有这些都在同一选项卡上。

他们有一个GitHub存储库，目前为9，923星。

一些例子包括诸如道具代理，在不同场景中处理各种UX的合成等概念，甚至还公开了每个React开发人员都应该注意的一些陷阱。

这是他们页面上的样子，正如您在左侧的侧面菜单中看到的那样，有很多信息:)

15.Folderize

Folderize是VSCode扩展程序。它允许您将组件文件转换为组件文件夹结构。你的react组件仍然是一个组件，它现在只是被转换成一个目录。

例如，假设您正在创建一个react组件，该组件将一些组件作为属性来显示一些有用的信息，例如它们的元数据。元数据组件的逻辑占用大量行，因此您决定将其拆分为一个单独的文件。但是，当您决定这样做时，现在您有两个相互关联的文件。

因此，如果您有一个如下所示的目录：

您可能希望将一切抽象到目录结构中，就像howis一样——特别是如果您正在考虑添加更多与文件相关的组件，例如.这就是folderize为你所做的，这样他们就可以得到一个类似于下面的结构：

16.React入门项目

这里有一个很棒的React入门项目列表，你可以在一个页面中看到所有这些项目。因此，如果您希望可以快速找到可以同时提供大量选项供您选择，那么这个适合您。

看到喜欢的初学者项目后，只需克隆存储库，然后根据即将推出的应用程序进行修改即可。但是，并非所有这些都旨在通过克隆存储库来使用，因为其中一些将改为安装，这将成为项目的一个缺点。这样可以更轻松地获取更新并保持项目更整洁。

页面如下所示：

17.突出显示更新

这可以说是任何人在其开发工具包中都可以拥有的最重要的工具。这是reactdevtools扩展的一项功能，可以查看页面中的哪些组件正在不必要地重新呈现：

它可以帮助您在开发页面时发现瓶颈，并使问题在它们用橙色/红色标注时更加容易解决。

除非你的目标是构建一个平庸的应用程序，否则你为什么不希望这个美丽的东西在你旁边呢？

18.React-diff-viewer

React-diff-viewer是一个简单而漂亮的文本diff查看器，由Diff和React制作而成。这支持拆分视图，内联视图，单词差异，行突出显示等功能。

如果您尝试将此功能嵌入到Ahem Boostnote中，并将其自定义为更适合您的应用程序（主题颜色，文档与故事书演示文稿的组合等），这将非常有用。

19.js.coach

我常在js.coach网站上寻找react相关材料。现在不确定为什么很少有人会提及这个宝藏。从这个页面中我找到了需要的任何东西。它快速，简单，不断更新，并且从不失误地为所有项目提供所需的结果。

它最近添加了ReactVR选项卡，这真是太棒了！

20.GitHub awesome-react

GitHub awesome-react开源存储库是与react相关的优质资源的列表。

我可能不知道其他网站的存在，只是从这个链接中学习react。你会发现一批有用的资源，这些资源肯定会帮助你构建出色的react应用程序！

21.proton-native

proton-native可以为您提供一个react环境，用来构建跨平台原生桌面应用程序。

它是Electron的替代品，并具有一些简洁的功能，包括：

• 与 React Native 相同的语法

• 可与现有的 React 库（如 Redux）配合使用

• 跨平台

• 本机组件，不再有电子

• 与所有普通的Node.js软件包兼容

22.Devhints React.js Cheatsheet

一个相当不错的react备忘单，尽管它缺少react hooks。不用担心，我将为reactv16.8+创建一个备忘单，所以请继续关注。

这篇文章到此结束！我希望您在这里找到了有价值的信息，未来还会有更多。