【译】提升React开发效率的5个工具
文章翻译自：blog.bitsrc.io/5-tools-for…react
译者注：git
这篇文章中，除了 React devTools 和 Redux devTools，其他的工具我以前都没接触过，看过原文后以为收获很大，因此将它翻译出来，但愿能够传播给更多的人。github
- React devTools 和 Redux devTools 这两个应该大多数人都知道，而且常常在开发中使用，还未使用过的话那本文能够做为你的入坑指南😜
- 若是你正在开发业务组件，那这篇文章能够给你很多帮助：StoryBook 能够帮助你提升很多效率；Bit 能够做为团队中业务组件共享的另外一种方案。
- 提及开发react应用的脚手架，你确定会想起create-react-app，看完文章的第五点，你会发现原来开发react应用的脚手架不仅有 create-react-app，还有几个可能更适合你目前的开发需求。
React很是适合快速开发具备漂亮交互式UI的应用程序。React组件是建立隔离和可重用构建块的好方法，能够用于开发不一样应用程序。npm
一些最佳实践有助于开发更好的应用程序，但正确的工具可使开发过程更快。如下是5（+）个有用的工具，能够加快组件和应用程序的开发效率。bash
1. Bit
这里有一段介绍 Bit 的视频服务器
Bit共享的组件可用NPM / Yarn自动安装，或与Bit自己一块儿使用。 后者使您可以同时开发来自不一样项目的组件，并轻松更新（和合并）它们之间的更改。网络
为了使组件更容易被发现，Bit为组件提供了可视化渲染，测试结果（Bit运行组件单元测试）和从源代码自己解析的文档。并发
使用Bit，您能够更快地开发多个应用程序，在团队协做时将您的组件用做新功能和项目的构建块。app
译者注：异步
我刚看完这一点的时候并无感觉到 Bit 的优点，以为使用 npm 包 来共享组件已是一种很好的方案😂，后来再去官网上了解了下发现 Bit 的最大优点应该是如下几点（有什么错误欢迎你们指正）：
- 使用 npm 包来共享组件的方案须要您新开一个仓库来写组件并发布 npm 包，而 Bit 可让您不新开一个仓库就能够从任何现有项目的仓库中无缝隔离组件，并共享它们，在其余项目中您可使用 Bit 来导入您所需的组件并进行开发和同步。
- Bit 的官网提供了能够作交互式预览的playground，您能够在线实时修改代码看到组件的变化，进而判断这个组件是否是符合您的使用预期。
然而，目前 Bit 在 GitHub 上的star数量才3k+，你们能够做为一个辅助工具稍做了解
2. StoryBook / Styleguidist
Storybook 和 Styleguidist 是 React 中快速 UI 开发的环境。二者都是提升 React 应用程序开发效率的绝佳工具。二者之间存在一些重要的差别，您能够把二者组合在一块儿以完成组件开发系统。
- 使用Storybook，您能够在JavaScript文件中编写故事。
- 使用Styleguidist，您能够在Markdown文件中编写示例。
Storybook一次显示一个组件的变体，但Styleguidist能够显示不一样组件的多种变体。 Storybook很是适合显示组件的状态，而Styleguidist对于不一样组件的文档和演示很是有用。
StoryBook
下面有一个简短的介绍
Storybook是UI组件的快速开发环境。 它容许您浏览组件库，查看每一个组件的不一样状态，以及交互式开发和测试组件。
StoryBook可帮助您独立于应用程序开发组件，这也有助于提升组件的可重用性和可测试性。
您能够浏览库中的组件，使用其属性进行播放，并经过网络上的热从新加载得到即时印象。
你能够在这里看一些例子。
不一样的插件能够帮助您更快地开发过程，从而缩短代码调整到视觉输出之间的周期。 StoryBook还支持React Native和Vue.js.
译者注: 这个真的强推！！！强推！！！
Styleguidist
React Styleguidist是一个具备热重载的开发服务器的组件开发环境，它基于.md文件列出了组件的propTypes并显示可编辑用法示例。
它支持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, 经过组织层次结构树,React devTools可以让您了解组件的update如何影响其余组件，以帮助使用正确的组件结构和拆分来设计UI。
扩展程序的搜索栏可以让您快速查找和检查所需的组件，从而节省宝贵的开发时间。
您能够在这里查看适用于Safari，IE和React Native的独立应用程序。
4. Redux devTools
此Chrome扩展程序（和FireFox附加组件）是一个开发调试的工具，为您的Redux开发工做提供帮助。它容许您检查每一个state和action的payload，从新评估“分阶段”action。
您能够将Redux DevTools Extension与任何处理状态的体系结构集成。 每一个React组件的本地状态能够有多个存储或不一样的实例。 您甚至能够“时间旅行”取消操做（观看此Dan Abramov视频）。 日志记录UI自己甚至能够自定义为React组件。
5. Boilerplates & Kick-Starters
虽然这些并不彻底是devTools，但它们有助于快速设置React应用程序，同时节省构建和其余配置的时间。
React有许多入门套件，这里有一些我以为值得推荐的。您能够快速建立应用程序结构并将组件组合到其中。
Create React App (50k stars)
这个项目被普遍使用而且很是受欢迎，若是你要快速建立一个简单的新React应用程序并直接能够运行，它多是最好用的方法。
此软件包封装了开发一个新的React应用程序所需的复杂配置（Babel，Webpack等），所以您能够节省新应用程序的时间。
要建立新应用程序，只需运行一个命令便可。
npx create-react-app my-app
复制代码
此命令在当前文件夹中建立名为my-app的目录。 在目录中，它将生成初始项目结构并安装依赖项，所以您能够直接开始编码。
React Boilerplate (18k stars)
这是 Max Stoiber 为您的React应用程序提供的一个启动模板，该模板专一于离线开发，并在构建时考虑了可扩展性和性能。
它的快速脚手架有助于直接从CLI建立组件，容器，路由，选择器和sagas - 以及它们的测试，而CSS和JS更改能够在您写代码时当即反映出来。
与create-react-app不一样，这个样板不是为初学者设计的，而是为经验丰富的开发人员准备的（它提供管理性能，异步，样式等工具）。
React Slingshot (8.5k stars)
Cory House的这个精彩项目是React + Redux入门套件/模版，带有Babel，热重载，测试，linting等等。
与React Boilerplate很是类似，这个入门套件专一于快速开发的开发人员体验。 每次点击“保存”时，都会对热更改进行热重装并运行自动化测试。
该项目甚至包括一个示例应用程序，所以您能够直接开始工做，而无需过多地阅读文档。
- 您还能够查看这篇文章中解释的simple-react-app。