react pc端单个页面使用rem react 界面

转载

网猴儿 2024-05-07 21:32:28

文章标签 react pc端单个页面使用rem vue python java javascript 文章分类 机器学习人工智能

react界面

react pc端单个页面使用rem react 界面_python

当您开始一个新的前端项目时，通常要做的第一件事就是创建一个漂亮的设计。您仔细计划和绘制所有UI组件，以及它们可能具有的每种状态或效果。但是，在开发过程中，情况通常会开始发生变化。新的需求以及无法预料的用例在这里和那里弹出。最初的漂亮组件库无法满足所有这些要求，因此您开始使用新设计进行扩展。

如果此时您仍然有一位设计专家，这是很好的，但是很多时候他们已经切换到另一个项目，而让开发人员来应对这些更改。结果，设计的一致性开始下降。跟踪库中已有的组件以及它们可能具有的状态和外观变得很困难。

为了避免这种艺术上的混乱，通常为您的所有组件创建单独的文档是一个好主意。有许多用于此目的的工具，但是在本文中，我们将重点介绍专门为React应用程序设计的工具-React Storybook 。它使您可以轻松浏览组件及其功能的集合。这样一个应用程序的生动例子是React Native组件库。

为什么需要React Storybook？

那么，这个展示如何帮助呢？为了回答这个问题，让我们尝试列出一个参与UI组件开发并评估其需求的人员列表。根据您的工作流程，此列表可能会有所不同，但通常的怀疑者如下：

设计人员或UX专家

这是负责用户界面外观的人。在项目的模型阶段完成之后，设计师通常会离开团队。当出现新要求时，他们需要快速赶上UI的当前状态。

开发者

开发人员是创建这些组件的人，并且可能是样式指南的主要受益者。开发人员的两个主要用例是能够从库中找到合适的组件，并能够在开发过程中对其进行测试。

测试仪

这是确保组件按预期实现的一丝不苟的人。测试人员工作的主要部分是确保组件在每种方式下均能正确运行。并且尽管这并不能消除对集成测试的需求，但是与项目本身分开进行通常更方便。

产品拥有者

接受设计和实现的人。产品负责人需要确保项目的每个部分看起来都符合预期，并且品牌风格必须以一致的方式表示。

您可能已经注意到，每个参与人员的共同点是，一个地点同时包含所有组件。在项目本身中找到所有这些人可能会很繁琐。考虑一下，您需要多长时间才能找到项目中按钮的所有可能的变体，包括按钮的状态（禁用，主要，辅助等）？这就是为什么拥有一个单独的画廊要方便得多的原因。

如果我设法说服您，让我们看看如何在项目中设置Storybook。

设置React Storybook

要设置React Storybook，您需要做的第一件事是一个React项目。如果您目前没有合适的工具，可以使用create-react-app轻松创建。

要生成故事书，请全局安装getstorybook

npm i -g getstorybook

然后导航到您的项目并运行

getstorybook

该命令将执行三件事：

将@ kadira / storybook安装到您的项目中。
将storybook和build-storybook脚本添加到package.json文件。
创建.storybook它包含了基本的配置和文件夹stories文件夹与样品组分和故事。

要运行Storybook，请执行npm run storybook并打开显示的地址（ http：// localhost：9009 / ）。该应用程序应如下所示：

react pc端单个页面使用rem react 界面_react pc端单个页面使用rem_02

添加新内容

现在我们正在运行React Storybook，让我们看看如何添加新内容。每个新页面都是通过创建故事来添加的。这些是呈现您的组件的代码片段。 getstorybook生成的示例故事如下所示

//src/stories/index.js

import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';

storiesOf('Welcome', module)
  .add('to Storybook', () => (
    <Welcome showApp={linkTo('Button')}/>
  ));

storiesOf('Button', module)
  .add('with text', () => (
    <Button onClick={action('clicked')}>Hello Button</Button>
  ))
  .add('with some emoji', () => (
    <Button onClick={action('clicked')}>   </Button>
  ));

