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

开课吧开课吧锤锤2021-07-13 14:40

React鼓励我们用组件来构建模块程序。模块化为我们带来了很多好处,包括提高了可重用性。但是,如果您想贡献和重用组件,那么最好让您的组件易于查找、理解和使用。您必须把它记录下来。当前,使用工具可以帮助我们实现文档工作流程的自动化,使我们的组件文档变得丰富、可视化、交互性强,一些工具甚至把这些文档组合成共享组件的工作流程的组成部分,今天小编就为大家介绍一下行业界流行的工具。  

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

1.Bit  

共享组件的平台  

Bit不仅是一个将组件文档化的工具,它还是一个开源工具,支持你使用所有文件和依赖项封装组件,并在不同应用程序中开箱即用地运行它们。  

在Bit,你可以跨应用地共享和协作组件,你所有共享组件都可以被发现,以便你的团队在项目中查找和使用,并轻松共享他们自己的组件。  

在Bit中,你共享的组件可以在你们团队中的组件共享中心找到,你可以根据上下文、bundle体积、依赖项搜索组件,你可以非常快地找到已经渲染好的组件快照,并且选择使用它们。  

浏览bit.dev上的组件  

当你进入组件详情页时,Bit提供了一个可交互的页面实时渲染展示组件,如果该组件包含js或md代码,我们可以对其进行代码修改和相关调试。  

找到想要使用的组件后,只需使用NPM或Yarn进行安装即可。你甚至可以使用Bit直接开发和安装组件,这样你的团队就可以协作并一起构建。  

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

快速上手:Sharereusablecodecomponentsasateam·Bit  

teambit/bit  

2.StoryBook&Styleguidist  

StoryBook和StyleGuidist是非常棒的项目,可以帮助我们开发独立的组件,同时可以直观地呈现和文档化它们。  

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

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

类似的工具还有UiZoo  

3.Codesandbox,Stackblitz&friends  

组件在线编译器是一种非常巧妙的展示组件和理解他们如何运行的工具。当你可以将它们组合为文档的一部分(或作为共享组件的一部分)时,在线编译器可帮助你快速了解代码的工作方式并决定是否要使用该组件。  

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

Stackblitz是一个由VisualStudioCode提供支持的“Web应用程序在线IDE”。与Codesnadbox非常相似,StackBlitz是一个在线IDE,你可以在其中创建通过URL共享的Angular和React项目。与Codesandbox一样,它会在你编辑时自动安装依赖项,编译,捆绑和热重载。  

其他类似工具:  

11ReactUIComponentPlaygroundsfor2019  

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.ReactDocgen  

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

reactjs/react-docgen  

callstack/component-docs  

以上就是开课吧广场小编为大家整理发布的“使React组件如文档般展示的6大工具”一文,更多Web教程相关内容尽在开课吧广场Web教程频道。

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享
全部评论快来秀出你的观点
登录 后可发表观点…
发表
暂无评论,快来抢沙发!
云开发实战特训营