如何在ReactJS应用程序中使用故事书（附代码示例）

Jovie
349 阅读2分钟

在这篇文章中，我们将学习组件驱动开发（CDD），同时为UI商人去做他们的防弹组件举办一个研讨会。系好你的安全带，让我们直接驶入它。💨💨

什么和为什么是组件驱动开发？

用户界面的开发首先是以模块化的方式进行的，所以它是 "自下而上 "的，我们从基本的组件发展到顶层的方式。在CDD中，我们

  • 从基本组件开始，孤立地构建它们，其目的是从小处开始。
  • 然后我们用这些小的构件，通过组合它们来构成组件，从这里开始，复杂性就会上升。
  • 使用这些复合组件，我们就可以制作我们的页面。
  • 这些页面和屏幕被集成到我们的应用程序中。

什么是Storybook？

Storybook是一个前端工作室/平台，供开发人员单独建立他们的UI组件和页面。它是开源的，被全球许多团队使用。

用ReactJS配置Storybook

Storybook有一个单行的命令配置

npx sb init

一旦命令被执行，你应该在你的应用程序目录中看到一些新的配置和依赖项。包括 .storybook 和 故事.

在package.json中，我们可以看到两个新的脚本，以及一些新的开发依赖项。

"scripts":{
...
 "storybook": "start-storybook -p 6006 -s public",
 "build-storybook": "build-storybook -s public"
}
"devDependencies": {
    "@storybook/addon-actions": "^6.5.12",
    "@storybook/addon-essentials": "^6.5.12",
    "@storybook/addon-interactions": "^6.5.12",
    "@storybook/addon-links": "^6.5.12",
    "@storybook/builder-webpack5": "^6.5.12",
    "@storybook/manager-webpack5": "^6.5.12",
    "@storybook/node-logger": "^6.5.12",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.5.12",
    "@storybook/testing-library": "^0.0.13",
  }

Storybook为你做了所有的艰苦工作😎🤓 。你所要做的就是在你的新车间里开始构建组件，那里有你需要的所有工具。

锯开我们的第一个Storybook组件🪚🪵

让我们创建一个基本的组件，这样我们就可以进入故事书的真正魅力所在了

import React from "react";
import "./button.css";
export default function Button(props) {
  const { color, name, ...rest } = props;
  return (
    <button className={`button ${color}`} {...rest}>
      {name}
    </button>
  );
}

创建完我们的组件后，我们在 故事目录下编写我们的组件故事

import React from "react";
import Button from "./../components/Button/Button";
export default {
  title: "My Button",
  component: Button,
};
export const Green = () => <Button color="green" name="Friend" />;
export const Gray = () => <Button color="gray" name="acquaintance" />;
export const Red = () => <Button color="red" name="Enemy" />;

我们默认导出的是实际的组件和我们想在车间里展示后显示的标题。

一旦你完成了这一切，你可以继续使用npm run storybook运行你的故事书，并在本地端口6006访问**。**

bobs你的叔叔🤓

故事书是如此强大🚀🚀🚀

收尾工作

我们今天就到此为止吧🥱 。今天就开始使用故事书，以后就可以了我不能不强调这一点。如果你在开发组件的过程中是弱者或强者，它真的会帮助你解决。你可以在这个过程中及早发现你的错误，并在短时间内发现许多复杂的组件。下一次见，这不是一个告别。

avatar
文章
阅读
粉丝