【译】让React组件如文档般展现的6大工具

原文 6 Tools for Documenting Your React Components Like a Pro

若是没有人可以理解并找到如何使用咱们的组件，那它们有什么用呢？

React鼓励咱们使用组件构建模块化程序。模块化给咱们带来了很是多的好处，包括提升了可重用性。然而，若是你是为了贡献和复用组件，最好得让你的组件容易被找到、理解和使用。你须要将其文档化。

目前，使用工具能够帮助咱们实现自动化文档工做流程，并使咱们的组件文档变得丰富、可视化和可交互。有些工具甚至将这些文档组合为共享组件的工做流程的组成部分。

为了垂手可得地将咱们的组件文档化，我收集了一些业界流行的工具，若是你有推荐的组件也能够评论留言。

1. Bit

共享组件的平台

Bit不只是一个将组件文档化的工具，它仍是一个开源工具，支持你使用全部文件和依赖项封装组件，并在不一样应用程序中开箱即用地运行它们。
在Bit，你能够跨应用地共享和协做组件，你全部共享组件均可以被发现，以便你的团队在项目中查找和使用，并轻松共享他们本身的组件。

在Bit中，你共享的组件能够在大家团队中的组件共享中心找到，你能够根据上下文、bundle体积、依赖项搜索组件，你能够很是快地找到已经渲染好的组件快照，而且选择使用它们。

浏览bit.dev上的组件

当你进入组件详情页时，Bit提供了一个可交互的页面实时渲染展现组件，若是该组件包含js或md代码，咱们能够对其进行代码修改和相关调试。

找到想要使用的组件后，只需使用NPM或Yarn进行安装便可。你甚至可使用Bit直接开发和安装组件，这样你的团队就能够协做并一块儿构建。

经过Bit共享组件，就不须要再使用存储库或工具，也不须要重构或更改代码，共享、文档化、可视化组件都集中在一块儿，而且也能实现开箱即用。

快速上手：
Share reusable code components as a team · Bit
teambit/bit

2. StoryBook & Styleguidist

StoryBook和StyleGuidist是很是棒的项目，能够帮助咱们开发独立的组件，同时能够直观地呈现和文档化它们。

StoryBook 提供了一套UI组件的开发环境。它容许你浏览组件库，查看每一个组件的不一样状态，以及交互式开发和测试组件。在构建库时，StoryBook提供了一种可视化和记录组件的简洁方法，不一样的AddOns让你能够更轻松地集成到不一样的工具和工做流中。你甚至能够在单元测试中重复使用示例来确认细微差异的功能。

StyleGuidist是一个独立的React组件开发环境而且具有实时编译指引。它提供了一个热重载的服务器和即时编译指引，列出了组件propTypes并展现基于.md文件的可编辑使用示例。它支持ES6，Flow和TypeScript，而且能够直接使用Create React App。自动生成的使用文档能够帮助Styleguidist做为团队不一样组件的文档门户。

相似的工具还有UiZoo

3. Codesandbox, Stackblitz & friends

组件在线编译器是一种很是巧妙的展现组件和理解他们如何运行的工具。当你能够将它们组合为文档的一部分（或做为共享组件的一部分）时，在线编译器可帮助你快速了解代码的工做方式并决定是否要使用该组件。

Codesandbox是一个在线编辑器，用于快速建立和展现组件等小项目。建立一些有趣的东西后，你能够经过共享网址向他人展现它。CodeSandbox具备实时预览功能，能够在你输入代码时显示运行结果，而且能够集成到你的不一样工具和开发工做流程中去。

Stackblitz是一个由Visual Studio Code提供支持的“Web应用程序在线IDE”。与Codesnadbox很是类似，StackBlitz是一个在线IDE，你能够在其中建立经过URL共享的Angular和React项目。与Codesandbox同样，它会在你编辑时自动安装依赖项，编译，捆绑和热重载。

其余相似工具：
11 React UI Component Playgrounds for 2019

4. Docz

Docz使你能够更轻松地为你的代码构建Gtabsy支持的文档网站。它基于MDX（Markdown + JSX），即利用markdown进行组件文档化。基本上，你能够在项目的任何位置编写.mdx文件，Docz会将其转换并部署到Netlify，简化你本身设计的文档门户的过程。很是有用不是吗？
pedronauck / docz

5. MDX-docs

MDX-docs容许你使用MDX和Next.js记录和开发React组件。您能够将markdown与内联JSX混合以展现React组件。像往常同样写下markdown并使用ES导入语法在文档中使用自定义组件。内置组件会将JSX代码块渲染为具备可编辑代码并提供实时预览功能，由react-live提供支持。

jxnblk / MDX-文档

6. React Docgen

React DocGen是一个用于从React组件文件中提取信息的CLI和工具箱，以便生成文档。它使用ast-types和@babel/parser将源解析为AST，并提供处理此AST的方法。输出/返回值是JSON blob/JavaScript对象。它经过React.createClass，ES2015类定义或功能（无状态组件）为React组件提供了一个默认的定义。功能十分强大。

reactjs/react-docgen
callstack/component-docs