storiesOf函数在导航菜单中创建一个新部分，而add方法创建一个新的子部分。您可以随意构建故事书，但可以随意构建，但不能创建两个层次以上的层次结构。构造Storybook的一种简单方法是创建常见的顶级部分，例如为相关元素组创建“表单输入”，“导航”或“小部件”，并为单个组件创建子部分。

react pc端单个页面使用rem react 界面_javascript_03

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。原价$ 11.95 您的完全免费

免费获得这本书

您可以自由选择将故事文件放置在何处：在单独的故事文件夹中或在组件旁边。我个人更喜欢后者，因为将故事保持在组件附近有助于保持故事的可访问性和最新性。

故事将加载到.storybook/config.js文件中，该文件包含以下代码：

import { configure } from '@kadira/storybook';

function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);

默认情况下，它将加载src/stories/index.js文件，并希望您将故事导入其中。这有点不方便，因为这将要求我们导入我们创建的每个新故事。我们可以修改此脚本，以使用Webpack的require.context方法自动加载所有故事。为了将故事文件与其余代码区分开，我们可以同意在文件中添加.stories.js扩展名。修改后的脚本应如下所示：

import { configure, addDecorator } from '@kadira/storybook';
import React from 'react';

configure(
  () => {
    const req = require.context('../src', true, /.stories.js$/);
    req.keys().forEach((filename) => req(filename));
  },
  module
);

configure(loadStories, module);

如果您使用其他文件夹作为源代码，请确保将其指向正确的位置。重新运行Storybook，以使更改生效。故事书将为空，因为它不再导入index.js文件，但我们将尽快对其进行修复。

撰写新故事

现在，我们已经根据需要对故事书进行了量身定制，让我们编写第一个故事。但是首先，我们需要创建一个组件来展示。让我们创建一个简单的Name组件，以在彩色块中显示一个名称。该组件将具有以下JavaScript和CSS。

import React from 'react';

import './Name.css';

const Name = (props) => (
  <div className={'name ' + (props.type ? props.type : '')}>{props.name}</div>
)

Name.propTypes = {
  type: React.PropTypes.oneOf(['highlight', 'disabled']),
}

export default Name;

.name {
  display: inline-block;
  font-size: 1.4em;
  background: #4169e1;
  color: #fff;
  border-radius: 4px;
  padding: 4px 10px;
}

.highlight {
  background: #dc143c;
}

.disabled {
  background: #999;
}

您可能已经注意到，这个简单的组件可以具有三种状态：默认，突出显示和禁用。可视化所有这些不是很好吗？让我们为此写一个故事。在您的组件旁边创建一个新的Name.stories.js文件，并添加以下内容：

import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';

import Name from './Name';

storiesOf('Components', module)
  .add('Name', () => (
    <div>
      <h2>Normal</h2>
      <Name name="Louie Anderson" />
      <h2>Highlighted</h2>
      <Name name="Louie Anderson" type="highlight" />
      <h2>Disabled</h2>
      <Name name="Louie Anderson" type="disabled" />
    </div>
  ))

打开Storybook，然后看看您的新组件。结果应如下所示：

react pc端单个页面使用rem react 界面_vue_04

随意试用组件的显示方式及其来源。请注意，借助React的热重载功能，每当您编辑故事或组件时，所做的更改将立即显示在您的故事书中，而无需手动刷新浏览器。但是，添加或删除文件时可能需要刷新。故事书并不总是会注意到这种变化。

查看自定义

如果您想更改故事的显示方式，可以将它们包装在一个容器中。这可以使用addDecorator函数完成。例如，您可以通过将以下代码添加到.storybook/config.js来为所有页面添加“ Examples”标题：

import { configure, addDecorator } from '@kadira/storybook';
import React from 'react';

