-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Reactive migration guides (#6653)
- Loading branch information
1 parent
6f0b263
commit 1f4d0d7
Showing
6 changed files
with
155 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 5 additions & 0 deletions
5
...ents/65 Migrate from DevExtreme Reactive/00 Migrate from DevExtreme Reactive.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
[DevExtreme Reactive](https://devexpress.github.io/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](https://github.com/DevExpress/devextreme-reactive/blob/master/README.md) (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](https://supportcenter.devexpress.com/ticket/create?PlatformedProductId=d34a3391-ecfe-4eed-b996-778955778e04:3dad4948-67d7-11e7-82ec-54271e19360e). |
1 change: 1 addition & 0 deletions
1
...0 React Components/65 Migrate from DevExtreme Reactive/05 Examples to Review.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
DevExtreme Reactive [documentation](https://devexpress.github.io/devextreme-reactive/docs/) 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. |
36 changes: 36 additions & 0 deletions
36
...eact Components/65 Migrate from DevExtreme Reactive/10 Structure and Imports.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
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##### | ||
|
||
- [Component Configuration Syntax](/Documentation/Guide/React_Components/Component_Configuration_Syntax/) |
102 changes: 102 additions & 0 deletions
102
...eact Components/65 Migrate from DevExtreme Reactive/15 Transition Approaches.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,102 @@ | ||
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](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/) object: | ||
|
||
<DataGrid | ||
dataSource={rows} | ||
columns={columns.map(({ name, title }) => ({ | ||
name, | ||
dataField: name, | ||
caption: title | ||
}))} | ||
/> | ||
|
||
Note that `rows` transformed into [dataSource](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#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##### | ||
|
||
- [Optimize Performance](/Documentation/Guide/React_Components/Optimize_Performance/) |
9 changes: 9 additions & 0 deletions
9
concepts/50 React Components/65 Migrate from DevExtreme Reactive/20 Themes.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
DevExtreme Reactive supported Material-UI, Bootstrap 3 and 4 themes. | ||
|
||
DevExtreme React includes [built-in themes](/Documentation/Guide/Themes_and_Styles/Predefined_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](/Documentation/Guide/Themes_and_Styles/ThemeBuilder/#Get_Started/Create_a_New_Theme) tool to create a custom theme. | ||
|
||
#####See Also##### | ||
|
||
- [Predefined Themes](/Documentation/Guide/Themes_and_Styles/Predefined_Themes/) |