快速优雅的为React组件生成文档
在开发React组件时我们通常需要处理2个问题:
实例化这个组件以便调试
为这个组件编写使用文档以便更好的让别人知道怎么使用这个组件
最原始的方法莫过于开发时建一个页面用于调试,开发完后再为其手写文档。然而一个详细的React组件文档应该包括:
为各种使用场景编写demo以及对应的说明,同时附上demo的源码
有demo可以当场体验而不是使用者要自己写代码后才能体验这个组件
它的属性列表(
propTypes
)它的实例方法列表
如果你想做到以上估计得花上你一天的功夫,我希望能把精力放在开发更好的组件上剩下的能毫不费劲的优雅完成,于是我做了本文的主角Redemo。
Redemo是用来简单优雅的完成以上问题让你专注于开发自己的组件,剩下的一切它都为你做好了。先看下Redemo为组件生成文档的效果图或直接体验部分实践中的项目redemo文档、imuix:
结构如下:
最上面是可立即体验的组件demo,同时可以用在开发过程中调试组件
组件实例下是这个demo的说明,支持markdown
接下来是组件的属性列表(
propTypes
),支持markdown最后是这个demo的源码
为你的组件生成这个你几乎不用写超过10行简单的代码更不用单独为组件写文档。假设你编写了一个Button组件,让我们来为Button组件编写一个demo:
通过
npm i redemo
安装redemo
写下这些简单的代码
import Redemo from 'redemo';
import Demo from './demo';//为一个使用场景实例化Button组件的demo源码
// 使用docgen 从 Button 组件源码里分析出 propTypes
const docgen = require('!!docgen-loader!../button');
// 读取为Button组件编写的demo的源码
const code = require('!!raw-loader!../demo');
const doc = `为这个demo做一些说明,支持*markdown*`
render(
<Redemodocgen={docgen}doc={doc}code={code}
><Demo/>
</Redemo>
)
聪明的你大概会问以上代码并没有为Button属性编写文档,属性列表里的说明是哪来的?其实是通过react-docgen从Button组件源码里提取出来的。大家都知道为代码写注释是个好习惯方便维护和理解,而这些注释正好也可以放在文档里一举两得。所以你在编写Button组件时需要为propTypes
写注释,就像这样:
class Button extends Component {static propTypes = {/*** call after button is clicked,支持*markdown**/onClick: PropTypes.func,}...
}
想更深的了解redemo请看这里
希望redemo可以提升你的效率,觉得有用可告诉你的朋友。
阅读原文
快速优雅的为React组件生成文档相关推荐
- 如何快速方便的生成好看的接口文档(apipost生成文档)
一键生成文档 我们在"2分钟玩转APIPOST"一讲中,简单介绍了如何生成并分享接口文档: 点击分享文档 复制并打开文档地址就可以看到了完整的接口文档. 本节课主要是讲解一些需 ...
- python使用sphinx自动生成文档
python代码注释风格有很多,比较主流的有reStructuredText风格.numpy风格.google风格,pycharm默认提示reStructuredText风格 reStructured ...
- 从SQL Server生成文档
目录 介绍 文档生成方法1--VBA 文档生成方法2--报告包 文档生成方法3--文档生成软件 操作中的文档生成软件 第1步:将表数据导出为XML或JSON 第2步:将XML / JSON填充到文档模 ...
- WebApi实现验证授权Token,WebApi生成文档等 - CSDN博客
原文:WebApi实现验证授权Token,WebApi生成文档等 - CSDN博客 [csharp] view plain copy print? using System; using System ...
- php代码自动生成文档-phpDocumentor
概述 PHPDocumentor 能够由你的代码自动生成文档.是一个用PHP写的强盛的文档主动生成对象,可以直接使用命令来处理.对有范例解释的php顺序,可以快速生成具有布局清楚.彼此参照.索引等功效 ...
- java接口废弃注释_Spring Boot如何让Web API自动生成文档,并解决swagger-annotations的API注解description属性废弃的问题...
前后端分离的系统架构中,前端开发人员需要查看后端WEB API的文档来进行开发.采用后端API文档自动生成的方式,可以大幅提高开发效率.swagger是一个被广泛使用的文档自动生成工具,可以与多种编程 ...
- IDEA 版 API 接口神器来了,一键生成文档,嘎嘎香!
先看效果,这个文档就是通过该 IDEA 插件自动生成的,你能相信吗? 文档链接:https://petstore.apifox.cn 每个开发都不想写文档.当你不想写接口文档时,可以通过安装插件在 I ...
- Java使用smart-doc自动生成文档
作为后端开发,写接口文档一直是一个很头痛的问题,今天推荐一个开源工具smart-doc,这个工具基于java原生的注释生成api文档,无需大量的注解配合使用. 官方地址:https://gitee.c ...
- Doxygen——根据代码注释生成文档的工具
文章目录 1 简介 2 安装 3 使用 3.1 注释代码 3.2 使用doxywizard生成文档 4 用例 4.1 OpenCV 4.2 Apollo 5 参考 1 简介 Doxygen是一个可以根 ...
最新文章
- Linux下的示例程序
- 由于使用zen coding导致myeclipse6.5中使用Alt+/不自动提示的解决办法
- 小白自学深度学习——目录
- 配置环境变量OpenJDK和OracleJDK区别
- 吴晓波之后,“罗辑思维”冲击科创板IPO!网友笑称单口相声也想上市?
- 小技巧,把execl.exe转换成dll
- 毛星云opencv之用鼠标进行交互操作
- 鲲鹏BoostKit虚拟化使能套件,让数据加密更安全
- vrep系列教程(一)——熟悉vrep
- 1125 斐波那契数列
- saltstackmysql return报错
- 四、六级考试的标准分计算方法-“710分转换表”
- 外汇买入价、外汇卖出价、现钞买入价有什么区别?
- 数学,离一个程序员有多近?
- 主机上连接到 vmware虚拟机的三种方式
- 论文阅读:Push the Limit of Acoustic Gesture Recognition
- 设计时颜色调配参考(小资料)
- 一文解惑,对于SCI论文投稿Under Review状态的一万种解读
- NISP一级考试相关知识点
- php 编辑器 插入视频,苗景云的博客-PHPCMS V9编辑器中新增上传mp4视频(上传视频并插入HTML5的video标签)的功能...
热门文章
- ubuntu10.04 解决打开windows记事本.txt文件乱码的方法
- ASP.NET的SEO:使用.ashx文件——排除重复内容
- 打开word或者office程序报错:Microsoft Visual C++ Runtime Library. Runtime Error!
- [导入]ASP.Net环境下使用Jmail组件发送邮件
- Nginx 之五: Nginx服务器的负载均衡、缓存与动静分离功能
- css布局中的百分比布局
- 项目微管理13 - 新人
- 【Jmeter】 Report Dashboard 生成html图形测试报告
- 如何实现网站文件动静分离
- TOPCODER SAM 686 div1 300