值得了解的6大React组件文档化工具（推荐收藏）(2)-木庄网络博客

类似的工具还有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

更多编程相关知识，请访问：编程入门！！

以上就是值得了解的6大React组件文档化工具（推荐收藏）的详细内容，更多文章请关注木庄网络博客！

返回前面的内容