手把手实战react + storybook组件库

引入

在UI组件库的开发过程当中，如何方便的展现组件，测试组件，编写文档呢？storybook就提供了这样一种工具，利用它咱们能够更方便地进行UI组件开发。最近一直在研究react，react和storybook的碰撞会是怎么样的呢。下面将从零开始，运用storybook手把手撸一个react组件。

快速搭建react环境

首先，基于create-react-app快速搭建react环境

storybook有单独的webpack配置，有单独的服务器。它的webpack配置相似于create-react-app。

npm i -g create-react-app
create-react-app storybook-demo
cd storybook-demo
yarn start
复制代码

在命令行工具中运行上述命令，快速生成了一个已经配置好react环境的storybook-demo项目文件，进入该项目文件，经过yarn start启动webpack服务器，操做无误的话，浏览器将会自动打开以下页面：

安装storybook

搭配好react环境后，安装storybook插件

npm i --save-dev @storybook/react
复制代码

配置npm scripts

以前已经提到过，storybook有单独的服务器，能够在npm scripts添加相关命令脚本，方便以后启动服务。

打开package.json，在scripts属性中添加storybook命令，以下：

{
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook"
  }
}
复制代码

注意，脚本中-p 9001表示启动服务的端口号是9001，-c .storybook表示配置文件的目录，这里将配置文件设置为根目录下的.storybook文件夹。

建立配置文件config.js

在项目根目录中新建.storybook目录，并在里面添加config.js文件。 基本的配置主要是用来告诉storybook你的stories的存放位置。 咱们将stories放在src目录下。

// config.js
import { configure } from '@storybook/react';

function loadStories() {
  require('../src/stories/index.js');
}

configure(loadStories, module);

// 
复制代码

建立stories

接下来登场的就是stories，这是storybook的核心所在。 打开src目录，建立stories文件夹，同时能够建立components文件夹。 在components中，建立一个Button.js组件，在stories添加button.stories

// .storybook/config.js中修改路径
import { configure } from '@storybook/react';

function loadStories() {
  require('../src/stories/button.stories.js');
}

configure(loadStories, module);

// src/stories/button.stories.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import {Button} from '../components/Button';

storiesOf('Button', module)
  .add('基本用法',() => (
    <Button>按钮</Button>
  ))
  
// src/components/Button.js
import React from 'react'

export class Button extends React.Component{
  constructor (props) {
    super(props)    
  }

  render () {
    return (
      <button style={{backgroundColor: '#fff', border: '1px solid #ccc'}}>{this.props.children}</button>
    )
  }
}

复制代码

这里，在config.js中仅引入了button的story，若是组件比较多，有没有批量引入stories的方法呢？ 可使用require.context方法，此处将src/stories文件夹中以.stories.js为后缀的文件批量导入。

require.context是webpack的方法，具体参考require.context

import { configure } from '@storybook/react';

const req = require.context('../src/stories', true, /\.stories\.js$/)

function loadStories() {
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module);
复制代码

启动storybook服务

yarn storybook
复制代码

在浏览器中打开http://localhost:9001，成功后会出现如下页面，证实你成功了！

添加额外组件信息

想要造成一个完整的组件文档，须要展现出组件的各类信息，上面展现的信息是远远不够的。为此，能够安装addon-info插件。插件更多信息参考addon-info

npm i -D @storybook/addon-info
复制代码

在button.stories.js文件中引入withInfo方法，参数能够是字符串，支持markdown

// src/stories/button.stories.js
import { withInfo } from '@storybook/addon-info';

storiesOf('Button', module)
  .add('基本用法',
    withInfo(`
      description or documentation about my component, supports markdown
    
      ~~~js
      <Button>测试按钮</Button>
      ~~~
    
    `)(() =>
      <Button>测试按钮</Button>
    )
  )
复制代码

此时浏览器页面更新以下。点击右侧的show info按钮，能够看到咱们添加的组件信息。

使用markdown

能够将组件信息抽出来放在md文件中。直接上代码：

// src/stories/button.md
description or documentation about my component, supports markdown
<Button>测试按钮</Button>
复制代码

// src/stories/button.stories.js
import { withInfo } from '@storybook/addon-info';
import button from './button.md'

storiesOf('Button', module)
  .add('基本用法',
    withInfo({
      markdown: button
    })(() =>
      <Button>测试按钮</Button>
    )
  )
复制代码

组件信息单页显示

如何直接让组件信息在当前页面显示呢？在withInfo配置中添加inline:true

storiesOf('Button', module)
  .add('基本用法',
    withInfo({
      inline: true,
      markdown: button
    })(() =>
      <Button>测试按钮</Button>
    )
  )

复制代码

最后

storybook功能还有不少，有兴趣的小伙伴能够再深刻研究研究。

storybook官网：storybook

更多的addon插件能够参考：addon插件集合