跳到主要内容

开发可重用的React组件

在开始一个新项目时,很容易陷入困境用户体验习惯。随着应用程序的增长,组件可能会开始膨胀,当需要重新使用它的一部分时,它可能很难分开。大型组件难以测试,难以扩展且易于破坏。

避免此问题的最佳方法是将UI拆分为更小的通用部分,这些部分更易于重用,因为它们将数据作为道具 - 一种称为表示组件的模式。通过关注较小组件(如按钮或输入字段)的质量,我们知道任何使用这些组件的东西都可以正常工作。

故事书是一个帮助开发这些可重用组件的环境。通过单独创建它们,我们可以确定它们没有我们没有明确定义的外部依赖项。结果是应用程序的交互式样式指南,不仅对开发人员有帮助,对设计人员和测试人员也有帮助。

故事书应用程序可以单独导出,并独立于主应用程序运行,无需开发环境。结果只是HTML,CSS和JS,它们可以托管在像GitHub Pages这样的服务上,并与使用它们的存储库一起存在。公司中的任何人都可以加载该网站并进行检查。

以下是如何使用Storybook反应项目

01.添加故事书

首先,我们首先需要一个React项目。这可以是任何项目,但我们可以使用Createreact- App在几行中生成一个。打开命令行并运行以下命令:

npx create-react-app storybook-app cd storybook-app

从那里我们可以安装Storybook CLI。这种深入的内容将为应用程序添加环境的基本功能。通过全局安装,它可以用于将Storybook添加到任何NPM项目中。

npx @ storybook / cli getstorybook

此命令更新故事书应用并向package.json添加了几个命令。运行第一个,启动本地Storybook服务器准备开发。准备好后,运行以下命令并在浏览器中转到localhost:9009。

纱线运行故事书

Storybook在首次安装时提供概述和示例组件。这些可以完全适应或删除。

02.在故事书中设置

故事书通过“故事”的概念起作用。正在开发的每个组件都有自己的故事集,概述了一些典型的用例。例如,Storybook附带的组件有一个用于纯文本的故事,另一个用于表情符号。

默认情况下,这些故事保存在故事项目根目录下的目录。虽然这在技术上有效,但最好将与组件相关的所有文件与其他相关文件(如样式和测试)一起保存。我们可以通过更新来改变故事书找到故事的位置Config.js在里面.storybook目录。

从“@ storybook / react”导入{configure}; const req = require.context(“../ src / components”,true,/\ .stories \ .js$ /); function loadStories(){req.keys()。forEach(filename => req(filename));配置(loadStories,module);

一旦故事书重新启动,它现在将查找以...结尾的任何文件.stories.js里面的任何地方组件目录。

03.在Storybook中创建一个组件

我们的第一个组件将是一个按钮。因为这将是一个风格 ); } export default按钮;

04.在故事书中创建一个故事

设置组件后,我们现在可以通过创建自己的故事将其导入Storybook。

每组故事都以电话开始故事悲剧,将所有故事组合在一起。第一个参数是该分组的标签。

每个故事都是通过调用来创建的那边的方法。第一个参数标记故事,第二个参数是要渲染的组件。虽然我们可以渲染 ;});

在创建可重用组件时,最好使用从父级继承的字体等样式。由于尚未设置,我们会得到一个后备字体。

05.添加全局样式

某些组件可能依赖于树上方的继承样式。虽然将它们包含在每个故事中是不切实际的,但故事书提供了一种将内容注入其中的方法组件呈现的iframe。

在中创建一个新文件.storybook目录叫预览head.js用它来导入字体并将其应用于iframe的内容。重新启动Storybook以使其生效。

 

06.用旋钮控制道具

Knobs menu

利用旋钮实时调整道具,避免创建故事以涵盖所有可能的道具组合

虽然故事本身非常适合设置典型场景,但我们通常希望看到特定道具组合会发生什么。随着道具数量的增长,可能的不同组合也会增长。我们可以使用名为旋钮的屏幕控制来实时调整道具,而不是试图用自己的故事覆盖每个场景。

旋钮是一个附加组件的示例 - 可用于Storybook的插件可增强核心体验。每个加载项都是单独安装和导入的。要使用旋钮,我们首先需要从NPM中获取它们。

yarn add @ storybook / addon-knobs

安装完成后,我们需要通过添加它们让Storybook了解它们./storybook/addons.js。

导入“@ Storybook / Addon-knobs / Register”;

要在故事中使用,我们需要将它们添加为装饰器。装饰器将故事包装在提供行为的特殊组件中。对于旋钮,所需要的只是导入装饰器并在创建故事之前添加它。

从“@ storybook / addon-knobs / react”导入{withKnobs}; [...] storiesOf(“按钮”,模块).addDecorator(withKnobs).add(...)

旋钮附加装置带有一组常用控件,用于改变屏幕底部的渲染道具。

我们想要的两个是'text'来呈现按钮标签的文本框,'selectV2'来提供选项类型支柱。两者都采用标签和默认值,'selectV2'将选项对象作为其第二个参数。

从“@ storybook / addon-knobs / react”导入{selectV2,text,withKnobs}; const types = {默认:“默认”,主要:“主要”,危险:“危险”}; const buttonText = text(“Label”,“This is Net Magazine”); const type = selectV2(“Type”,types,Object.values(types)[0]); return  ;

组件实时更新内容。这对于准确了解设计开始破坏的位置非常有用。

07.尝试其他附加组件

有很多附加组件可以帮助任何项目。

Actions附加组件提供了一种在组件内虚拟化操作的方法。通过传递作为事件道具的动作,我们可以检查以查看我们的按钮的onClick处理程序表现正常。

Storyshots附加组件可以帮助创建故事中的Jest快照。每次测试运行时,它会渲染每个故事并将其与上次运行时进行比较。任何差异都被标记为调查。

Viewports附加组件提供了预定义的公共视口列表,以检查组件的行为方式。这有助于避免在不包括Storybook侧栏的情况下尝试调整窗口大小。

根据项目的需要,还可以为每个Storybook项目创建自定义加载项。这些对于常见设置非常有用,例如状态管理系统或本地化字符串。

查看Storybook提供的附加组件的完整列表这里

本文最初发表于,这是全球最畅销的网页设计师和开发者杂志。购买 问题310 要么 订阅

相关文章:



翻译字数超限