正如咱们所知， React 是 JavaScript 库，用于构建精彩的用户界面。但是，并不是每团体都在经常使用相反的工具或知道有这么一些杰出的工具，可以让Reacat 开发体验变得愈加幽默和踊跃被动。
假设大家还没有用过 React，或许大家的好友或许有兴味经常使用它，那么，当被问及为什么要经常使用这个库的时刻，咱们该怎样回答呢?
除了通知他们这个库如许棒以外(这应该是首先要说的事)，我还会提一下，由开源社区创立的工具备助于把开发体验带到一个全新的令人兴奋的水平。
以下是 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，如下所示：
以下是在示例中咱们经常使用的组件之一的例子：
React-Proto 在 GitHub 上曾经取得了 2000 多个星标。
但是，我自己以为该运行程序须要降级，而且还有更多的上班要做，尤其是 React Hooks 的颁布。
除非咱们有一张可见的背景图片，不然就不会增加。换句话说，假设导入一张背景图片，增加，而后删除这张图片，那么，就无法加大了，由于操作按钮曾经变灰色，无法经常使用了。
惟一能够加大的方法是再次导入该背景图片，而后在加大后删除它。这个缺陷扭转了我对该运行程序的看法，但是，由于咱们在其余中央都看不到这个开源工具，所以还是把它放进了列表中。
还有，成为开源软件对这个运行程序来说是件善报，由于这使它有或许成为未来盛行的开源存储库列表(它们的特点是关键的，但是，它们仿佛缺人手。)
3. Why Did You Render
Why Did You Render 猴补丁(monkey patches) React通知咱们可以防止的重渲染。这十分有用，不只可以指点咱们为咱们的名目启动修复，而且可以协助咱们了解 React 的上班原理。并且，当咱们对 React的上班原理有更好的了解时，咱们就会成为更好的 React 开发人员。
咱们可以经过申明一个额外的静态属性 whyDidYouRender，并将其值设置为 true，把一个侦听器附加到恣意自定义组件：
importButtonfromChild2.whyDidYouRender=只要在这么做了，咱们的控制台才会弹出令人难以置信的宜人警报：
别误解我的意思。要把它当做善报情。应用这些宜人的信息，这样咱们就可以修复这些很糜费的重渲染，并且，这些宜人的信息最终将不再烦人。
4. Create React 运行程序
大家都知道 Create React 运行程序 是启动开发 React 名目最快的方法(领有开箱即用的现代性能)。
还有什么能比 npx create-react-app 更繁难的呢?
我在 Medium 上的教程都是用 create-react-app 构建 React 接口界面的，只是由于它又快又繁难。
咱们当中有些人或许不知道如何用 CRA 来创立一个 TypeScript 名目。咱们要做的就是在末尾加上 typescript：
这会帮咱们省去给 CRA 名目手工增加 TypeScript 的费事。
5. React Lifecycle Visualizer
React Lifecycle Visualizer 是一个 npm 包，用于跟踪和可视化恣意 React 组件的生命周期形式。
与 Why Did You Render 相似，咱们可以启用咱们选用的任何组件来显示生命周期可视化器：
Traced Component
}}constEnhancedTracedComponent =traceLifecycle(TracedComponent)constApp=()=>()
这将出现可视化器，所示如下：
但是，这有个缺陷，目前只能用于类组件，因此还不支持 Hooks。(疑问是，它们能够做到吗?由于这跟生命周期有关。)
Guppy 是一个友好且收费的 React 运行程序治理器和义务运转器，可以在桌面上运转。
它们仿佛优先思考那些 React 的开发新手。但是，关于初级开发人员也或许是有用的。
它提供了一种友好的图形化用户界面，用于 React 开发人员经常面对的很多典型义务，如：创立一个新名目、口头义务和治理依赖项。2018 年 8 月增加了对Windows 的支持，因此，可以必需它是跨平台的。以下是 Guppy 看起来的样子：
7. react-testing-library
在编写单元测试时， react-testing-library 用起来觉得很好，因此，我不时青睐用它。这个包提供了 React DOM测试适用程序，激励良好的测试通常。
该处置计划旨在处置测试实施细节的疑问，就像用户可以看到它们一样，而不是测试 React 组件的输入 / 输入。
测试实施细节并不是确保运行程序按预期上班的有效方法。
当然，对咱们如何失掉组件须要的数据、经常使用某种方法等等，咱们能够更有信念。但是，假设咱们必需扭转咱们的成功方法，以指向不同的数据库，那么，单元测试就会失败，由于它们是耦合逻辑的成功细节。
这是 react-testing-library 处置的一个疑问，由于，现实状况下，咱们只宿愿咱们的用户接口界面能够反常上班，最终可以正确地出现。
咱们如何为这些组件失掉数据真的有关紧要，只需它们依然提供预期的输入即可。
以下是咱们如何经常使用该库来启动测试的 示例代码 ：
8. React Developer Tools
React Developer Tools 是一个裁减，它准许在 Chrome 和 Firefox Developer Tools 中检查 React的组件档次结构。
这是在本列表中最经常出现的裁减，并依然是 React 开发人员能够用于调试运行程序的最有协助的工具之一。
在经常使用组件库(如 Material-UI 或 Semantic UI React )时， Bit 是一个很好的代替方法。
Bit 让咱们探求数以千计的开源组件，并准许咱们经常使用它们来构建名目。
这些是由其余 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 工具箱，而后点击 Allowaccess 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 等文件相关的组件。
这就是 folderize 为咱们所做的事，这样，它们可以失掉与上方相似的结构：
16. React 启动名目
以下是一个很棒的 React 启动名目列表，咱们可以在一个页面上看到所有名目。因此，假设咱们是那种觉得用一个渺小的列表来同时列出一切的选项是很有用的人，那么这个就很适宜咱们。
一旦看到咱们青睐的启动名目，咱们可以繁难地克隆存储库，并依据咱们将要开发的运行程序做一些修正。
但是，并不是一切的库都计划经过克隆存储库来经常使用，由于它们中有一些是要装置的，这将成为咱们名目中的依赖项。
这使取得降级并坚持名目繁复变得更容易。
以下是该页面看起来的样子：
17. 高亮显示降级(Highlight Updates)
按理说，这是最关键的工具，任何人都会把它放在自己的开发工具包里。 高亮显示降级 是 React DevTools裁减的性能，可以让咱们检查页面中有哪些组件启动了不用要的重渲染：
它有助于咱们看到开发页面时的瓶颈疑问，并且由于它们用橙色或白色对重大的重渲染疑问启动了着色，所以更容易发现疑问。
除非咱们的指标是构建一个伟大的运行程序，否则为什么不试试这个在咱们身边的好物品呢?
18. React Diff Viewer
React Diff Viewer 是个繁难又好看的文本差异检查器，用 Diff 和 React构建而成。它支持这些性能，如：分屏视图、内联视图、单词差异、行高亮等等。
假设咱们想把这特性能嵌入咱们的记事簿(如Boostnote)，并对其启动定制以更适宜咱们的运行程序(主题色彩、文档与故事书演示文本的组合等等)，那么，这是很有用的。
19. JS.coach
我用来寻觅 React 相关资料最罕用的网站是JS.coach。如今，我不确定为什么提到这个网站的人不多，但是，仅仅从这个网页，我曾经找到了一切我须要的物品。
它又快又繁难，并且不时地降级，总是能为我一切的名目提供所需的结果。
最近，他们增加了 React VR 选项卡，十分棒!
20. Awesome React
这个 GitHub Awesome React 开源存储库是一个列表，外面有一些跟 React 相关的好物品。
我或许忘了其余网站，只是从这个链接学习 React。大家会找到一大堆有用的资源，这些资源必定会有助于大家构建杰出的 React 运行程序!
21. Proton Native
Proton Native 给咱们提供了一个 React 环境以构建跨平台的本机桌面运行程序。
是 Electron 的代替产品，具备一些繁复的性能，包含：
与 React Native 语法相反。
适用于现存的 React 库，如 Redux。
跨平台。
原生组件。不再有 Electron。
与一切反常的 Node.js 包兼容。
有兴味了解更多吗?请浏览它们的 文档 。
22. Devhints React.js Cheatsheet
这是 一张很好的 React 速查表 ，虽然它缺少 React Hooks。不要担忧，我将为 React v16.8+ 创立一张速查表。