2020 年 11 款顶级 React 开发工具

1. React 开发者工具

2. React Sight

3. 位

4. React 扩展包（适用于 VS Studio）

5.故事书

6. React Styleguideist

7. 创建 React 应用

8. React Bootstrap

9. React-Proto

10. 你为什么要渲染

11. 质子原生

结论

您应该添加到工具箱中的 React 开发人员工具

JavaScript 因每周围绕它创建的框架和工具数量而闻名，而 React 作为近年来最受欢迎的框架之一，“遭遇”了类似的命运，导致新开发人员在尝试开始深入研究该技术时不知所措。

因此，当你为新的 React 项目选择合适的 IDE、合适的可视化工具，甚至合适的样式表时，市面上有很多选择。如何选择合适的？说起来容易做起来难。

在本文中，我将介绍 11 个（是的，你没看错）围绕 React 的工具，以帮助你了解你的选择是什么，以及如何利用它们来帮助你充分利用框架本身。

1. React 开发者工具

我们将从显而易见的选择开始，它是 React dev 最受欢迎的工具之一，** React Dev Tools for Chrome **，最近发布了其第 4 版🚀

在开发工具中，组件选项卡将显示屏幕上渲染的组件列表以及由其他组件生成的子组件。您可以选择它们并检查甚至编辑它们的状态和属性。使用分析器选项卡，您还可以测量应用性能。

这两个选项都可以在 DevTools 中已经包含的标准选项卡上使用，但是，它们是为原始 JS 设计的，这意味着与扩展添加的专门选项相比，您将不会拥有相同数量的细节和功能。

如果您认真对待与反应相关的开发，那么这是一个必备的扩展。

为了确保您没有错过任何隐藏功能，请尝试使用此交互式教程进行练习。

2. React Sight

与上述扩展程序结合使用，React Sight是另一个您可以安装的 Chrome 扩展程序，可帮助您完成与反应检查相关的工作。

让我解释一下：

安装 React DevTools 后，您可以返回扩展列表并查找React Sight。像安装所有扩展一样，使用蓝色大按钮进行安装。

之后，如果您正在运行本地文件 URL，请确保在 React Dev Tools 和 React Sight 的扩展设置中启用“允许访问文件 URL”。现在您可以运行您的 React 应用程序，或打开任何运行 React 的网站。安装过程非常简单。

要使用它，你会发现 DevTools 中有一个新选项卡，像以前一样，称为“React Sight”。

使用此工具，您可以以树状结构直观地查看您创建的不同组件。这样，您就可以了解它们是如何连接的，并且通过将鼠标悬停在它们上方，您可以查看它们的当前状态和属性。

3. 位

我在另一篇文章中更详细地介绍了使用 React 的Bit（Github ） ，但它之所以出现在这个列表中，是因为它绝对是创建和共享 React 组件时最好的选择之一。

无需赘述，Bit提供了一个 CLI 工具和一个在线平台，您可以在其中发布您的 React 组件（经 Bit 隔离后）并与他人共享。它还允许您搜索由第三方创建和发布的组件。您可以将其视为 NPM 与 Git 的结合，只不过是针对 React 组件的。

他们的第三方商店允许你浏览完整的组件“市场”。这些组件甚至是为了你自己的利益而渲染的，所以你不必仅仅阅读一些代码就能理解它们应该做什么：

您甚至可以获得每个组件的详细视图，您可以自由编辑用于呈现预览的代码，并确保组件符合您的需求，然后再决定下载它并将其添加到您的项目中（或使用“位导入”导入它，以在您的本地环境中进一步开发它）

如果您更倾向于发布而不是导入他人的作品，您可以使用一个非常简单的命令行工具，它允许您单独跟踪每个组件的更改，而无需为每个组件单独创建一个项目。如果您想了解更多关于 Bits 的信息以及如何使用它来创建您自己的组件库，请点击此处。

4. React 扩展包（适用于 VS Studio）

Visual Studio 可能是目前 JavaScript 开发者最流行的 IDE 之一。没错，你不必非得使用它才能成为一名成功的开发者，还有很多很棒的替代方案，比如 Sublime、IntelliJ 甚至 Vim（这里就有 Vim 的铁杆粉丝！）。

话虽如此，由于 VS 背后拥有强大的社区，我想分享一些关于其React Extension Pack 的内容。

本质上，这是一个扩展包，旨在帮助您完成与 React 相关的任务。默认情况下，VS 在解析和提供满足您通用 JS 需求的小工具和代码片段方面做得非常出色，但这个扩展包更上一层楼。在这个扩展包中，您将找到：

