最近打算参考(抄袭)几个风格的站点，发现并没有相关的 UI 库就打算写一个轮子，于是本篇文章诞生了 这里只是用于示例和初始教程

1. 安装 nodejs 并且安装 npm 或者你喜欢的工具 (略)

2.创建项目

 
#构建一个项目 my-app 是你的项目名
[root@localhost ~]# npx create-react-app my-app

这时候你会发现目录下多了一个 my-app 的文件夹,cd 进去，安装 storybook

 
[root@localhost ~]# cd my-app
#添加 storybook 
[root@localhost ~]# npx sb init
#在开发模式下启动 storybook 
[root@localhost ~]# npm run storybook

storybook 把其示例 story 放在了 my-app/src/stories 里，如果你想对命名或者存储修改，那可以到 .storybook/main.js 里进行修改。然后接下来可以把这个 stories 目录给删掉了。第一步的准备工作已经完成，可以来编写第一个组件了
假设我们组件放在了 src/components ,那就在 components 创建第一个 Button.js 按钮组件

 
import React from 'react';
export const Button = props => (<button >{props.label}</button>);

然后我们再创建一个 Button.stories.js 文件到 components 里

 
import React from 'react';
import { Button } from './Button';
//这里定义我们使用的 story 标题和要使用的组件
export default {
  component: Button,
  title: 'Components/Button',
}
const Template = (args) => <Button {...args} />;
export const Default = Template.bind({});
Default.args = {
  label: '这是一个按钮',
};

OK 返回 storybook 就能看见你的按钮了 接下来的下一篇文章再讲