6 个专业级 React 组件文档编写工具

如果没有人能够理解如何找到并使用组件，那么组件有什么用呢？

React 鼓励你使用组件构建模块化应用。模块化带来了诸多优势，包括提升可复用性。但是，当你希望共享和复用组件时，最好确保它易于发现、理解和使用。你需要为组件编写文档。

如今，现代工具可以帮助自动化部分文档工作流程，并将组件文档的使用转化为丰富、可视化甚至交互式的体验。有些工具甚至将这些文档作为组件共享工作流程不可或缺的一部分。

为了轻松获得美观的组件文档，我收集了一些最优秀、最流行的 React 组件文档编写工具。欢迎评论并添加您自己的想法和工具。

1.位

共享组件的平台。

bit.dev — 通过包大小、依赖项、标签和快照预览搜索并选择组件

它不仅仅是一个组件文档工具。它还是一个开源工具，可让您封装组件及其所有文件和依赖项，并开箱即用地在不同应用程序中运行它们。

bit.dev平台允许您跨应用程序共享和协作组件。所有共享的组件均可被您的团队发现，方便他们在项目中查找和使用，并轻松共享他们自己的组件。

您分享到bit.dev的组件将在团队的共享组件中心中可见。您可以按上下文、包大小甚至依赖项搜索组件。您可以根据实际渲染组件的可视化快照快速浏览结果，并根据视觉效果进行选择。

→探索 bit.dev 上的组件

当您进入某个组件的网页时，您会发现 Bit 会将该组件呈现在一个实时环境中，以便您在选择将其应用于应用程序之前先试用一下。如果您的代码中包含 JSDocs 或 .md 文件，Bit 也会解析并显示这些文档。如果组件包含单元测试文件，Bit 会单独运行这些文件，并将结果作为每个组件文档的一部分呈现。

找到你喜欢的组件后，只需使用 NPM 或 Yarn 安装即可。你甚至可以使用 Bit 直接从任何使用应用程序开发和更新组件，让你的团队能够协作构建。

通过 Bit 共享组件时，您无需设置任何其他存储库或工具，也无需重构或更改代码，并且共享组件的中心就是它们被记录和发现的地方，几乎开箱即用。

2. StoryBook 和 Styleguidist

StoryBook 和 StyleGuidist 都是非常棒的项目，它们可以帮助独立开发组件，同时以可视化的方式呈现和记录它们。

故事书

StoryBook是一个 UI 组件开发环境。它允许您浏览组件库，查看每个组件的不同状态，并以交互方式开发和测试组件。在构建组件库时，StoryBook 是一种简洁的组件可视化和文档化方式，而各种插件则使其更容易集成到您的不同工具和工作流程中。您甚至可以在单元测试中重复使用故事来确认细微的功能。

StyleGuidist

StyleGuidist是一个独立的 React 组件开发环境，并附带实时样式指南。它提供了一个支持热加载的开发服务器和一个实时样式指南，其中列出了组件的 propType，并展示了基于 .md 文件的可编辑使用示例。它支持 ES6、Flow 和 TypeScript，并且开箱即用地与 Create React App 配合使用。自动生成的使用文档可以帮助 Styleguidist 成为您团队不同组件的文档门户。

另请查看Noam Elboim的UI Zoo。

3. Codesandbox、Stackblitz 及其合作伙伴

组件 Playground是体验组件并学习其工作原理的便捷方式。您可以将 Playground 作为文档的一部分（或作为共享组件工作流程的一部分）使用，从而帮助您快速了解代码的工作原理，并决定是否要使用该组件。

Codesandbox

Codesandbox是一款在线编辑器，可用于快速创建和运行组件等小型项目。创建有趣的内容后，只需分享 URL 即可向他人展示。CodeSandbox 提供实时预览功能，可在您输入代码时显示结果，并内置了扩展程序，可集成到您的其他工具和开发工作流程中。

Stackblitz是一款由 Visual Studio Code 提供支持的“Web 应用在线 IDE”。与 Codesnadbox 类似，StackBlitz 也是一款在线 IDE，您可以在其中创建 Angular 和 React 项目，并通过 URL 链接进行共享。与 Codesandbox 类似，它会在您输入代码时自动安装依赖项、进行编译、打包和热重载。快来体验一下吧。

另请参阅：react-cosmos | react-live

4. Docz

Docz

Docz让您更轻松地构建基于 Gtabsy 的代码文档网站。它基于 MDX (*Markdown + JSX) *，利用 Markdown 编写组件文档。基本上，您可以在项目中的任何位置编写 .mdx 文件，Docz 会简化将其转换为您自己设计的部署到 Netlify 的文档门户的过程。很实用吧？
pedronauck/docz
*✍🏻记录您的内容从未如此简单！- pedronauck/docz*github.com

5. MDX 文档

MDX 文档

MDX-docs允许您使用 MDX 和 Next.js 来记录和开发 React 组件。您可以将 Markdown 与内联 JSX 混合使用来渲染 React 组件。您可以像平常一样编写 Markdown，并使用 ES 的 import 语法在文档中使用自定义组件。内置组件将 JSX 隔离的代码块渲染为可编辑代码的实时预览，由react-live提供支持。

看一看。jxnblk
/mdx-docs
*备忘录：使用 MDX 和 Next.js 记录和开发 React 组件 - jxnblk/mdx-docs*github.com

6. React Docgen

React DocGen是一个命令行工具和工具箱，用于从 React 组件文件中提取信息以生成文档。它使用ast-types和@babel/parser将源代码解析为 AST，并提供处理此 AST 的方法以提取所需信息。输出/返回值是一个 JSON blob/JavaScript 对象。它为通过 React.createClass、ES2015 类定义或函数（无状态组件）定义的 React 组件提供默认实现。功能强大。reactjs
/react-docgen
*一个命令行工具和工具箱，用于从 React 组件文件中提取信息以生成文档。……*github.com

鏂囩珷鏉ユ簮锛�https://dev.to/giteden/6-tools-for-documenting-your-react-components-like-a-pro-1gml