One-Command Setup
You can install and configure DevExtreme and its dependencies with a single npx command that is part of the DevExtreme CLI:
npx -p devextreme-cli devextreme add devextreme-react
After you run the command, you can skip the following articles and move on straight to importing DevExtreme UI components.
If the command is unavailable for any reason or if you need an older version, follow the instructions below for manual setup.
Install DevExtreme
Install the devextreme
and devextreme-react
npm packages:
npm install devextreme@21.1 devextreme-react@21.1 --save --save-exact
Import Stylesheets
Open the main application file (App.js
) and import a predefined theme stylesheet (dx.light.css
in the code below). Alternatively, you can import the stylesheets where DevExtreme UI components are used. The syntax is the same.
// ... import 'devextreme/dist/css/dx.light.css';
Then, go to the public
folder, open the index.html
file, and add the dx-viewport
class to the <body>
tag. This ensures that theme colors and typography settings are applied to all page elements (and not only to DevExtreme UI components).
<html lang="en"> <head> <!-- ... --> </head> <body class="dx-viewport"> <div id="root"></div> </body> </html>
Import DevExtreme Components
Import the DevExtreme components you are going to use from specific modules. In the following code, the Button component is imported:
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;
Nested DevExtreme components should also be imported (ArgumentAxis
, Series
, and Legend
in the following code):
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;
Additional Configuration for Webpack
Open the webpack.config.js
file and configure loaders to process CSS and fonts. You should also specify Globalize and CLDR aliases if you want to use Globalize for localization:
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" }] } ] } }
In addition, open the package.json
file and ensure style-loader
, css-loader
, and url-loader
are listed in devDependencies
.
Run the Application
Run the application with the following command:
npm start
Open http://localhost:3000 to browse the application.
If you have technical questions, please create a support ticket in the DevExpress Support Center.