原文地址：5 Tools for Faster Development in React

原文作者：Jonathan Saring

译文出自：掘金翻译计划

本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO1/5-tools-for-faster-development-in-react.md

译者：Ivocin

校对者：Haoze Xu, Junkai Liu

本文将会介绍 5 款工具，可加速 React UI 组件和应用程序的开发工作。

React 非常适合快速开发具有出色的交互式 UI 的应用程序。React 组件是创建用于开发不同应用的隔离的、可复用的模块的很棒的方法。。

虽然一些最佳实践有助于开发更好的应用程序，但正确的工具可以使开发过程更快。以下是 5（+）个实用的工具，可以帮助我们加速组件和应用程序的开发。

欢迎你发表评论并提出建议。

1. Bit

Bit — 分享和构建组件代码：Bit 帮助你在不同的项目和应用程序中共享、发现和使用代码组件，以构建新功能和...

Bit 是一个开源平台，用于使用组件构建应用程序。

使用 Bit，你可以组织来自不同应用程序和项目的组件（无需任何重构），并使其可以在构建新功能和应用程序时被发现、使用、开发和协作。

YouTube 视频链接：https://youtu.be/P4Mk_hqR8dU

Bit 上共享的组件可自动地通过 NPM/Yarn 安装，或与 Bit 本身一起使用。后者使你能够同时开发来自不同项目的组件，并轻松更新（并合并）它们之间的更改。

为了使组件更容易被发现，Bit 为组件提供了可视化渲染，测试结果（Bit 独立运行组件的单元测试）和从源代码本身解析的文档。

使用 Bit，你可以更快地开发多个应用程序和进行团队协作，并将你的组件用作新功能和项目的构建块。

2. StoryBook / Styleguidist

Storybook 和 Styleguidist 是在 React 中快速开发 UI 的环境。两者都是加速 React 应用程序开发的绝佳工具。

两者之间存在一些重要的差异，这些差异也可以组合在一起以完成你的组件开发系统。

使用 Storybook，你可以在 JavaScript 文件中编写 stories。使用 Styleguidist，你可以在 Markdown 文件中编写示例。Storybook 一次显示一个组件的变化，而 Styleguidist 可以显示不同组件的多种变化。Storybook 非常适合显示组件的状态，而 Styleguidist 对于不同组件的文档和演示非常有用。

下面是一个简短的纲要。

StoryBook

storybooks/storybook: storybook — Interactive UI component dev & test: React, React Native, Vue, Angular.

Storybook 是 UI 组件的快速开发环境。

它允许你浏览组件库，查看每个组件的不同状态，以及交互式开发和测试组件。

StoryBook 可帮助你独立于应用程序开发组件，这也有助于提高组件的可重用性和可测试性。

你可以浏览库中的组件，修改其属性，并通过热加载在网页上获得组件的即时效果。可以在这里找到一些流行的例子。

不同的插件可以帮助你更快地开发，从而缩短代码调整到视觉输出之间的周期。StoryBook 还支持 React Native 和 Vue.js。

Styleguidist

React Styleguidist：具有在线样式指南的独立的 React 组件开发环境：具有在线样式指南的独立的 React 组件开发环境。

React Styleguidist 是一个组件开发环境，它具有热重载的开发服务器和在线样式指南，列出组件的 propTypes 并显示基于 .md 文件的可编辑的用法示例。

它支持ES6，Flow 和 TypeScript，并且可以使用开箱即用的 Create React App。自动生成的使用文档可以让 Styleguidist 充当团队不同组件的文档门户。

另请查看由 Formidable Labs 提供的 React Live。这个组件渲染环境也用在了 Bit 的实时组件 playground 上。

3. React devTools

这个官方的 React Chrome devTools 扩展程序可以让你在 Chrome 开发者工具里查看 React 组件的层次结构。它也可以作为 FireFox 附加组件使用。

使用 React devTools，你可以在操作组件树时查看并编辑组件的 props 和 state。此功能可以让你了解组件更改如何影响其他组件，以帮助你使用正确的组件结构和分离方式来设计 UI。

这个扩展程序的搜索栏可让你快速查找和检查所需的组件，从而节省宝贵的开发时间。

查看适用于 Safari，IE 和 React Native 的独立应用程序。

4. Redux devTools

此 Chrome 扩展程序（和 FireFox 附加组件）是一个开发时间程序包，是 Redux 开发工作流程的利器。它允许你检查每个 state 和 action payload，重新计算“分阶段”的 actions。

你可以将 Redux DevTools 扩展程序与任何处理状态的体系结构集成。每个 React 组件的本地状态可以有多个存储或不同的实例。你甚至可以通过“时间旅行”来取消 actions（可以观看 Dan Abramov 的视频）。日志记录 UI 本身甚至可以自定义为 React 组件。

5. Boilerplates & Kick-Starters

虽然这些并不完全是开发者工具，但它们有助于快速创建 React 应用程序，同时节省构建和其他配置的时间。虽然 React 有许多入门套件，但这里有一些最好的。

当与预制组件（在 Bit 或其他来源上）结合使用时，你可以快速创建应用程序结构并将组件组合到其中。

Create React App (50k stars)

这个广泛使用且受欢迎的项目可能是快速创建新 React 应用程序并从头开始运行的最有效方法。

此软件包封装了新 React 应用程序所需的复杂配置（Babel，Webpack等），因此你可以节省新建应用程序所需的这段时间。

要创建新应用程序，只需运行一个命令即可。

npx create-react-app my-app

此命令在当前文件夹中创建名为 my-app 的目录。在目录中，它将生成初始项目结构并安装传递依赖项，然后你就可以简单地开始编码了。

React Boilerplate (18k stars)

Max Stoiber 的这个 React 样板文件模板为你的 React 应用程序提供了一个启动模板，该模板专注于离线开发，并在考虑到了可扩展性和性能。

它的快速脚手架有助于直接从 CLI 创建组件、容器、路由、选择器和 sagas —— 以及它们的测试，而 CSS 和 JS 的更改可以立即反映出来。

与 create-react-app 不同，这个样板文件不是为初学者设计的，而是为经验丰富的开发人员提供的。使用它可以管理性能、异步、样式等等，从而构建产品级的应用程序。

React Slingshot (8.5k stars)

Cory House 的这个极好的项目是 React + Redux 入门套件/样板，带有Babel、热重载、测试和 linting 等等。

与 React Boilerplate 非常相似，这个入门套件专注于快速开发的开发人员体验。每次点击“保存”时，更改都会热重载，并且会运行自动化测试。

该项目甚至包括一个示例应用，因此你无需阅读太多文档即可开始工作。

另外也可以了解一下 simple-react-app，这篇文章对此工具进行了解释。

如果发现译文存在错误或其他需要改进的地方，欢迎到掘金翻译计划对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。