DevExtreme React - Migrate from DevExtreme Reactive

DevExtreme Reactive is a set of React components that integrate with Bootstrap and Material-UI libraries. It includes Grid, Scheduler, and Chart.

Since the v24.2 release, DevExtreme Reactive product line is deprecated (end-of-life: December 2025). The purpose of this guide is to help you migrate from DevExtreme Reactive to DevExtreme React.

If you have questions or need assistance during migration, submit a ticket in the DevExpress Support Center.

Examples to Review

DevExtreme Reactive documentation contains code snippets in the Guides sections of each component. For each scenario in the documentation, we prepared code snippets that show how to achieve the same results with DevExtreme React components. You can find these snippets under the "Migrate to DevExtreme React" tab.

Structure and Imports

DevExtreme Reactive uses a modular system where features are integrated through plugins. These plugins nest as child components within a parent.

For example, to build a simple Grid, you had to import Table and TableHeaderRow plugins:

import React from 'react'; 
import { Grid, Table, TableHeaderRow } from '@devexpress/dx-react-grid-bootstrap4'; 

export default () => ( 
    <div className="card"> 
        <Grid ... > 
            <Table /> 
            <TableHeaderRow /> 
        </Grid> 
    </div> 
);

DevExtreme React takes a different approach. Most functionality builds directly into the component rather than relying on external plugins. Settings pass to the component, as well as to child components called “configuration components”.

For instance, in DevExtreme React DataGrid you use a Column configuration component to configure columns:

import React from 'react'; 
import { DataGrid, Column } from 'devextreme-react/data-grid'; 

export default () => { 
    return ( 
        <DataGrid ... > 
            <Column ... /> 
            <Column ... /> 
            <Column ... /> 
        </DataGrid> 
    ); 
};
See Also

Transition Approaches

You can transfer your DevExtreme Reactive component settings to DevExtreme React in two ways.

Runtime Conversion

In this approach, you convert DevExtreme Reactive settings into DevExtreme React configuration components at runtime.

For example, you want to transition your DevExtreme Reactive Grid component into a DevExtreme React DataGrid. Your column configuration is the following:

import React, { useState } from 'react'; 
// ... 

export default () => { 
    const [columns] = useState([ 
        { name: 'region', title: 'Region' }, 
        { name: 'sector', title: 'Sector' }, 
    ]); 
    const [rows] = ...; 

    return ( 
        <div className="card"> 
            <Grid 
                rows={rows} 
                columns={columns} 
            >    
                <!-- ... --> 
            </Grid> 
        </div> 
    ); 
};

You can convert DevExtreme Reactive Grid columns into DevExtreme DataGrid columns object:

<DataGrid 
    dataSource={rows} 
        columns={columns.map(({ name, title }) => ({ 
        name, 
        dataField: name, 
        caption: title 
    }))} 
/>

Note that rows transformed into dataSource.

You can also convert columns to DevExtreme React Column configuration components:

<DataGrid dataSource={rows}> 
    { 
    columns.map((column) => ( 
        <Column 
            key={column.name} 
            dataField={column.name} 
            caption={column.title} 
        > 
        </Column> 
    )) 
    } 
</DataGrid>

Static Replacement

In this approach, you replace your DevExtreme Reactive settings with DevExtreme React configuration components.

For instance, if we take the example from the previous section:

import React, { useState } from 'react'; 
// ... 

export default () => { 
    const [columns] = useState([ 
        { name: 'region', title: 'Region' }, 
        { name: 'sector', title: 'Sector' }, 
    ]); 
    const [rows] = ...; 

    return ( 
        <div className="card"> 
            <Grid 
                rows={rows} 
                columns={columns} 
            >    
                <!-- ... --> 
            </Grid> 
        </div> 
    ); 
};

After replacing everything from scratch, you get the following code:

<DataGrid dataSource={rows}> 
    <Column 
        dataField='region' 
        caption='Region' 
    /> 
    <Column 
        dataField='sector' 
        caption='Sector' 
    /> 
</DataGrid>
See Also

Themes

DevExtreme Reactive supported Material-UI, Bootstrap 3 and 4 themes.

DevExtreme React includes built-in themes: Generic, Material, and Fluent. To simplify migration, you can switch to one of them.

If our built-in themes do not meet your requirements, you can use our ThemeBuilder tool to create a custom theme.

See Also