DevExpressv20.2フルバージョンをダウンロードする
DevExpress Universalには、600を超えるUIコントロール、レポートプラットフォーム、DevExpress Dashboard eXpressAppフレームワーク、CodeRush for Visual Studio、一連の補助ツールなど、.NET開発に必要なすべてのプラットフォームコントロールがあります。
この記事で説明する方法は、クライアントサーバーモデルに適用できます。サーバー（ASP.NETCoreまたはASP.NETMVCバックエンド）と、必要なすべてのスタイル、スクリプトを含むクライアント（フロントエンド）アプリケーションが必要です。およびHTMLテンプレート。クライアントのスクリプトバージョンは、マイナーバージョンまでサーバーのライブラリバージョンと一致する必要があることに注意してください。
このチュートリアルでは、DashboardControlコンポーネントをReactアプリケーションに追加し、Webダッシュボードを表示する方法を示します。
前提条件
- 必ずNode.js6以降とnpm5.2 以降をコンピューターにインストールしてください。
- このチュートリアルを使用するには、Reactの基本的な概念とパターンに精通し、基本を学ぶ必要があります：reactjs.org 。
Reactアプリケーションを作成する
コマンドプロンプトで、Reactアプリケーションを作成します。
cmd
npxcreate-react-appダッシュボード-react-app
プロジェクトを作成したら、作成したフォルダーに移動します。
cmd
cdダッシュボード-react-app
ダッシュボードパッケージをインストールする
devexpress-dashboard npmパッケージは、devextremeと@ devexpress / analytics-coreをpeerDependenciesと呼びます。peerDependencies パッケージは手動でインストールする必要があります。これにより、開発者はpeerDependenciesパッケージのバージョンを制御し、パッケージが一度インストールされるようにすることができます。devexpress-dashboard-reactパッケージには、DashboardComponentコンポーネントが含まれています。
必要なpeerDependenciesを使用してダッシュボードパッケージをインストールします。
cmd
npm install [email protected] [email protected] @ devexpress / analytics-core @ 20.2-next devextreme @ 20.2-next [email protected] --save
アプリのコンテンツを変更する
次のようにApp.jsファイルを変更して、ページにダッシュボードコンポーネントを表示します。
javascript
'react'からReactをインポートします。
インポート './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 = {
{高さ： '100％'}}
endpoint = "https://demos.devexpress.com/services/dashboard/api">
</ DashboardControl>
</ div>
）;
}
デフォルトのアプリをエクスポートします。
DashboardControlOptions.endpointプロパティは、サーバーにデータ要求を送信するために使用されるURLを指定します。この値は、Webダッシュボードをホストするサーバーのベース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
海抜スタート
ブラウザでhttp：// localhost：3000 /を開き、結果を表示します。Webダッシュボードには、事前設定されたサーバー（https://demos.devexpress.com/services/dashboard/api）に保存されているダッシュボードが表示されます。以下の手順に従って、サーバーを構成します。
DevExpress中国語のWebサイトにアクセスして、最新の製品情報を直接入手してください。
DevExpress Technical Exchange Group 3：700924826グループディスカッションへようこそ