下載DevExpress v20.2完整版    DevExpress v20.2漢化資源獲取

DevExpress Universal擁有.NET開發需要的所有平臺控件，包含600多個UI控件、報表平臺、DevExpress Dashboard eXpressApp 框架、適用于 Visual Studio的CodeRush等一系列輔助工具。

本文介紹的方法適用于客戶端 - 服務器模型，您需要一個服務器（一個或后端）和一個客戶端（前端）應用程序，其中包括所有必需的樣式、腳本和HTML模板。請注意，客戶端上的腳本版本應與服務器上的庫版本匹配，直至次要版本。

本教程將為大家介紹如何將DashboardControl組件添加到React應用程序并顯示Web Dashboard。

先決條件

• 確保在計算機上安裝。
• 使用本教程需要熟悉React的基本概念和模式，學習基礎：。

創建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軟件包的版本，并保證該軟件包安裝一次。 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="http://demos.devexpress.com/services/dashboard/api">
</DashboardControl>
</div>
);
}

export default App;

屬性指定用于將數據請求發送到服務器的URL，該值應由托管Web Dashboard的服務器端的基本URL和路由前綴（在 / 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

在瀏覽器中打開//localhost:3000/來查看結果，Web Dashboard顯示存儲在預配置服務器（//demos.devexpress.com/services/dashboard/api）上的儀表板。 請按照以下說明配置服務器：

DevExpress技術交流群3：700924826      歡迎一起進群討論