界面控件DevExpress使用教程：将Web Dashboard添加到React应用程序

DevExpress Universal拥有.NET开发需要的所有平台控件，包含600多个UI控件、 表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。

本教程将为大家介绍如何将DashboardControl组件添加到React应用程序并显示Web Dashboard。

先决条件

• 确保在计算机上安装Node.js 6+ 和 npm 5.2+ 。
• 使用本教程需要熟悉React的基本概念和模式，学习基础：reactjs.org 。

创建React应用程序

在命令提示符下，创建一个React应用程序：

cmd

npx create-react-app dashboard-react-app

创建项目后，导航到创建的文件夹：

cmd

cd dashboard-react-app

安装Dashboard Package

devexpress-dashboard npm软件包将devextreme和@ devexpress / analytics-core引用为peerDependencies，peerDependencies 软件包应手动安装，这使开发人员可以控制peerDependencies软件包的版本，并保证该软件包安装一次。 devexpress-dashboard-react软件包包含DashboardComponent组件。

安装具有必需的peerDependencies的仪表板软件包：

cmd

npm install devexpress-dashboard@20.2-next devexpress-dashboard-react@20.2-next @devexpress/analytics-core@20.2-next devextreme@20.2-next devextreme-react@20.2-next –save

修改应用内容

如下所示修改App.js文件，以在页面上显示仪表板组件：

javascript

import React from 'react';import './App.css';import { DashboardControl } from 'devexpress-dashboard-react';function App() {return (<div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}><DashboardControl style={{ height: '100%' }}endpoint="https://demos.devexpress.com/services/dashboard/api"></DashboardControl></div>);}export default App;

DashboardControlOptions.endpoint属性指定用于将数据请求发送到服务器的URL，该值应由托管Web Dashboard的服务器端的基本URL和路由前缀（在MVC / .NET Core MapDashboardRoute属性中设置的值）组成。

添加全局样式

用以下全局样式替换index.css文件内容：

css

@import url("../node_modules/jquery-ui/themes/base/all.css");@import url("../node_modules/devextreme/dist/css/dx.common.css");@import url("../node_modules/devextreme/dist/css/dx.light.css");@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css");@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css");@import url("../node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.css");

运行应用程序

运行应用程序。

cmd

npm start

在浏览器中打开http://localhost:3000/来查看结果，Web Dashboard显示存储在预配置服务器（https://demos.devexpress.com/services/dashboard/api）上的仪表板。 请按照以下说明配置服务器：

• Server-Side Configuration (ASP.NET Core)
• Server-Side Configuration (ASP.NET MVC)

DevExpress技术交流群3：700924826      欢迎一起进群讨论