React 与 Storybook 的交互
Interaction between React and Storybook
我们已经知道 Storybook 用于构建 UI 组件并将它们与业务逻辑隔离开来。我已经实现了 StoryBook 的一些基本示例。
现在我很好奇 Storybook 的内部行为意味着 它如何与 React 主应用程序交互，从入口开始执行 npm run storybook 命令后 Storybook 的工作流程点退出?
我也想知道为什么 运行 故事书不使用 npm start？
谢谢:)
Storybook 不与您的 React 应用程序交互。
它只是您项目中组件的库。
它为您提供了多种工具来创建组件使用示例。
这就是为什么您需要与实际的 React 应用程序分开编写故事。
所有这些故事都与您的应用没有任何交集。
命令 npm run storybook 只需 uild 您写的所有故事，uild 对 ui 很有用，这样您就可以轻松浏览它们。
当您拥有庞大的代码库时，这将变得非常有用。
因为很难了解项目中的每个组件及其工作原理。
Storybook 为我们提供了一种工具，使所有组件更加结构化。
您也可以使用 npm start。这只是关于如何在 package.json.
中配置脚本
Storybook doesn't interact with the main React Application.
Storybook 仅用于构建 UI 组件并使它们与 React 应用程序（业务逻辑）隔离。当您通过 npm run storybook (windows) 或 yarn storybook(mac/ubuntu) 命令 运行 故事书时，这些组件可以很容易地可视化。默认情况下，它 运行 在不同的端口上，不同于 npm start 运行 在 3000 端口上。
然后将这些组件导入到主 React 应用程序中。 React 将根据需求使用这些组件。 Storybook 使您能够浏览您构建的所有 UI 组件，然后 React 将使用它。这允许您一次开发一个组件。
What will happen when you execute the command npm run storybook?
此命令首先将搜索 main.js，如果找到，它将查找所有扩展为 stories.js 的文件，这些文件只不过是您构建的故事。然后它将以任意顺序或指定顺序创建一个故事列表，默认情况下将显示在 6006 端口的故事书网页中。
Why we don't use npm start for running the storybook?
我们可以使用 npm start 来 运行 故事书，但您需要在“脚本”下的 package.json 文件中配置它，如下所示。
"scripts": {
"start": "start-storybook -p 6006 -s public"
}
此处 public 表示这本故事书不需要任何身份验证即可 运行 安装它。现在，如果你这样做 npm start 它只会 运行 故事书给你，而不是反应应用程序。这个故事书以后可以在不同的 React 应用中使用。
我建议，如果您要实现故事书的一些基本概念，那么最好 运行 将两者分别放在不同的端口上。
我们已经知道 Storybook 用于构建 UI 组件并将它们与业务逻辑隔离开来。我已经实现了 StoryBook 的一些基本示例。
现在我很好奇 Storybook 的内部行为意味着 它如何与 React 主应用程序交互，从入口开始执行 npm run storybook 命令后 Storybook 的工作流程点退出?
我也想知道为什么 运行 故事书不使用 npm start？
谢谢:)
Storybook 不与您的 React 应用程序交互。
它只是您项目中组件的库。
它为您提供了多种工具来创建组件使用示例。
这就是为什么您需要与实际的 React 应用程序分开编写故事。
所有这些故事都与您的应用没有任何交集。
命令 npm run storybook 只需 uild 您写的所有故事，uild 对 ui 很有用，这样您就可以轻松浏览它们。
当您拥有庞大的代码库时，这将变得非常有用。
因为很难了解项目中的每个组件及其工作原理。
Storybook 为我们提供了一种工具，使所有组件更加结构化。
您也可以使用 npm start。这只是关于如何在 package.json.
Storybook doesn't interact with the main React Application.
Storybook 仅用于构建 UI 组件并使它们与 React 应用程序（业务逻辑）隔离。当您通过 npm run storybook (windows) 或 yarn storybook(mac/ubuntu) 命令 运行 故事书时，这些组件可以很容易地可视化。默认情况下，它 运行 在不同的端口上，不同于 npm start 运行 在 3000 端口上。
然后将这些组件导入到主 React 应用程序中。 React 将根据需求使用这些组件。 Storybook 使您能够浏览您构建的所有 UI 组件，然后 React 将使用它。这允许您一次开发一个组件。
What will happen when you execute the command
npm run storybook?
此命令首先将搜索 main.js，如果找到，它将查找所有扩展为 stories.js 的文件，这些文件只不过是您构建的故事。然后它将以任意顺序或指定顺序创建一个故事列表，默认情况下将显示在 6006 端口的故事书网页中。
Why we don't use
npm startfor running the storybook?
我们可以使用 npm start 来 运行 故事书，但您需要在“脚本”下的 package.json 文件中配置它，如下所示。
"scripts": {
"start": "start-storybook -p 6006 -s public"
}
此处 public 表示这本故事书不需要任何身份验证即可 运行 安装它。现在，如果你这样做 npm start 它只会 运行 故事书给你，而不是反应应用程序。这个故事书以后可以在不同的 React 应用中使用。
我建议，如果您要实现故事书的一些基本概念，那么最好 运行 将两者分别放在不同的端口上。