Back to Intro to Storybook
Chapters
  • 开始吧
  • 简单 组件
  • 合成组件
  • Data
  • 页面
  • 部署
  • 测试
  • 插件
  • 总结
  • 帮助我们

Storybook React 教程

在你的开发环境下设置 Storybook
此社区翻译尚未更新为最新的Storybook版本。通过应用此翻译的中文指南中的更改来帮助我们更新它。 Pull requests 欢迎他们.

Storybook 是在开发模式下 与 您的应用程序一起运行的. 它可以帮助您构建 UI 组件,并与 应用程序的 业务逻辑和上下文 隔离开来. 本期"学习 Storybook"适用于 React; Vue和Angular版本即将推出.

Storybook and your app

设置 React Storybook

我们将需要通过几个步骤设置环境。首先,我们需要使用Create React App (CRA) 来设置我们的构建系统,并开启 Storybook 以及 Jest 在我们创建的应用程序中进行测试。 让我们运行以下命令:

# Create our application:
npx create-react-app taskbox

cd taskbox

# Add Storybook:
npx storybook init
在这个版本的教程中,我们将使用 yarn 来运行大多数命令。 如果你已经安装了 Yarn,但更偏向使用 npm 替代,不必担心,你仍然可以顺利完成本教程。只需要在上面的命令后添加 --use-npm 标志,CRA 和 Storybook 都将基于此初始化。并且在完成本教程时不要忘记调整其中的命令为 npm 中对应的命令。

我们可以快速检查应用程序的各种环境是否正常运行:

# Run the test runner (Jest) in a terminal:
yarn test --watchAll

# Start the component explorer on port 6006:
yarn storybook

# Run the frontend app proper on port 3000:
yarn start
你或许已经发现了我们给 test 命令添加了 --watchAll 标志,这是故意的,请不用担心,这点小的改动将确保我们应用程序的所有测试用例运行并一切正常。当你在学习本套教程的过程中,将会将你介绍不同的测试场景,因此你可能会考虑为 package.json 中的测试脚本添加该标志以确保你的完整的测试用例能够运行。

我们的三个前端应用程序模式: 自动化测试(Jest),组件开发(Storybook)和 应用程序本身.

3 modalities

根据您正在处理的应用程序的哪个部分,您可能希望同时运行其中一个或多个。由于我们目前的重点是创建单个 UI 组件,因此我们将坚持运行 Storybook。

重用 CSS

本例子Taskbox 重用了 GraphQL 和 React Tutorial 示例应用中的设计元素,所以我们不需要在本教程中编写 CSS. 我们只需将 LESS 编译为单个 CSS 文件, 并将其包含在我们的应用程序中. 复制和粘贴这个编译的 CSS根据 CRA的规则 进入 src/index.css 文件.

Taskbox UI

如果要修改样式,这里 提供了源LESS文件。

添加资源

为了匹配预期的设计,需要你下载字体及图标目录到 src/assets 文件夹下。在终端执行以下命令:

Copy
npx degit chromaui/learnstorybook-code/src/assets/font src/assets/font
npx degit chromaui/learnstorybook-code/src/assets/icon src/assets/icon
我们使用 degit 从 Github 下载文件夹。如果想要手动,可以从 这里 抓取。

添加完样式和资源后,程序会渲染出一些奇怪的效果。没有关系,我们目前不在开发该应用,我们从构建第一个组件开始!

Keep your code in sync with this chapter. View bf3514f on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
简单 组件
单独构建一个简单的组件
✍️ Edit on GitHub – PRs welcome!
Join the community
6,536 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI