在开发React组件时我们通常需要处理2个问题:
最原始的方法莫过于开发时建一个页面用于调试,开发完后再为其手写文档。然而一个详细的React组件文档应该包括:
propTypes
)如果你想做到以上估计得花上你一天的功夫,我希望能把精力放在开发更好的组件上剩下的能毫不费劲的优雅完成,于是我做了本文的主角Redemo。 Redemo是用来简单优雅的完成以上问题让你专注于开发自己的组件,剩下的一切它都为你做好了。先看下Redemo为组件生成文档的效果图或直接体验部分实践中的项目redemo文档、imuix:
结构如下:
propTypes
),支持markdown为你的组件生成这个你几乎不用写超过10行简单的代码更不用单独为组件写文档。假设你编写了一个Button组件,让我们来为Button组件编写一个demo:
npm i redemo
安装 redemo
聪明的你大概会问以上代码并没有为Button属性编写文档,属性列表里的说明是哪来的?其实是通过react-docgen从Button组件源码里提取出来的。大家都知道为代码写注释是个好习惯方便维护和理解,而这些注释正好也可以放在文档里一举两得。所以你在编写Button组件时需要为propTypes
写注释,就像这样:
class Button extends Component {
static propTypes = {
/**
* call after button is clicked,支持*markdown*
*/
onClick: PropTypes.func,
}
...
}
想更深的了解redemo请看这里 希望redemo可以提升你的效率,觉得有用可告诉你的朋友。