DevExtreme React - Add DevExtreme to a React Application

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.

NOTE

The command is unavailable for applications that do not include a src folder. In this case, 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@24.1 devextreme-react@24.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 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.

App.js

// ...
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).

index.html

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

NOTE

SVG-based UI components do not require theme stylesheets. If you choose to import the stylesheets, the UI components 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.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;

Create a Custom Bundle

In certain scenarios, you may want to utilize a custom bundle rather than an automatically generated one. The example below illustrates how to create a custom bundle with Vite.

View on GitHub

For the best experience, we recommend that you use the latest version of DevExtreme alongside ESM.

To create a custom bundle, follow the steps below:

Create a main.js file with re-exports of DevExtreme components that you want to include in the bundle. If you use nested configuration components, we recommend to utilize import aliases.
main.js
```
import Button from "devextreme-react/button";
export { Button };

import DataGrid, {
    Column as GridColumn,
} from "devextreme-react/data-grid";
export {
    DataGrid,
    GridColumn
};
```

Create a separate Vite configuration vite.config.devextreme.bundle.js file.

vite.config.devextreme.bundle.js

import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
    build: {
        commonjsOptions: {
            esmExternals: true 
        },
        lib: {
            entry: resolve(__dirname, 'main.js'),
            name: 'DevExtreme React Bundle',
            formats: ['es', 'cjs'],
            fileName: 'devextreme-react-bundle',
        },
        rollupOptions: {
            external: ['react'],
            output: {
                globals: {
                    react: 'React',
                },
            },
        },
        outDir: 'devextreme-bundle'
    },
})

In the code snippet above, the following options are used:

esmExternals: true
Treat external dependencies (React in this case) as ECMAScript modules.
entry: resolve(__dirname, 'main.js')
A main entry file created at step one.
formats: ['es', 'cjs']
Output formats.
fileName: 'devextreme-react-bundle'
Your bundle name.
outDir: 'devextreme-bundle'
A folder for the generated bundle. The default value is dist.

Leave vite.config.js file as it is to build React applications separately.

Configure your package.json.

package.json

"type": "module",
"scripts": {
    // ...
    "build": "vite build",
    "build:devextreme-bundle": "vite build --config vite.config.devextreme.bundle.js",
},

Bundle the modules.
```
npm run build:devextreme-bundle
```

Use the assembled bundle in your application.

App.jsx

import { 
    Button,
    DataGrid,
    GridColumn as Column
} from "./devextreme-bundle/devextreme-react-bundle";

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. You should also specify Globalize and CLDR aliases if you want to use Globalize for localization:

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" }]
      }
    ]
  }
}

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: