快速优雅的为React组件生成文档

在开发React组件时我们通常需要处理2个问题:

  1. 实例化这个组件以便调试
  2. 为这个组件编写使用文档以便更好的让别人知道怎么使用这个组件

最原始的方法莫过于开发时建一个页面用于调试,开发完后再为其手写文档。然而一个详细的React组件文档应该包括:

  1. 为各种使用场景编写demo以及对应的说明,同时附上demo的源码
  2. 有demo可以当场体验而不是使用者要自己写代码后才能体验这个组件
  3. 它的属性列表(propTypes)
  4. 它的实例方法列表

如果你想做到以上估计得花上你一天的功夫,我希望能把精力放在开发更好的组件上剩下的能毫不费劲的优雅完成,于是我做了本文的主角Redemo。 Redemo是用来简单优雅的完成以上问题让你专注于开发自己的组件,剩下的一切它都为你做好了。先看下Redemo为组件生成文档的效果图或直接体验部分实践中的项目redemo文档imuix

结构如下:

  • 最上面是可立即体验的组件demo,同时可以用在开发过程中调试组件
  • 组件实例下是这个demo的说明,支持markdown
  • 接下来是组件的属性列表(propTypes),支持markdown
  • 最后是这个demo的源码

为你的组件生成这个你几乎不用写超过10行简单的代码更不用单独为组件写文档。假设你编写了一个Button组件,让我们来为Button组件编写一个demo:

  1. 通过npm i redemo 安装 redemo
  2. 写下这些简单的代码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( <Redemo docgen={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可以提升你的效率,觉得有用可告诉你的朋友。

阅读原文

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏bboysoul

使用rvm来管理ruby版本

首先导入秘钥 gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A17031...

573
来自专栏流柯技术学院

Atom + activate-power-mode震屏插件Windows7下安装

Atom是Github推出的一个文本编辑器,搜索一下大概是给Web前端用的,最近比较火的是他的一个插件activate-power-mode,可以实现打字屏振效...

732
来自专栏web前端-

Swiper开篇

 swiper是一款轻量级以及免费的移动设备触控滑块的js框架,主要运用于移动端的操作,但也可以用于pc端页面效果制作,完全的开源免费,

642
来自专栏用户3030674的专栏

gif-drawable的使用及详解

下载gif-drawable包和Demo的链接:http://pan.baidu.com/s/1eQxVKRo

934
来自专栏Petrichor的专栏

Ctrl键组合

612
来自专栏WindCoder

Gravatar头像注册使用图文教程

看到新来的小伙伴们好多都没自己的个性头像,有时想从活跃读者/读者墙这里分辨下都好难,现在分享一篇设置头像的文章留给需要的人。由于懒的截那么多图了,就想去窃用下其...

632
来自专栏Zachary46

Android最火热修复实战

Sophix官网文档地址 https://help.aliyun.com/document_detail/53240.html

784
来自专栏令仔很忙

新手学JavaScript(三)----超酷消息警告框插件(SweetAlert)

今天给大家推荐一款不错的超酷消息警告框–SweetAlert;SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap。它...

852
来自专栏编程

淘宝iOS端圣诞节雪花实现分析

前言 1 我们产品在群里说淘宝APP有雪花了,于是我从被窝里掏出了手机看下,哇塞飘雪花了! 如图: ? 那我就分析一下他们的实现方式吧。 分析淘宝APP 2 2...

2007
来自专栏bboysoul

linux 终端下最简单的代理方式(proxychains)

我以前写过给linux终端设置代理 这个是用polipo这个工具把socks5代理转换成为http和https代理来实现终端下代理的,那么终端下有没有原生的使...

842

扫码关注云+社区