最近打算参考(抄袭)几个风格的站点,发现并没有相关的 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 就能看见你的按钮了 接下来的下一篇文章再讲