虽然像React这样的基于组件的UI库简化了web开发，但它们也引入了测试和调试等新的复杂性。
React组件是为了支持多个用例而构建的，并且通常是相互依赖的，这意味着如果你走错了弯路，你就有可能破坏应用程序。
Storybook使开发人员能够使用独立的构建块独立地构建UI组件。使用Storybook，您可以使用您最喜欢的框架快速创建UI组件，同时还提供一个整洁的接口来处理每个组件。
Storybook是UI组件的开发环境，它允许您在主应用程序之外的环境中创建和展示组件。这允许您一次只处理一个模块，开发整个ui，而不需要复杂的开发堆栈。
Storybook还允许您记录、重用和测试用户界面组件。除此之外，它使构建web应用程序更快、更高效。
该工具有一个广泛的插件生态系统，可以帮助扩展和调整您的应用程序。此外，它还集成了最流行的JavaScript框架，如React、Vue甚至Ruby。
你应该在React中使用Storybook吗?
与React一样，Storybook是记录UI组件和设计系统的一种引人注目的可视化方式。
除此之外，它还是呈现技术文档和演示实现细节的优秀工具。它还有助于在用户有机会与新配置进行交互之前测试它们。
但这还不是全部。对于想要构建更好组件的开发者来说，Storybook有很多好处:
- 简化组件构建:Storybook创建独立运行的“故事”或小组件，然后可以将其添加到应用程序中。
- 防止重复工作:有时，开发人员创建一个组件，却发现代码库中已经有类似的东西了。有了Storybook，每个组件都被记录下来，其他人也可以访问，从而避免了重复工作。
- 创建一个活的风格指南:Storybook的代码模板是你可以使用和开发的活的代码块，确保开发人员在构建一个web应用程序时不会使用模型或类似的容易出错的模板。
- 隔离构建组件:隔离开发可确保您只关注正在构建的组件。你不需要考虑应用的其他部分，因为你在Storybook中构建的每个组件都在自己的文件夹中，那里有用于实现和测试的文件。
构建第一个 Storybook 组件
Storybook使用组件驱动开发(CDD)方法来创建UI组件。按照这种方法，您可以模块化地构建，从基本组件开始，逐步将它们组合成复杂的屏幕和应用程序。
此外，组件使您能够使用可互换的部分并在不影响应用程序的业务逻辑的情况下交换它们，从而允许您将组件拆开，并根据需要将它们重新组合到不同的ui中。
既然您已经了解了组件驱动的开发，并且已经看到了Storybook的好处，那么让我们开始吧。如果你按照这个食谱做，我相信你会得到美味的配料。
准备
这是你开始使用Storybook时需要做的:
- 基本了解React、JavaScript和TypeScript
- 一个代码编辑器，比如Visual Studio code
- Node.js安装在您的机器上
- NPM安装在你的机器上
如何安装 Storybook
关于Storybook和React的一大亮点便是它们能够很好地结合在一起。事实上，Storybook会检测到你正在使用Create React App，并为你安装依赖项。这是有帮助的，特别是如果你是一个初学者。
在本教程中，我们使用的是Next.js。当然，你可以使用Vue、Angular和其他框架，但为了简单起见，我们将使用React。
1. 使用 Next.js 创建 React APP
在我们开始Storybook的冒险之前，我们首先需要创建一个正在运行的Next.js应用程序，以便我们可以在其中安装Storybook。
如果你还没有一个React应用来添加Storybook，你可以先通过初始化Next.js应用来创建一个。在你的终端中，运行以下命令:
代码语言：javascript复制npx create-next-app <your-app-name>
上面的命令将在运行它的目录中生成一个新的Next.js应用程序，并且在运行提示时将具有您提供的相同名称()。
例如，如果你将它命名为nextjs-storybook-example，你应该在你的终端中运行以下命令来导航到它:
代码语言：javascript复制cd nextjs-storybook-example
2. 在React应用中初始化Storybook
现在我们已经启动并运行了React应用程序，我们需要安装并设置Storybook的本地实例。
进入应用程序的目录后，运行以下命令安装Storybook:
代码语言：javascript复制npx sb init
这将快速建立一个工作的Storybook实例所需的样板。Npx是自npm@5.2.0以来安装在npm旁边的npm包运行器。
一旦我们建立了Storybook实例，让我们确保所有必需的依赖项都通过运行来安装:
代码语言：javascript复制npm install
3. 在本地运行 Storybook
现在让我们运行Storybook实例:
代码语言：javascript复制npm run storybook
一旦命令成功运行，Storybook应该开始在http://localhost:port/上运行:
4. 为Storybook创建第一个组件
让我们创建一个横幅组件来添加到应用程序中。要做到这一点，让我们打开我们的项目文件夹，进入我们的代码编辑器，我们可以看到/src目录和/stories文件夹，这是运行sb init时自动生成的。
在这个文件夹中创建一个名为Banner.jsx的文件。
在这个文件中，让我们添加以下代码:
代码语言：javascript复制/** @jsxImportSource @emotion/react */
import React from "react";
export default function Banner({ variant = "info", children }) {
return <aside> {children} </aside>;
}
Banner.propTypes = {
variant: "info" | "congrats" | "documentation" | "danger",
};
PropTypes或TypeScript类型被Storybook用来自动生成故事中的一些文档。
现在我们有了无样式的组件，让我们用一些CSS给它增添一些风味。
一个CSS对象可以用来动态地在不同的变量上应用不同的样式。例如，Emotion是一个支持用JavaScript编写CSS对象的库。我们将在本教程中使用它来帮助我们设计组件。
你可以在Node中输入以下命令来安装Emotion:
代码语言：javascript复制npm install @emotion/react
为了让Emotion能够在JS中正确处理CSS，我们应该在Banner的顶部添加以下一行。jsx文件:
代码语言：javascript复制/** @jsxImportSource @emotion/react */
下面是一个如何根据道具的值将不同的样式应用到React组件的例子。这将使我们的banner组件能够根据它的状态改变样式。
代码语言：javascript复制/** @jsxImportSource @emotion/react */
import React from "react";
export default function Banner({ variant = "info", children }) {
const beforeStyles = {
width: 35,
height: 35,
display: "inline-flex",
justifyContent: "center",
position: "absolute",
left: "-1.2rem",
borderRadius: "50%",
alignItems: "center",
top: "-0.8rem",
};
const variantStyles = {
info: {
borderLeft: "4px solid #b4aaff",
backgroundColor: "rgba(224, 226, 255, 0.5)",
color: "#2a2135",
"&:before": {
content: '"
