Storybook6.0.13 - React 版安装

2020-08-20 888 阅读1分钟

快速搭建 react 环境

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

  npx create-react-app <project-name>

安装storybook

官网上自动安装（感觉不太好用）

  npx sb init

自动安装

  npx -p @storybook/cli sb init

如果你使用 create-react-app, 你应当使用以下命令

  npx -p @storybook/cli sb init --type react_scripts

手动安装（推荐使用）

依次安装

  npm install @storybook/react --save-dev
  npm install react react-dom --save
  npm install babel-loader @babel/core --save-dev

在 package.json 添加 npm 命令

  "scripts": {
    "storybook": "start-storybook"
  }
  // 或者使用 ———— 配置启动端口号 9001
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook"
  }

在根目录中创建 .storybook/main.js

module.exports = {
  addons: ['@storybook/addon-actions'],
  stories: ['../src/**/*.stories.[tj]s']
};

创建第一个 Store, 在 str 新建文件夹 stories/Button.stories.js

  import React from 'react';
  import { Button } from '@storybook/react/demo';

  export default { title: 'Button' };

  export const withText = () => <Button>Hello Button</Button>;

  export const withEmoji = () => (
    <Button>
      <span role="img" aria-label="so cool">
        😀 😎 👍 💯
      </span>
    </Button>
  );

到这里手动安装完成 ---------------------

运行

  npm run storybook