addDecorator((story) => (
  <div>
    <h1>Examples</h1>
    {story()}
  </div>
));

您还可以通过在addDecorator之后调用addDecorator storiesOf定义单独的部分：

storiesOf('Components', module)
  .addDecorator(...)

发布故事书

一旦完成了故事书的工作并且感觉已经准备好发布了，您可以通过运行以下内容将其构建为静态网站

npm run build-storybook

默认情况下，Storybook内置在storybook-static文件夹中。您可以使用-o参数更改输出目录。现在，您只需要将其上传到您喜欢的托管平台。

如果您在GitHub上的项目上工作，则可以通过将故事书构建到docs文件夹并将其推送到存储库中来发布故事书。可以将 GitHub 配置为从那里服务您的GitHub Pages网站。如果您不想将构建的Storybook保留在存储库中，则也可以使用storybook-deployer 。

构建配置

故事书配置为支持故事内部的许多功能。您可以使用与create-react-app中相同的ES2015 +语法编写代码，但是，如果您的项目使用不同的Babel配置，它将自动获取您的.babelrc文件。您还可以导入JSON文件和图像。

如果您认为这还不够，可以通过在.storybook文件夹中创建webpack.config.js文件来添加其他Webpack配置。该文件导出的配置选项将与默认配置合并。例如，要在您的故事中添加对SCSS的支持，只需添加以下代码：

module.exports = {
  module: {
    loaders: [
      {
        test: /.scss$/,
        loaders: ["style", "css", "sass"]
      }
    ]
  }
}

但是不要忘记安装sass-loader和node-sass 。

您可以添加所需的任何Webpack配置，但是不能覆盖条目，输出和第一个Babel加载器。

如果要为开发和生产环境添加不同的配置，则可以导出功能。将使用基本配置将其调用，并将configType变量设置为“ DEVELOPMENT”或“ PRODUCTION”。

module.exports = function(storybookBaseConfig, configType) {
  // add your configuration here

  // Return the altered config
  return storybookBaseConfig;
};

使用插件扩展功能

故事书本身非常有用，但是为了使事情变得更好，它还具有许多附加组件。在本文中，我们将仅介绍其中的一些，但请确保稍后再查看官方列表。

动作和链接

故事书附带了两个预配置的插件：动作和链接。您无需进行任何其他配置即可使用它们。

动作

通过操作，您可以在“操作记录器”面板中记录由组件触发的事件。看看Storybook生成的Button故事。它将onClick事件绑定到action助手，该助手在UI中显示该事件。

注意：您可能需要重命名包含Button故事的文件和/或基于.storybook/config.js所做的修改来更改其位置。

storiesOf('Button', module)
  .add('with text', () => (
    <Button onClick={action('clicked', 'test')}>Hello Button</Button>
  ))

尝试单击按钮，然后在“动作记录器”中记录输出。

react pc端单个页面使用rem react 界面_javascript_05

链接

链接插件可让您在组件之间添加导航。它提供了可以链接到任何onClick事件的linkTo帮助器：

import { storiesOf, linkTo } from '@kadira/storybook';

storiesOf('Button', module)
  .add('with link', () => (
    <Button onClick={linkTo('Components', 'Name')}>Go to Name</Button>
  ));

单击此按钮将带您进入“组件”部分和“名称”子部分。

旋钮

旋钮插件允许您直接在UI上通过在运行时修改React属性来自定义组件。

要安装插件运行：

npm i --save-dev @kadira/storybook-addon-knobs

必须先在Storybook中注册，才能使用该插件。要做到这一点，创建一个addons.js在文件.storybook具有以下内容的文件夹：

import '@kadira/storybook/addons';
import '@kadira/storybook-addon-knobs/register';

之后，使用withKnobs装饰器包装您的故事。您可以在.storybook/config.js全局执行此操作：

import { withKnobs } from '@kadira/storybook-addon-knobs';

addDecorator(withKnobs);

完成此操作后，我们可以尝试更改Name组件的故事。现在，我们不必一次拥有组件状态的所有三个变体，而是可以在UI中选择它们。我们还将使名称也可编辑。将Name.stories.js的内容更改为：

import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import { text, select } from '@kadira/storybook-addon-knobs';

import Name from './Name';

const types = {
  '': '',
  highlight: 'highlight',
  disabled: 'disabled'
}

storiesOf('Components', module)
  .add('Name', () =>  (
    <div>
      <h2>Normal</h2>
      <Name name={text('Name', 'Louie Anderson')} type={select('Type', types)}  />
    </div>
  ))

该插件提供了各种帮助程序功能，以创建不同类型的用户输入，例如数字，范围或数组。在这里，我们将使用文本作为名称，然后选择类型。打开“名称”页面，新的“旋钮”选项卡应出现在“动作记录器”旁边。尝试更改输入值，然后查看正在重新渲染的组件。

react pc端单个页面使用rem react 界面_javascript_06

信息

信息插件允许您添加有关故事的更多信息，例如故事的源代码，描述和React propTypes。对于开发人员而言，访问此信息非常方便。

通过运行以下命令安装此插件：

npm i --save-dev @kadira/react-storybook-addon-info

然后在.storybook/config.js文件中的Storybook中注册该插件：

import { setAddon } from '@kadira/storybook';
import infoAddon from '@kadira/react-storybook-addon-info';

setAddon(infoAddon);

这会将一个额外的addWithInfo方法添加到storiesOf对象中，以注册您的故事。它的API略有不同，并且接受故事的标题，描述，渲染功能和其他配置作为参数。使用此方法，我们可以像这样重写Name故事：

import React from 'react';
import { storiesOf, action } from '@kadira/storybook';

import Name from './Name';

storiesOf('Components', module)
  .addWithInfo(
    'Name with info', 
    `
    A component to display a colored name tag.
    `,
    () =>  (
      <Name name="Louie Anderson" />
    ),
    { inline: true },
  )

inline参数将使信息默认显示，而不是通过角落的链接访问。结果将如下所示：

react pc端单个页面使用rem react 界面_react pc端单个页面使用rem_07

自动化测试

本文未涉及的Storybook的重要方面是将其用作运行自动化测试的平台。您可以执行各种测试，从单元测试到功能和视觉回归测试。毫不奇怪，有两个附加组件旨在增强Storybook作为测试平台的功能。我们不会详细介绍它们，因为它们值得发表自己的文章，但仍然要提及它们。

技术指标

规范插件可让您直接在故事文件中编写单元测试。每当您打开Storybook并在UI中显示结果时，将执行测试。进行一些修补后，您还可以使用Jest在CI环境中运行此测试。

您可能还会喜欢：如何使用Jest测试React组件

故事镜头

Storyshots允许您根据故事执行Jest快照测试。快照测试使您可以检查组件渲染的DOM是否与预期结果匹配。非常方便地测试组件是否已正确渲染。至少从DOM的角度来看。

故事书即服务

Kadira还提供Storybook作为一项名为Storybook Hub的服务。它使您可以与他们一起托管故事书，并将协作提升到一个新的水平。除了标准功能外，它还与GitHub集成，并且可以为您项目的每个拉动请求生成一个新的故事书。您也可以直接在Storybook中留下评论，以与同事讨论更改。

结论

如果您觉得在项目中维护UI组件变得很麻烦，请退后一步，看看您缺少的内容。您可能需要的只是所有相关方之间的便捷协作平台。在这种情况下，对于您的React项目而言，Storybooks是您的理想工具。

您已经在使用Storybook吗？您打算尝试一下吗？为什么？或确实如此，为什么不呢？希望收到您的评论。

本文由Tim Severien和Giulio Mainardi进行同行评审。感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：centos6服务器中service命令的日志 centos6 service

下一篇：景点信息添加Java代码旅游景点html代码

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