storybook 使用 （react-create-app ts篇）

storybook 使用 （react-create-app ts篇）

我是 npm 的 搬运工

只谈使用

storybook 版本6.5

Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.

---

storybook 安装

快速查看

1.create-react-app xxx --template typescript
2.npx storybook init
3.npm run storybook

初始化后目录结构类似如下
│  header.css
│  Header.stories.tsx
│  Header.tsx
│  Introduction.stories.mdx
│  page.css
│  Page.stories.tsx
│  Page.tsx
│  
├─assets

---

优化目录结构更加清晰

├─assets
│
├─Button
│      index.css
│      index.stories.tsx
│      index.tsx
│
└─Card
        index.css
        index.stories.tsx
        index.tsx