翻譯|使用教程|編輯:龔雪|2021-11-01 09:39:10.950|閱讀 255 次
概述:本文主要介紹如何將DevExtreme控件添加到React應用程序,歡迎下載最新版體驗~
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
您可以使用作為一部分的單個 npx 命令安裝和配置DevExtreme及其依賴項:
npx -p devextreme-cli devextreme add devextreme-react
運行該命令后,您可以跳過以下文章,直接繼續導入 DevExtreme UI 組件。
如果該命令因任何原因不可用或者您需要舊版本,請按照以下說明進行手動設置。
安裝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組件,在以下代碼中,導入了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.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擁有高性能的HTML5 / JavaScript小部件集合,使您可以利用現代Web開發堆棧(包括React,Angular,ASP.NET Core,jQuery,Knockout等)構建交互式的Web應用程序。從Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和響應式UI小部件集合,可在傳統Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。
DevExpress技術交流群5:742234706 歡迎一起進群討論
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自:慧都網