除了告诉他们这个库多么棒以外(这应该是首先要说的事)，我还会提一下，由开源社区创建的工具有助于把开发体验带到一个全新的令人兴奋的水平。

以下是 2019 年大家可以用来构建 React 应用程序的 22 个工具(该列表没有按它们的重要性排序)

1. Webpack Bundle Analyzer

有没有想过自己的应用程序中的哪些包或哪些部分占用了全部的空间?好了，我们可以用 Webpack Bundle Analyzer 来找出答案。这个包将帮助我们识别出占用最多空间的输出文件。

它将创建一个活动服务器，可视化我们的包的内容，用一个交互式树状图呈现给我们。在我们的工具包里有了这个工具之后，我们就能够看到呈现的文件所处的位置、它们的 gzip 大小、解析后的大小以及它们的父文件 / 子文件。

好处?嗯，我们可以根据所看到的来优化自己的 React 应用程序!

我们可以清楚地看到，PDF 包在应用程序中占用了大部分空间。并且，它还占据了大部分的屏幕。这非常有用。

然而，截屏是最低限度的展示。我们还可以传入有用的选项，以更详细地查看它，如 generateStatesFile：true，还可以选择生成一个静态 HTML 文件，我们可以把它保存在我们的开发环境外面的某个地方，以便以后使用。

2. React-Proto

React-Proto 是开发人员和设计人员的原型工具。它是一个桌面软件，因此，在使用之前，我们必须下载并安装该软件。

以下是该软件在使用时的一个示例：

该应用程序允许我们声明属性及其类型、在树状图中查看我们的组件，导入一张背景图片、把它们定义为有状态或无状态、定义其父组件、放大 / 缩小，并把原型导出到一个新的或现有的项目中。

该应用程序似乎更适合 Mac 用户，但是，它也适合 Windows 用户。

当我们完成用户界面的映射时，可以选择导出到一个现有项目或一个新项目中。如果选择导出到一个现有项目并选择了根目录，它将把它们导出到./src/components，如下所示：