如何使用React创建仪表板应用程序

在本教程中,我们将介绍如何创建一个应用程序运用应对- 用于构建用户界面的JavaScript库。这个网页设计工具在组件创建方面特别有用,它比jQuery之类的东西提供了显着的优势。

创建自包含,可重用组件的能力意味着您可以使代码更小,更有条理。如果组件设置得足够好,可以在必要时将它们放入,而根本不需要额外的设置。

在本教程中,我们将制作一个仪表板应用程序,密切关注重要的支持指标。屏幕分为网格,可根据需要显示的数据进行自定义以显示不同的视觉效果。

通过制作通用小部件组件,我们可以在不影响任何底层代码的情况下切割和更改显示。将这些包装在容器组件中允许我们控制与其显示分开的数据源。

我们将利用CSS网格以定义的块显示内容。不支持它的浏览器将显示在单个列中,就像使用较小的屏幕时一样。

下载本教程的文件这里

01.下载依赖项

获取项目文件后,我们需要下拉项目所需的所有必需软件包。这些包括来自'create-react-app'的文件,它处理我们的构建过程。

我们还需要运行两个服务器 - 一个为页面提供热重新加载,另一个提供一些虚假数据进行测试。

在项目目录中的命令行中输入以下内容:

/ *在一个窗口中* />纱线安装>纱线开始/ *在另一个窗口* />纱线服务

02.添加第一个小部件

react dashboard app

从一个简单的组件开始

首先,我们将在页面上呈现一个简单的组件。设置Babel后,我们可以使用ES2015类编写组件。我们需要做的就是在需要时导入它们,而Babel和Webpack将完成剩下的工作。

打开/src/components/App.js并将导入添加到页面顶部。然后,在render函数内部,将组件放在容器中

从'../components/Widget'导入Widget; [...] 

03.设置小部件框的样式

react dashboard app

使用Webpack导入CSS时,样式可以限定为相关组件,以避免它们泄漏到页面的其他部分

在这个项目中,Webpack被设置为获取CSS导入。这意味着我们可以导入CSS文件,就像我们在上一步中使用JavaScript一样,这允许我们为每个组件创建单独的文件。将以下导入添加到Widget.js的顶部。这将链接到'Widget'className,并将样式范围限定为该组件。

import'../styles/Widget.css';

04.添加标题和内容

每个小部件都需要简要描述它显示的数据。为了保持可定制的内容,我们会在使用它时将其作为属性(或“prop”)传递给组件。

至于内容,React提供了一个特殊的'children'道具,它将包含在组件的开始和结束标签之间输入的内容。

替换占位符

在具有以下的渲染功能中。 Loading组件将在稍后发挥作用。

{} this.props.heading

{this.props.loading? : “”}
{} this.props.children

05.让小部件跨越网格

react dashboard app

使用CSS Grid规范,无论应用于子元素的样式如何,都将应用布局元素(如装订线)

除了我们导入的样式表之外,我们还可以根据传递的道具动态创建React样式。

要使用CSS Grid跨越列和行,请使用grid-column和grid-row属性。我们可以通过'colspan'和'rowspan'道具来改变每个组件,这与表单元格在HTML中的工作方式类似。

在Widget构造函数中应用样式并将它们链接到容器

if(props.colspan!== 1){this.spanStyles.gridColumn =`span $ {props.colspan}`; } if(props.rowspan!== 1){this.spanStyles.gridRow =`span $ {props.rowspan}`; } [...] 

06.供应默认道具

现在我们的Widget是空白的,因为我们还没有提供任何道具。在这些情况下,我们可以提供默认道具来代替使用。

除非另有说明,否则CSS网格将默认占用最小单位,在这种情况下为1x1平方。在我们导出Widget之前,为该效果提供一些默认道具。

Widget.defaultProps = {heading:“未命名的小部件”,colspan:1,rowspan:1}

07.强制执行特定道具

react dashboard app

NumberDisplay组件是一个“表示”组件,因为它没有内部状态,完全依赖于传递给它的props

组件可以提供有关应将哪些类型的值作为props发送的提示。在开发应用程序时,任何错误传递的道具都会在控制台中显示为警告,以帮助避免进一步的错误。

在默认道具的下方,定义应该或需要传递哪些道具,以及它们应该是什么类型。

Widget.propTypes = {heading:React.PropTypes.string,colspan:React.PropTypes.number,rowspan:React.PropTypes.number,children:React.PropTypes.element.isRequired}

08.添加道具到应用程序

通过根据需要定义'children'prop,您可能会注意到浏览器抱怨它当前未定义。虽然这不会破坏应用程序,但它会一直困扰着我们,直到它被排序。

返回App.js并为我们之前创建的小部件添加标题道具。不要让标签自动关闭,而是打开它并添加一些占位符内容以显示它正在工作。

这是一些内容

09.显示一些数据

react dashboard app

我们可以使用CSS中的@supports语法来检测浏览器是否支持网格布局。如果没有,我们默认为单列视图

NumberDisplay组件的工作方式与我们刚刚创建的小部件非常相似 - 它只是根据我们传递给它的道具呈现一些文本。我们可以将它放在我们需要的地方,并且可以一致地显示数值数据。

在顶部导入NumberDisplay组件并使用它来替换您刚刚在Widget中添加的占位符内容。

从'../components/NumberDisplay'导入NumberDisplay; [...] 

10.转换为NumberWidget

目前,有很多代码用于显示不会在小部件上发生变化的内容。我们可以创建一个特殊的组件来封装它们。这样我们只需要导入NumberWidget。

用NumberWidget替换App.js顶部的Widget和NumberDisplay导入。确保还在render方法中替换它们。

从'../components/NumberWidget'导入NumberWidget; [...] 

下一页:在React中完成仪表板应用程序



翻译字数超限