Storybook React 教程
在你的开发环境下设置 Storybook
此社区翻译尚未更新为最新的Storybook版本。通过应用此翻译的中文指南中的更改来帮助我们更新它。 Pull requests 欢迎他们.
Storybook 是在开发模式下 与 您的应用程序一起运行的. 它可以帮助您构建 UI 组件,并与 应用程序的 业务逻辑和上下文 隔离开来. 本期"学习 Storybook"适用于 React; Vue和Angular版本即将推出.
设置 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）和 应用程序本身.
根据您正在处理的应用程序的哪个部分，您可能希望同时运行其中一个或多个。由于我们目前的重点是创建单个 UI 组件，因此我们将坚持运行 Storybook。
重用 CSS
本例子Taskbox 重用了 GraphQL 和 React Tutorial 示例应用中的设计元素,所以我们不需要在本教程中编写 CSS. 我们只需将 LESS 编译为单个 CSS 文件, 并将其包含在我们的应用程序中. 复制和粘贴这个编译的 CSS根据 CRA的规则 进入 src/index.css 文件.
如果要修改样式，这里 提供了源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
添加完样式和资源后，程序会渲染出一些奇怪的效果。没有关系，我们目前不在开发该应用，我们从构建第一个组件开始！