[译] 5 款工具助力 React 快速开发

• 原文地址：5 Tools for Faster Development in React
• 原文做者：Jonathan Saring
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Ivocin
• 校对者：Haoze Xu, Junkai Liu

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

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

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

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

1. Bit

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

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

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

• YouTube 视频连接：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、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。