Add DevExtreme to a React Application

Install DevExtreme

Install the devextreme and devextreme-react npm packages:

npm install devextreme@19.1 devextreme-react@19.1 --save --save-exact
NOTE
We recommend saving an exact version of DevExtreme to avoid unexpected updates because DevExtreme does not use Semantic Versioning. In our versioning system, the first and middle numbers indicate a major release which may contain behavior changes.

Import Stylesheets

Open the main component file (App.js) and import dx.common.css and a predefined theme stylesheet (dx.light.css in the code below). Alternatively, you can import the stylesheets in the component where DevExtreme widgets are used. The syntax is the same.

App.js
// ...
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
NOTE
SVG-based widgets do not require theme stylesheets. If you do import the stylesheets, the widgets apply an appearance that matches them.

Import DevExtreme Components

Import the DevExtreme components you are going to use from specific modules. In the following code, the Button component is imported:

App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
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):

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;

Additional Configuration for Webpack

NOTE
If you do not use Webpack in your application, skip this step.

Open the webpack.config.js file and configure loaders to process CSS and fonts:

webpack.config.js
...
rules: [
  ...
  { 
    test: /\.css$/,
    use: [
      { loader: "style-loader" },
      { loader: "css-loader" }]
  },
  { 
    test: /\.(eot|svg|ttf|woff|woff2)$/, 
    use: "url-loader?name=[name].[ext]"
  }
]
...

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.

Demos and Code Examples

Refer to the following resources for code samples and usage examples: