React 和 Storybook 之间的交互

Question

我们已经知道 Storybook 用于构建 UI 组件并使它们与业务逻辑隔离。 我已经实现了一些 StoryBook 的基本示例。

现在我很想知道 Storybook 内部行为是如何与 React 主应用程序交互的，Storybook 在执行npm run storybook命令后从入口点到退出的工作流程？

我也想知道为什么我们不使用npm start来运行故事书？

谢谢 ：）

Answer 1

Storybook 不会与您的 react 应用程序交互。
它只是项目中组件的库。

它为您提供了多种工具来创建组件使用示例。
这就是为什么您需要将故事与实际的 React 应用程序分开编写的原因。 所有这些故事都与您的应用没有任何交集。

命令npm run storybook只是构建您编写的所有故事并为此构建有用的用户界面，以便您可以轻松浏览它们。 当您拥有庞大的代码库时，这将变得非常有用。
因为很难了解项目中的每个组件以及它是如何工作的。 Storybook 为我们提供了一种工具，可以让所有组件更加结构化。

您也可以为此使用npm start 。 这只是关于如何在package.json中配置脚本。

Answer 2

Storybook 不与主 React 应用程序交互。

Storybook 仅用于构建 UI 组件并使它们与 React 应用程序（业务逻辑）隔离。 当您通过这个npm run storybook (windows) 或yarn storybook (mac/ubuntu) 命令运行故事书时，这些组件可以很容易地可视化。 它在不同的端口上运行，不像npm start默认在3000端口上运行。

然后将这些组件导入到主反应应用程序中。 React 将根据需求使用这些组件。 Storybook 使您能够浏览您已构建的所有 UI 组件，然后 react 将使用它。 这允许您一次开发一个组件。

当你执行命令npm run storybook会发生什么？

该命令首先将搜索main.js ，如果找到，它将查找所有以stories.js扩展的文件，这些文件不过是您构建的故事。 然后它将以任何顺序或指定顺序创建故事列表，默认情况下将显示在故事书网页的6006端口。

为什么我们不使用npm start来运行故事书？

我们可以使用npm start来运行故事书，但您需要在“脚本”下的package.json文件中配置它，如下所示。

"scripts": {
    "start": "start-storybook -p 6006 -s public"
  }

这里的public意味着这个故事书不需要任何身份验证来运行它。 现在，如果您执行npm start它只会为您运行故事书，而不是 React 应用程序。 这本故事书可以稍后在不同的 React 应用程序中使用。

我建议，如果您正在实现故事书的一些基本概念，那么最好在不同的端口上分别运行它们。