• ReactJS 代码片段：它提供了 40 个（是的，你没看错！）代码片段，可以满足你所有的通用需求，以及 34 个 propTypes 特定的代码片段。如果你懒得自己算，加起来一共 74 个代码片段，让你不再浪费时间编写大量代码，从而提高日常工作的效率。
• ES Lint：它添加了对同名命令行工具的支持。它会将 ES Lint 集成到你的 IDE 中，帮助你改进语法、设置你自己的编码风格，甚至（在某些情况下）自动查找并修复错误。
• npm：每次需要安装新的依赖项、重新启动服务器甚至运行某些特定于 npm 的命令时，都必须从 IDE 跳转到终端，这可能会有点繁琐，因此此扩展增加了直接从命令面板运行 npm 命令的功能。
• JS ES6 代码片段：想要更多 JS 通用代码片段吗？何乐而不为！这组代码片段将包含另外 40 多个代码片段。这次，它们并非针对特定代码，但考虑到您毕竟在使用 JavaScript，为了加快您的开发速度，这绝对是必备的。
• 搜索 node_modules：你有多少次问过自己是否安装了*那个*模块，然后不得不反复检查？你有多少次费力地查看新扩展的代码，试图理解它为什么没有按预期工作？有了这个扩展，你可以轻松找到模块并在编辑器中打开它。这听起来可能像是一个非常具体的用例，但相信我，在你需要它的时候把它放在那里，会为你节省很多时间。
• npm IntelliSense：这个小插件的名字或许不足以完美展现它节省时间的神奇功效：每当您尝试将扩展导入代码时，它都会自动补全扩展的名称。大型项目往往会添加大量模块，如果您不是唯一一个参与其中的人，甚至可能无法跟踪所有已安装的模块。有了它，您可以轻松列出所有已安装的模块，快速搜索它们，并插入正确的代码片段将其导入代码。
• 路径智能感知：最后，与上一个扩展功能一致，这个扩展将帮助您自动补全本地导入的路径。这又能节省您的时间，尤其是当您不是唯一一个在处理大型项目的人时，记住所有路径和文件名会让您非常头疼。

就是这样，7 个非常小巧的扩展，单独使用就能为项目增添价值，但组合起来却能带来巨大的提升。要安装此扩展包，你可以从 VS 的命令面板（使用 CTRL+P 打开）轻松安装，输入以下命令：

ext install jawandarajbir.react-vscode-extension-pack

5.故事书

React 的初衷是帮助你以非常直观的方式编写 UI。因此，组件的概念应运而生。但为了创建可视化组件而编写代码并非易事，所以我们通常会在代码和浏览器之间来回切换。

Storybook是一款开源工具，可以用来开发自己的 UI 组件。它不仅仅是一个代码库，或者说，它不仅仅是一个代码库。它的在线 UI 编辑器允许你开发、检查并最终以交互的方式展示你的作品（这在开发可视化组件时至关重要）。

为了将 Storybook 安装到您现有的 React 项目中（因为您也可以这样做，无需从头开始启动项目！）您所要做的就是：

$ npx -p @storybook/cli sb init

该命令将检查您的项目结构，并尝试了解您正在使用哪个视图层（因为 Storybook 除了支持 React 之外还支持其他视图层，例如 Vue、Angular 等）。

命令完成后，您可以通过运行以下命令启动 Storybook：

$ npm run storybook

祝您创建组件愉快！

6. React Styleguideist

这是另一个非常有趣的交互式工具，可用于创建和展示您的 UI 组件（开始在这里看到一种模式了吗？）。

仔细观察上图。右侧是实际的代码，左侧是生成 UI 的代码。您可以通过这种方式展示 UI，甚至可以直接在渲染版本上修改代码来测试和编辑。

为了将其包含到您的 React 项目中，您所要做的就是（假设您已经安装了 webpack 并且使用 Create React App 创建了该项目）：

$ npm install --save-dev react-styleguidist

然后通过运行以下命令启动样式指南服务器：

$ npx styleguidist server 

如果您想了解有关在项目中使用 Styleguideist 的更多信息，请查看其完整文档和演示页面。

7. 创建 React 应用

这篇文章本身就足以证明 React 作为前端社区工具的受欢迎程度。如此之多，以至于这里描述的许多工具都要求你遵循某种标准的项目结构才能正常工作。毕竟，实现方法太多了，如果你不指望一个标准，就很难提供帮助。

这正是 Facebook 的Create React App发挥作用的地方。本质上，这个工具允许你用一个命令行启动一个全新的 React 项目。无需再考虑最佳的项目结构，也无需考虑需要添加哪些合适的支持模块，这个工具会帮你搞定一切。

为了使用这个应用程序，如果您已经安装了，则无需安装任何东西npx，您只需要以下一行：

$ npx create-react-app my-app

或者，如果出于某种原因，您不喜欢npx，您也可以使用npm或yarn：

