让 React 组件如文档般展示的 6 大工具

译者：yvonne

原文：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

原文链接：

https://blog.bitsrc.io/6-tools-for-documenting-your-react-components-like-a-pro-5027cdfb40c6

---

点击左下角阅读原文，到 SegmentFault 思否社区 和文章作者展开更多互动和交流，扫描下方”二维码“或在“公众号后台“回复“ 入群 ”即可加入我们的技术交流群，收获更多的技术文章~

- END -