内容简介:为了提升开发效率,创建一套 UI 组件库是一种较为有效的方式之一:可以减少重复工作、提高可复用,所以现在越来越多团队开始创建自己的 UI 组件库。较早的 Twitter 的考虑到前期开发 UI 组件的工作量及后期维护成本,我认为在大厂开源 UI 组件库的基础上个性化色彩(一般都提供颜色定制)、增加团队的个性化需求组件、减少不需要的组件是个不错的主意。有了团队的 UI 组件库就少不了使用文档,毕竟文档还是比口口相传要靠谱的多。这里介绍一个可以快速创建 React UI 组件库使用、演示文档的项目:
Docz 用 MDX 写 React UI 组件文档
前言
为了提升开发效率,创建一套 UI 组件库是一种较为有效的方式之一:可以减少重复工作、提高可复用,所以现在越来越多团队开始创建自己的 UI 组件库。较早的 Twitter 的 Bootstrap 虽然只能称为 UI 库,但也大大提升了开发效率。后面 MVVM
大行其道 ,前端终于可以把 HTML、CSS、JS 放在一起开发包含 UI 、交互真正意义上的组件了,现在有基于 React
的 Material-UI 、国内阿里金服基于 React
的 Ant Design 、饿了么基于 Vue.js
的 Element 、TalkingData 基于 Vue.js
的 iView 等。有了这些 UI 组件,让前端开发变得前所未有的方便,完成一个项目就像是拿一块块的积木(组件)堆成一个完整项目。
考虑到前期开发 UI 组件的工作量及后期维护成本,我认为在大厂开源 UI 组件库的基础上个性化色彩(一般都提供颜色定制)、增加团队的个性化需求组件、减少不需要的组件是个不错的主意。
有了团队的 UI 组件库就少不了使用文档,毕竟文档还是比口口相传要靠谱的多。这里介绍一个可以快速创建 React UI 组件库使用、演示文档的项目: Docz 。 Docz 的特色是零配置、简单、快速,它使用 Markdown
语法的扩展 MDX (在 Markdown 里引入 React 组件并渲染出组件)来书写文档,对于熟悉 Markdown
的开发者是可以直接上手的。下面贴一张官方的图看看有多简单:
左边是创建的 MDX
文档,右边是 Docz 渲染出的组件及组件代码。
是不是很方便?那下面简单介绍一下使用步骤。
使用
1. 在你的项目里安装 Docz:
yarn add docz --dev 或者 npm install docz --save-dev
2. 创建 .mdx
文件并输入:
--- name: Button --- import { Playground, PropsTable } from 'docz' import Button from './' # Button <PropsTable of={Button} /> ## Basic usage <Playground> <Button>Click me</Button> <Button kind="secondary">Click me</Button> </Playground>
3. 运行:
yarn docz dev
然后就完成了一个简单的 Button 组件的演示、使用文档。
更多详情:http://www.docz.site/introduction/getting-started
配置
零配置方便是方便,但有时想界面个性化点还是很费事的(官方提供 Themes 支持,但现仅有一套官方的默认主题),下面分享一个通过引入本地 CSS 的方式来改变默认主题的配置。
1. 创建配置文件 doczrc.js
,增加 htmlContext 内容。
更多配置:https://www.docz.site/documentation/project-configuration
export default { htmlContext: { head: { links: [ { rel: 'stylesheet', href: '/base.css' } ] } } }
2. .docz
目录下创建 public
文件夹并创建 base.css
,在 base.css
里写自己的样式覆盖默认的即可。
最后
- Docz 简单好用,但现在只支持 React。
- Storybook 是一个更强大的集组件开发、查看、测试的文档工具,支持:
- React
- React Native
- Vue
- Angular
- Polymer
- Mithril
- Marko
- HTML
- Svelte
- Riot
- Docsify : 搭配 Vuep 写 Playground 。
转载请注明出处: https://blog.givebest.cn/other/2018/09/15/react-ui-component-docz-mdx.html
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- [ Laravel 5.7 文档 ] 基础组件 —— 日志
- [ Laravel 5.7 文档 ] 基础组件 —— 视图
- [ Laravel 5.7 文档 ] 基础组件 —— 路由
- [ Laravel 5.8 文档 ] 基础组件 —— 路由
- [ Laravel 5.8 文档 ] 基础组件 —— 视图
- [ Laravel 5.7 文档 ] 基础组件 —— 错误处理
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。