React 版 Storybook 教程
在您的开发环境中设置 Storybook
Storybook 在开发模式下与您的应用程序并行运行。它可以帮助您构建与应用程序的业务逻辑和上下文隔离的 UI 组件。本版 Storybook 简介教程适用于 React；其他版本适用于 React Native、Vue、Angular、Svelte 和 Ember。
设置 React Storybook
我们需要按照几个步骤在我们的环境中设置构建过程。首先，我们想使用 degit 来设置我们的构建系统。使用此包，您可以下载“模板”（部分构建的应用程序，具有一些默认配置）来帮助您快速跟踪您的开发工作流程。
让我们运行以下命令
# Clone the template
npx degit chromaui/intro-storybook-react-template taskbox
cd taskbox
# Install dependencies
yarn
💡 此模板包含本版教程所需的样式、资产和基本配置。
现在，我们可以快速检查应用程序的各种环境是否正常工作。
# Start the component explorer on port 6006:
yarn storybook
# Run the frontend app proper on port 5173:
yarn dev
我们的主要前端应用程序模式：组件开发（Storybook）和应用程序本身。
根据您正在处理的应用程序的哪个部分，您可能需要同时运行其中一个或多个。由于我们目前专注于创建单个 UI 组件，我们将坚持运行 Storybook。
提交更改
在此阶段，可以将我们的文件添加到本地存储库中。运行以下命令以初始化本地存储库，添加并提交我们到目前为止所做的更改。
git init
其次
git add .
然后
git commit -m "first commit"
最后
git branch -M main
让我们开始构建我们的第一个组件吧！