$ npm init react-app my-app

或者

$ yarn create react-app my-app

无论哪种情况，您都需要在系统上安装 Node.js（版本 8.16.0 或 10.16.0 或更高版本）。

使用其中任何一个命令，您都会得到如下所示的文件夹结构：

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│  ├── favicon.ico
│  ├── index.html
│  └── manifest.json
└── src    
   ├── App.css    
   ├── App.js    
   ├── App.test.js    
   ├── index.css    
   ├── index.js    
   ├── logo.svg    
   └── serviceWorker.js

恭喜！现在您可以启动服务器并开始开发了，无需进行任何其他配置！只需：

$ cd my-app$ npm start #or yarn start depending on what you prefer

这将在http://localhost:3000上启动一个开发服务器，它将在您每次编辑代码时重新加载代码，所以您已经设置好了！

如果您打算使用它，请随时查看其完整文档（您应该这样做！），其中还有更多内容，您不会想错过的。

8. React Bootstrap

听说过Bootstrap吗？它是一个流行的（即使不是最流行的）CSS 框架。简而言之，它提供了一组 CSS 类和 JavaScript 函数，让你无需精通其中任何一种技术，就能设计出漂亮的 UI。

现在， React Bootstrap的创建者已经重写了 JS 代码，使其与 React 兼容。因此，你现在可以像使用 React 组件一样使用它们的组件了（因为它们现在就是 React 组件了）：

为了将其添加到您的项目中，您可以使用npm

$ npm install react-bootstrap bootstrap

一旦准备好，您就可以将所需的样式表添加到您的项目App.js或src/index.js文件中（请注意，我们再次假设这里有一个预定义的项目结构）。

9. React-Proto

如果你更偏爱视觉设计而非代码，那么React-proto也许是一个不错的选择。有了它，你可以通过拖放操作来创建 UI 原型，而无需编写代码。

别误会，你并非完全不写代码就能创建完整的 UI，这只是为了创建所需组件的原型。为此，你需要从一张图片（通常由设计师提供或你自己创建）开始，然后使用此工具标记所有潜在组件，并赋予它们名称、属性和层级结构。完成后，你可以将它们导出到实际的自动生成代码中，以便以后进行自定义。

请注意上面动画中的用户如何选择图像的一部分并从中创建组件。

如果您正在开始一个已经设计好的新项目，这绝对是一个非常有用的工具，它将从项目的初始设置中节省大量时间。

最棒的是？这款应用兼容三大主流系统，所以真的没有理由不去尝试一下，不是吗？

10. 你为什么要渲染

当你尝试调试组件的行为时，这是一个特别好用的工具。想要了解组件何时渲染或何时不该重新渲染并不总是那么容易，尤其是在你刚开始使用 React 的时候。

因此，使用这个小库，您可以对 React 本身进行 monkey patch，以告诉您何时开始发生可避免的渲染以及原因（如果您问我，这是最好的部分！）。

您可以使用以下简单方法安装它：

$ npm install @welldone-software/why-did-you-render --save

然后，您可以使用以下行将其包含到您的项目中：

之后，您要做的就是标记您想要收到通知的组​​件，如下所示：

一旦一切设置完毕并准备就绪，您可以期待以下输出：

查看其完整文档以了解更多详细信息，这绝对是值得关注的内容之一！

11. 质子原生

最后，对于最后一个工具，我想介绍一种使用 React 创建原生桌面应用程序的方法，因为毕竟，多亏了 Electron 这样的项目，使用 JavaScript 来实现这一点已经成为可能。

现在，得益于Proton Native，你也可以使用 React 来实现这一点。你可以通过定义 React 组件来定义 GUI 元素，并且此工具兼容所有 Node.js 模块（毕竟它基于 Node.js 模块）、Redux，而且由于 Proton 的特性，它完全跨平台！

为了将其安装到您的系统中，您只需要npm安装并执行以下操作：

$ npm install -g create-proton-app

但请注意，如果您使用的是 Linux，则需要首先安装以下要求：

libgtk-3-dev build-essential python2 pkg-config

最后，要创建应用程序，只需执行以下操作：

$ create-proton-app my-app # move to your project directory $ cd my-app # run your app $ npm run start

他们已经提供了一个可用的示例供您查看，或者如果您想了解如何将其用于您自己的项目，请随时查看他们的完整文档。

结论

以上是 React 相关项目的 11 款最佳工具，它们并非全部都是 Web 平台的，并非全部都是可视化的，也并非全部都旨在帮助你编写代码。但重点是，它们中的很多工具可以一起使用，相互补充。

现在，让我把话题转回到你身上：我漏掉了哪些？你日常使用的 React 相关工具中，有哪些没有在这里展示？请在下方留言，我很乐意看看！

否则，下次再见！