性高湖久久,亚洲国产日韩欧美一区二区三区,日韩欧美中文字幕一

DevExtreme初級入門教程（React篇）：將DevExtreme組件添加到React應用程序

翻譯|使用教程|編輯：龔雪|2021-11-01 09:39:10.950|閱讀 247 次

概述：本文主要介紹如何將DevExtreme控件添加到React應用程序，歡迎下載最新版體驗~

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關鏈接：

DevExtreme v21.1.6最新版下載

一鍵設置

您可以使用作為一部分的單個 npx 命令安裝和配置DevExtreme及其依賴項：

npx -p devextreme-cli devextreme add devextreme-react

運行該命令后，您可以跳過以下文章，直接繼續導入 DevExtreme UI 組件。

如果該命令因任何原因不可用或者您需要舊版本，請按照以下說明進行手動設置。

安裝DevExtreme

安裝devextreme和devextreme-react npm包：

npm install devextreme@21.1 devextreme-react@21.1 --save --save-exact

注意：我們建議保存DevExtreme的確切版本以避免意外更新，因為DevExtreme不使用語義版本控制。在我們的版本系統中，第一個和中間的數字表示可能包含操作更改的主要版本。

導入樣式表

打開主應用程序文件 (App.js) 并導入預定義的主題樣式表（下面代碼中的 dx.light.css），或者您可以導入使用DevExtreme UI組件的樣式表，語法是一樣的。

App.js

// ...
import 'devextreme/dist/css/dx.light.css';

然后轉到public文件夾，打開index.html文件，并將dx-viewport類添加到 <body> 標記，這確保將主題顏色和排版設置應用于所有頁面元素（而不僅僅是 DevExtreme UI 組件）。

index.html

<html lang="en">
<head>
<!-- ... -->
</head>
<body class="dx-viewport">
<div id="root"></div>
</body>
</html>

注意：基于SVG的UI組件不需要主題樣式表，如果您選擇導入樣式表，UI 組件將應用與其匹配的外觀。

導入DevExtreme組件

從特定模塊導入您要使用的DevExtreme組件，在以下代碼中，導入了Button組件：

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Button from 'devextreme-react/button';

class App extends React.Component {
render() {
return (
<Button
text="Click me"
onClick={this.sayHelloWorld}
/>
);
}

sayHelloWorld() {
alert('Hello world!')
}
}

export default App;

還應導入嵌套的DevExtreme組件（以下代碼中的 ArgumentAxis、Series 和 Legend）：

App.js

import React from 'react';

import Chart, {
ArgumentAxis,
Series,
Legend
} from 'devextreme-react/chart';

const data = [{
arg: 1990,
val: 5320816667
}, {
arg: 2000,
val: 6127700428
}, {
arg: 2010,
val: 6916183482
}];

class App extends React.Component {
render() {
return (
<Chart dataSource={data}>
<ArgumentAxis tickInterval={10} />
<Series type="bar" />
<Legend visible={false} />
</Chart>
);
}
}

export default App;

Webpack的額外配置

注意：如果您的應用程序中未使用Webpack，請跳過此步驟。

打開webpack.config.js文件并配置加載器來處理CSS和字體，如果要使用Globalize進行本地化，還應該指定Globalize和CLDR別名：

webpack.config.js

const path = require('path');
module.exports = {
...
resolve: {
alias: {
globalize$: path.resolve( __dirname, "node_modules/globalize/dist/globalize.js" ),
globalize: path.resolve(__dirname, "node_modules/globalize/dist/globalize"),
cldr$: path.resolve(__dirname, "node_modules/cldrjs/dist/cldr.js"),
cldr: path.resolve(__dirname, "node_modules/cldrjs/dist/cldr")
},
...
},
module: {
rules: [
...
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: "url-loader?name=[name].[ext]"
}
]
}
}

此外，打開package.json文件并確保在devDependencies中列出了style-loader、css-loader和url-loader。

運行應用程序

使用以下命令運行應用程序：

npm start

打開 //localhost:3000 瀏覽應用程序。

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應式UI小部件集合，可在傳統Web和下一代移動應用程序中使用。該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

DevExpress技術交流群5：742234706 歡迎一起進群討論