Storybook React 教程

在你的开发环境下设置 Storybook

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 -p @storybook/cli sb 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 文件夹下。在终端执行以下命令:

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

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

Next Chapter
简单 组件
单独构建一个简单的组件