From c7ddb5f355e59dbe3926b97bb44a4da3878299e2 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Thu, 26 Sep 2024 10:05:10 +0400 Subject: [PATCH 1/6] Add Reactive migration guides --- MenuConfig.xml | 2 + .../05 Grid/01 Columns/01 Columns.md | 179 ++++++++++++++++++ .../00 Customize Appearance.md | 0 .../05 Alternate Rows.md | 41 ++++ .../10 Conditonal Cell Formatting.md | 81 ++++++++ .../10 Scheduler/05 Overvies.md | 0 .../15 Chart/05 Overvies.md | 0 7 files changed, 303 insertions(+) create mode 100644 concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/01 Columns.md create mode 100644 concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/00 Customize Appearance.md create mode 100644 concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/05 Alternate Rows.md create mode 100644 concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/10 Conditonal Cell Formatting.md create mode 100644 concepts/50 React Components/65 Migrate from Reactive/10 Scheduler/05 Overvies.md create mode 100644 concepts/50 React Components/65 Migrate from Reactive/15 Chart/05 Overvies.md diff --git a/MenuConfig.xml b/MenuConfig.xml index abc6432308..1be0161434 100644 --- a/MenuConfig.xml +++ b/MenuConfig.xml @@ -86,6 +86,8 @@ + + diff --git a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/01 Columns.md b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/01 Columns.md new file mode 100644 index 0000000000..b0f3e84766 --- /dev/null +++ b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/01 Columns.md @@ -0,0 +1,179 @@ +#### DevExtreme Reactive + + import React, { useState } from 'react'; + import { + Grid, + Table, + TableHeaderRow, + } from '@devexpress/dx-react-grid-bootstrap4'; + + import '@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.css'; + + import { + generateRows, + globalSalesValues, + } from '../../../demo-data/generator'; + + export default () => { + const [columns] = useState([ + { name: 'region', title: 'Region' }, + { name: 'sector', title: 'Sector' }, + { name: 'customer', title: 'Customer' }, + { name: 'product', title: 'Product' }, + { name: 'amount', title: 'Sale Amount' }, + ]); + const [rows] = useState(generateRows({ columnValues: globalSalesValues, length: 8 })); + + return ( +
+ + + + + + ); + }; + +#### DevExtreme React Components + +You have 3 options on how to convert columns: + +1. Convert Reactive `columns` to DevExtreme React `columns` object. +2. Convert Reactive `columns` to DevExtreme React JSX `Column` elements. +3. Replace the Reactive configuration with DevExtreme React `Column` elements. + +--- +##### React + + + import React, { useState } from 'react'; + + import { + DataGrid, + Column, + } from 'devextreme-react/data-grid'; + + import 'devextreme/dist/css/dx.light.css'; + + import { + generateRows, + globalSalesValues, + } from '../../../demo-data/generator'; + + export default () => { + const [columns] = useState([ + { name: 'region', title: 'Region' }, + { name: 'sector', title: 'Sector' }, + { name: 'customer', title: 'Customer' }, + { name: 'product', title: 'Product' }, + { name: 'amount', title: 'Sale Amount' }, + ]); + const [rows] = useState(generateRows({ columnValues: globalSalesValues, length: 8 })); + + return ( +
+ ({ + name, + dataField: name, + caption: title + }))} + /> +
+ ); + }; + + + import React, { useState } from 'react'; + + import { + DataGrid, + Column, + } from 'devextreme-react/data-grid'; + + import 'devextreme/dist/css/dx.light.css'; + + import { + generateRows, + globalSalesValues, + } from '../../../demo-data/generator'; + + export default () => { + const [columns] = useState([ + { name: 'region', title: 'Region' }, + { name: 'sector', title: 'Sector' }, + { name: 'customer', title: 'Customer' }, + { name: 'product', title: 'Product' }, + { name: 'amount', title: 'Sale Amount' }, + ]); + const [rows] = useState(generateRows({ columnValues: globalSalesValues, length: 8 })); + + return ( +
+ + { + columns.map((column) => ( + + + )) + } + +
+ ); + }; + + + import React, { useState } from 'react'; + + import { + DataGrid, + Column, + } from 'devextreme-react/data-grid'; + + import 'devextreme/dist/css/dx.light.css'; + + import { + generateRows, + globalSalesValues, + } from '../../../demo-data/generator'; + + export default () => { + const [rows] = useState(generateRows({ columnValues: globalSalesValues, length: 8 })); + + return ( +
+ + + + + + + +
+ ); + }; + +--- \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/00 Customize Appearance.md b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/00 Customize Appearance.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/05 Alternate Rows.md b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/05 Alternate Rows.md new file mode 100644 index 0000000000..e79f7c0c69 --- /dev/null +++ b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/05 Alternate Rows.md @@ -0,0 +1,41 @@ +#### DevExtreme Reactive + +DevExtreme Reactive Grid allowed you to customize the appearance of the entire table using templates (see the `tableComponent` property). Inside your custom templates, you could use built-in components with your own customization (note the `Table.Table` component usage). + + const TableComponent = ({ ...restProps }) => ( + + ); + + export default () => { + return ( + +
+ + + ); + }; + +#### DevExtreme React components + +By contrast, DevExtreme React allows you to replace the rendering of its smaller parts, like rows or cells. This ensures that main data shaping and presentation features work as intended event with custom rendering. + +You can customize the appearance of the entire table with CSS as described in the [Customize Cells](/Documentation/Guide/UI_Components/DataGrid/Columns/Customize_Cells/) topic. Data Grid also provides props for common appearance customization, like alternate rows, so that the example above translates to just setting a single prop: + + export default () => { + return ( + + /* columns */ + + ); + }; \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/10 Conditonal Cell Formatting.md b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/10 Conditonal Cell Formatting.md new file mode 100644 index 0000000000..6063cc48b8 --- /dev/null +++ b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/10 Conditonal Cell Formatting.md @@ -0,0 +1,81 @@ +#### DevExtreme Reactive + + const HighlightedCell = ({ value, style, ...restProps }) => ( + + + {value} + + + ); + + const Cell = (props) => { + const { column } = props; + if (column.name === 'amount') { + return ; + } + return ; + }; + + export default () => { + return ( + +
+ + + ); + }; + +#### DevExtreme React Components + + const HighlightedCell = (cellData) => ( +
+ + {cellData.value} + +
+ ); + + export default () => { + return ( + + { + columns.map(column => ( + + + )); + } + + ); + }; \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from Reactive/10 Scheduler/05 Overvies.md b/concepts/50 React Components/65 Migrate from Reactive/10 Scheduler/05 Overvies.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/concepts/50 React Components/65 Migrate from Reactive/15 Chart/05 Overvies.md b/concepts/50 React Components/65 Migrate from Reactive/15 Chart/05 Overvies.md new file mode 100644 index 0000000000..e69de29bb2 From a419e5e2d3248b21723fa0273a188b96464125d0 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Thu, 26 Sep 2024 14:22:49 +0400 Subject: [PATCH 2/6] Update MenuConfig --- MenuConfig.xml | 2 +- .../{01 Columns.md => 00 Columns.md} | 0 .../05 Grid/01 Columns/05 Alignment.md | 41 +++++++ .../05 Grid/01 Columns/10 Width.md | 43 +++++++ .../15 Conditional Row Formatting.md | 108 ++++++++++++++++++ .../20 Multiline Cells.md | 49 ++++++++ 6 files changed, 242 insertions(+), 1 deletion(-) rename concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/{01 Columns.md => 00 Columns.md} (100%) create mode 100644 concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/05 Alignment.md create mode 100644 concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/10 Width.md create mode 100644 concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/15 Conditional Row Formatting.md create mode 100644 concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/20 Multiline Cells.md diff --git a/MenuConfig.xml b/MenuConfig.xml index 1be0161434..430b249ab3 100644 --- a/MenuConfig.xml +++ b/MenuConfig.xml @@ -86,7 +86,7 @@ - + diff --git a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/01 Columns.md b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/00 Columns.md similarity index 100% rename from concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/01 Columns.md rename to concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/00 Columns.md diff --git a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/05 Alignment.md b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/05 Alignment.md new file mode 100644 index 0000000000..239a15eb42 --- /dev/null +++ b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/05 Alignment.md @@ -0,0 +1,41 @@ +#### DevExtreme Reactive + + export default () => { + const [tableColumnExtensions] = useState([ + { columnName: 'sector', align: 'center' }, + { columnName: 'customer', align: 'center' }, + { columnName: 'amount', align: 'right' }, + ]); + + return ( + +
+ + + ); + }; + +#### DevExtreme React Components + + export default () => { + const [columns] = useState([ + { dataField: "region", caption: "Region" }, + { dataField: "sector", caption: "Sector", alignment: "center" }, + { dataField: "customer", caption: "Customer", alignment: "center" }, + { dataField: "product", caption: "Product" }, + { dataField: "amount", caption: "Sale Amount", alignment: "right" }, + ]); + + const [rows] = useState( + generateRows({ columnValues: globalSalesValues, length: 8 }) + ); + + return ( +
+ +
+ ); + }; \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/10 Width.md b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/10 Width.md new file mode 100644 index 0000000000..5474e432c2 --- /dev/null +++ b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/10 Width.md @@ -0,0 +1,43 @@ +#### DevExtreme Reactive + + export default () => { + const [tableColumnExtensions] = useState([ + { columnName: 'region', width: '20%' }, + { columnName: 'sector', width: '15%' }, + { columnName: 'customer', width: 'auto' }, + { columnName: 'product', width: 'auto' }, + { columnName: 'amount', width: 140 }, + ]); + + return ( + +
+ + + ); + }; + +#### DevExtreme React Components + + export default () => { + const [columns] = useState([ + { dataField: "region", caption: "Region", width: "20%" }, + { dataField: "sector", caption: "Sector", width: "15%" }, + { dataField: "customer", caption: "Customer", width: "auto" }, + { dataField: "product", caption: "Product", width: "auto" }, + { dataField: "amount", caption: "Sale Amount", width: 140 }, + ]); + + const [rows] = useState( + generateRows({ columnValues: globalSalesValues, length: 8 }) + ); + + return ( +
+ +
+ ); + }; \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/15 Conditional Row Formatting.md b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/15 Conditional Row Formatting.md new file mode 100644 index 0000000000..99c5658245 --- /dev/null +++ b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/15 Conditional Row Formatting.md @@ -0,0 +1,108 @@ +#### DevExtreme Reactive + + + const styles = { + banking: { + backgroundColor: '#f5f5f5', + }, + health: { + backgroundColor: '#a2e2a4', + }, + telecom: { + backgroundColor: '#b3e5fc', + }, + energy: { + backgroundColor: '#ffcdd2', + }, + insurance: { + backgroundColor: '#f0f4c3', + }, + }; + + const TableRow = ({ row, ...restProps }) => ( + alert(JSON.stringify(row))} + style={{ + cursor: 'pointer', + ...styles[row.sector.toLowerCase()], + }} + /> + ); + + export default () => { + return ( + +
+ + + ); + }; + +#### DevExtreme React Components + +DevExtreme React Data Grid allows you to [specify a template for entire data rows](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#dataRowRender), but this template requires you to implement some features manually and has certain limitations. + +To avoid trade offs, you can implement conditional formatting for rows using the same cell template functionality: + + const styles = { + banking: { + backgroundColor: '#f5f5f5', + }, + health: { + backgroundColor: '#a2e2a4', + }, + telecom: { + backgroundColor: '#b3e5fc', + }, + energy: { + backgroundColor: '#ffcdd2', + }, + insurance: { + backgroundColor: '#f0f4c3', + }, + }; + + const getSectorData = (gridData: DataGridTypes.ColumnCellTemplateData) => gridData.data['sector']; + + const TableRow = (rowData: DataGridTypes.RowTemplateData) => ( + alert(JSON.stringify(rowData.data))} + style={{ + cursor: "pointer", + ...styles[getSectorData(rowData)], + }} + > + + + + + + + ); + + export default () => { + return ( + + { + columns.map(column => ( + + + )); + } + + ); + }; \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/20 Multiline Cells.md b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/20 Multiline Cells.md new file mode 100644 index 0000000000..3a27fb06bb --- /dev/null +++ b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/20 Multiline Cells.md @@ -0,0 +1,49 @@ +#### DevExtreme Reactive + + export default () => { + const [tableColumnExtensions] = useState([ + { columnName: 'subject', wordWrapEnabled: true }, + ]); + + return ( + +
{rowData.data.region}{rowData.data.sector}{rowData.data.customer}{rowData.data.product}{rowData.data.amount}
+ + + ); + }; + +#### DevExtreme React Components + + + export default () => { + const [columns] = useState([ + { + dataField: "region", + caption: "Region", + cssClass: "word-wrap", + width: 100, + }, + { dataField: "sector", caption: "Sector" }, + { dataField: "customer", caption: "Customer" }, + { dataField: "product", caption: "Product" }, + { dataField: "amount", caption: "Sale Amount" }, + ]); + const [rows] = useState( + generateRows({ columnValues: globalSalesValues, length: 8 }) + ); + + return ( +
+ +
+ ); + }; + + + .word-wrap { + white-space: normal; + } \ No newline at end of file From 6b5116852b2370fcd3ffd257c2df9ee0c4ea3466 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Thu, 24 Oct 2024 17:21:56 +0400 Subject: [PATCH 3/6] Add guide --- MenuConfig.xml | 2 +- .../65 Migrate from DevExtreme Reactive.md | 167 ++++++++++++++++ .../05 Grid/01 Columns/00 Columns.md | 179 ------------------ .../05 Grid/01 Columns/05 Alignment.md | 41 ---- .../05 Grid/01 Columns/10 Width.md | 43 ----- .../00 Customize Appearance.md | 0 .../05 Alternate Rows.md | 41 ---- .../10 Conditonal Cell Formatting.md | 81 -------- .../15 Conditional Row Formatting.md | 108 ----------- .../20 Multiline Cells.md | 49 ----- .../10 Scheduler/05 Overvies.md | 0 .../15 Chart/05 Overvies.md | 0 12 files changed, 168 insertions(+), 543 deletions(-) create mode 100644 concepts/50 React Components/65 Migrate from DevExtreme Reactive.md delete mode 100644 concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/00 Columns.md delete mode 100644 concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/05 Alignment.md delete mode 100644 concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/10 Width.md delete mode 100644 concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/00 Customize Appearance.md delete mode 100644 concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/05 Alternate Rows.md delete mode 100644 concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/10 Conditonal Cell Formatting.md delete mode 100644 concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/15 Conditional Row Formatting.md delete mode 100644 concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/20 Multiline Cells.md delete mode 100644 concepts/50 React Components/65 Migrate from Reactive/10 Scheduler/05 Overvies.md delete mode 100644 concepts/50 React Components/65 Migrate from Reactive/15 Chart/05 Overvies.md diff --git a/MenuConfig.xml b/MenuConfig.xml index 430b249ab3..f7fbf5e486 100644 --- a/MenuConfig.xml +++ b/MenuConfig.xml @@ -86,7 +86,7 @@ - + diff --git a/concepts/50 React Components/65 Migrate from DevExtreme Reactive.md b/concepts/50 React Components/65 Migrate from DevExtreme Reactive.md new file mode 100644 index 0000000000..a2244981fa --- /dev/null +++ b/concepts/50 React Components/65 Migrate from DevExtreme Reactive.md @@ -0,0 +1,167 @@ +[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). + +## Examples to Review + +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. + +[image needed] + +## 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 () => ( +
+ +
+ + + + ); + +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 ( + + + + + + ); + }; + +#####See Also##### + +- [Component Configuration Syntax](/Documentation/Guide/React_Components/Component_Configuration_Syntax/) + +## 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 ( +
+ + + +
+ ); + }; + +You can convert DevExtreme Reactive Grid `columns` into DevExtreme DataGrid [columns](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/) object: + + ({ + 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: + + + { + columns.map((column) => ( + + + )) + } + + +### 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 ( +
+ + + +
+ ); + }; + +After replacing everything from scratch, you get the following code: + + + + + + +#####See Also##### + +- [Optimize Performance](/Documentation/Guide/React_Components/Optimize_Performance/) + +## Themes + +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 minimize migration efforts, you can just switch to one of them. + +If our built-in themes don’t meet your requirement, you need to 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/) \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/00 Columns.md b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/00 Columns.md deleted file mode 100644 index b0f3e84766..0000000000 --- a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/00 Columns.md +++ /dev/null @@ -1,179 +0,0 @@ -#### DevExtreme Reactive - - import React, { useState } from 'react'; - import { - Grid, - Table, - TableHeaderRow, - } from '@devexpress/dx-react-grid-bootstrap4'; - - import '@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.css'; - - import { - generateRows, - globalSalesValues, - } from '../../../demo-data/generator'; - - export default () => { - const [columns] = useState([ - { name: 'region', title: 'Region' }, - { name: 'sector', title: 'Sector' }, - { name: 'customer', title: 'Customer' }, - { name: 'product', title: 'Product' }, - { name: 'amount', title: 'Sale Amount' }, - ]); - const [rows] = useState(generateRows({ columnValues: globalSalesValues, length: 8 })); - - return ( -
- -
- - - - ); - }; - -#### DevExtreme React Components - -You have 3 options on how to convert columns: - -1. Convert Reactive `columns` to DevExtreme React `columns` object. -2. Convert Reactive `columns` to DevExtreme React JSX `Column` elements. -3. Replace the Reactive configuration with DevExtreme React `Column` elements. - ---- -##### React - - - import React, { useState } from 'react'; - - import { - DataGrid, - Column, - } from 'devextreme-react/data-grid'; - - import 'devextreme/dist/css/dx.light.css'; - - import { - generateRows, - globalSalesValues, - } from '../../../demo-data/generator'; - - export default () => { - const [columns] = useState([ - { name: 'region', title: 'Region' }, - { name: 'sector', title: 'Sector' }, - { name: 'customer', title: 'Customer' }, - { name: 'product', title: 'Product' }, - { name: 'amount', title: 'Sale Amount' }, - ]); - const [rows] = useState(generateRows({ columnValues: globalSalesValues, length: 8 })); - - return ( -
- ({ - name, - dataField: name, - caption: title - }))} - /> -
- ); - }; - - - import React, { useState } from 'react'; - - import { - DataGrid, - Column, - } from 'devextreme-react/data-grid'; - - import 'devextreme/dist/css/dx.light.css'; - - import { - generateRows, - globalSalesValues, - } from '../../../demo-data/generator'; - - export default () => { - const [columns] = useState([ - { name: 'region', title: 'Region' }, - { name: 'sector', title: 'Sector' }, - { name: 'customer', title: 'Customer' }, - { name: 'product', title: 'Product' }, - { name: 'amount', title: 'Sale Amount' }, - ]); - const [rows] = useState(generateRows({ columnValues: globalSalesValues, length: 8 })); - - return ( -
- - { - columns.map((column) => ( - - - )) - } - -
- ); - }; - - - import React, { useState } from 'react'; - - import { - DataGrid, - Column, - } from 'devextreme-react/data-grid'; - - import 'devextreme/dist/css/dx.light.css'; - - import { - generateRows, - globalSalesValues, - } from '../../../demo-data/generator'; - - export default () => { - const [rows] = useState(generateRows({ columnValues: globalSalesValues, length: 8 })); - - return ( -
- - - - - - - -
- ); - }; - ---- \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/05 Alignment.md b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/05 Alignment.md deleted file mode 100644 index 239a15eb42..0000000000 --- a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/05 Alignment.md +++ /dev/null @@ -1,41 +0,0 @@ -#### DevExtreme Reactive - - export default () => { - const [tableColumnExtensions] = useState([ - { columnName: 'sector', align: 'center' }, - { columnName: 'customer', align: 'center' }, - { columnName: 'amount', align: 'right' }, - ]); - - return ( - -
- - - ); - }; - -#### DevExtreme React Components - - export default () => { - const [columns] = useState([ - { dataField: "region", caption: "Region" }, - { dataField: "sector", caption: "Sector", alignment: "center" }, - { dataField: "customer", caption: "Customer", alignment: "center" }, - { dataField: "product", caption: "Product" }, - { dataField: "amount", caption: "Sale Amount", alignment: "right" }, - ]); - - const [rows] = useState( - generateRows({ columnValues: globalSalesValues, length: 8 }) - ); - - return ( -
- -
- ); - }; \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/10 Width.md b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/10 Width.md deleted file mode 100644 index 5474e432c2..0000000000 --- a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/01 Columns/10 Width.md +++ /dev/null @@ -1,43 +0,0 @@ -#### DevExtreme Reactive - - export default () => { - const [tableColumnExtensions] = useState([ - { columnName: 'region', width: '20%' }, - { columnName: 'sector', width: '15%' }, - { columnName: 'customer', width: 'auto' }, - { columnName: 'product', width: 'auto' }, - { columnName: 'amount', width: 140 }, - ]); - - return ( - -
- - - ); - }; - -#### DevExtreme React Components - - export default () => { - const [columns] = useState([ - { dataField: "region", caption: "Region", width: "20%" }, - { dataField: "sector", caption: "Sector", width: "15%" }, - { dataField: "customer", caption: "Customer", width: "auto" }, - { dataField: "product", caption: "Product", width: "auto" }, - { dataField: "amount", caption: "Sale Amount", width: 140 }, - ]); - - const [rows] = useState( - generateRows({ columnValues: globalSalesValues, length: 8 }) - ); - - return ( -
- -
- ); - }; \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/00 Customize Appearance.md b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/00 Customize Appearance.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/05 Alternate Rows.md b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/05 Alternate Rows.md deleted file mode 100644 index e79f7c0c69..0000000000 --- a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/05 Alternate Rows.md +++ /dev/null @@ -1,41 +0,0 @@ -#### DevExtreme Reactive - -DevExtreme Reactive Grid allowed you to customize the appearance of the entire table using templates (see the `tableComponent` property). Inside your custom templates, you could use built-in components with your own customization (note the `Table.Table` component usage). - - const TableComponent = ({ ...restProps }) => ( - - ); - - export default () => { - return ( - -
- - - ); - }; - -#### DevExtreme React components - -By contrast, DevExtreme React allows you to replace the rendering of its smaller parts, like rows or cells. This ensures that main data shaping and presentation features work as intended event with custom rendering. - -You can customize the appearance of the entire table with CSS as described in the [Customize Cells](/Documentation/Guide/UI_Components/DataGrid/Columns/Customize_Cells/) topic. Data Grid also provides props for common appearance customization, like alternate rows, so that the example above translates to just setting a single prop: - - export default () => { - return ( - - /* columns */ - - ); - }; \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/10 Conditonal Cell Formatting.md b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/10 Conditonal Cell Formatting.md deleted file mode 100644 index 6063cc48b8..0000000000 --- a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/10 Conditonal Cell Formatting.md +++ /dev/null @@ -1,81 +0,0 @@ -#### DevExtreme Reactive - - const HighlightedCell = ({ value, style, ...restProps }) => ( - - - {value} - - - ); - - const Cell = (props) => { - const { column } = props; - if (column.name === 'amount') { - return ; - } - return ; - }; - - export default () => { - return ( - -
- - - ); - }; - -#### DevExtreme React Components - - const HighlightedCell = (cellData) => ( -
- - {cellData.value} - -
- ); - - export default () => { - return ( - - { - columns.map(column => ( - - - )); - } - - ); - }; \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/15 Conditional Row Formatting.md b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/15 Conditional Row Formatting.md deleted file mode 100644 index 99c5658245..0000000000 --- a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/15 Conditional Row Formatting.md +++ /dev/null @@ -1,108 +0,0 @@ -#### DevExtreme Reactive - - - const styles = { - banking: { - backgroundColor: '#f5f5f5', - }, - health: { - backgroundColor: '#a2e2a4', - }, - telecom: { - backgroundColor: '#b3e5fc', - }, - energy: { - backgroundColor: '#ffcdd2', - }, - insurance: { - backgroundColor: '#f0f4c3', - }, - }; - - const TableRow = ({ row, ...restProps }) => ( - alert(JSON.stringify(row))} - style={{ - cursor: 'pointer', - ...styles[row.sector.toLowerCase()], - }} - /> - ); - - export default () => { - return ( - -
- - - ); - }; - -#### DevExtreme React Components - -DevExtreme React Data Grid allows you to [specify a template for entire data rows](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#dataRowRender), but this template requires you to implement some features manually and has certain limitations. - -To avoid trade offs, you can implement conditional formatting for rows using the same cell template functionality: - - const styles = { - banking: { - backgroundColor: '#f5f5f5', - }, - health: { - backgroundColor: '#a2e2a4', - }, - telecom: { - backgroundColor: '#b3e5fc', - }, - energy: { - backgroundColor: '#ffcdd2', - }, - insurance: { - backgroundColor: '#f0f4c3', - }, - }; - - const getSectorData = (gridData: DataGridTypes.ColumnCellTemplateData) => gridData.data['sector']; - - const TableRow = (rowData: DataGridTypes.RowTemplateData) => ( - alert(JSON.stringify(rowData.data))} - style={{ - cursor: "pointer", - ...styles[getSectorData(rowData)], - }} - > - - - - - - - ); - - export default () => { - return ( - - { - columns.map(column => ( - - - )); - } - - ); - }; \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/20 Multiline Cells.md b/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/20 Multiline Cells.md deleted file mode 100644 index 3a27fb06bb..0000000000 --- a/concepts/50 React Components/65 Migrate from Reactive/05 Grid/05 Customize Appearance/20 Multiline Cells.md +++ /dev/null @@ -1,49 +0,0 @@ -#### DevExtreme Reactive - - export default () => { - const [tableColumnExtensions] = useState([ - { columnName: 'subject', wordWrapEnabled: true }, - ]); - - return ( - -
{rowData.data.region}{rowData.data.sector}{rowData.data.customer}{rowData.data.product}{rowData.data.amount}
- - - ); - }; - -#### DevExtreme React Components - - - export default () => { - const [columns] = useState([ - { - dataField: "region", - caption: "Region", - cssClass: "word-wrap", - width: 100, - }, - { dataField: "sector", caption: "Sector" }, - { dataField: "customer", caption: "Customer" }, - { dataField: "product", caption: "Product" }, - { dataField: "amount", caption: "Sale Amount" }, - ]); - const [rows] = useState( - generateRows({ columnValues: globalSalesValues, length: 8 }) - ); - - return ( -
- -
- ); - }; - - - .word-wrap { - white-space: normal; - } \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from Reactive/10 Scheduler/05 Overvies.md b/concepts/50 React Components/65 Migrate from Reactive/10 Scheduler/05 Overvies.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/concepts/50 React Components/65 Migrate from Reactive/15 Chart/05 Overvies.md b/concepts/50 React Components/65 Migrate from Reactive/15 Chart/05 Overvies.md deleted file mode 100644 index e69de29bb2..0000000000 From 9dd9aaa7cf0756c0ad9508bc9e7ae8f27a1cc338 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Fri, 25 Oct 2024 11:44:36 +0400 Subject: [PATCH 4/6] Restructure topic to single files --- .../65 Migrate from DevExtreme Reactive.md | 167 ------------------ .../00 Migrate from DevExtreme Reactive.md | 5 + .../05 Examples to Review.md | 1 + .../10 Structure and Imports.md | 36 ++++ .../15 Transition Approaches.md | 102 +++++++++++ .../20 Themes.md | 9 + 6 files changed, 153 insertions(+), 167 deletions(-) delete mode 100644 concepts/50 React Components/65 Migrate from DevExtreme Reactive.md create mode 100644 concepts/50 React Components/65 Migrate from DevExtreme Reactive/00 Migrate from DevExtreme Reactive.md create mode 100644 concepts/50 React Components/65 Migrate from DevExtreme Reactive/05 Examples to Review.md create mode 100644 concepts/50 React Components/65 Migrate from DevExtreme Reactive/10 Structure and Imports.md create mode 100644 concepts/50 React Components/65 Migrate from DevExtreme Reactive/15 Transition Approaches.md create mode 100644 concepts/50 React Components/65 Migrate from DevExtreme Reactive/20 Themes.md diff --git a/concepts/50 React Components/65 Migrate from DevExtreme Reactive.md b/concepts/50 React Components/65 Migrate from DevExtreme Reactive.md deleted file mode 100644 index a2244981fa..0000000000 --- a/concepts/50 React Components/65 Migrate from DevExtreme Reactive.md +++ /dev/null @@ -1,167 +0,0 @@ -[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). - -## Examples to Review - -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. - -[image needed] - -## 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 () => ( -
- -
- - - - ); - -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 ( - - - - - - ); - }; - -#####See Also##### - -- [Component Configuration Syntax](/Documentation/Guide/React_Components/Component_Configuration_Syntax/) - -## 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 ( -
- - - -
- ); - }; - -You can convert DevExtreme Reactive Grid `columns` into DevExtreme DataGrid [columns](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/) object: - - ({ - 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: - - - { - columns.map((column) => ( - - - )) - } - - -### 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 ( -
- - - -
- ); - }; - -After replacing everything from scratch, you get the following code: - - - - - - -#####See Also##### - -- [Optimize Performance](/Documentation/Guide/React_Components/Optimize_Performance/) - -## Themes - -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 minimize migration efforts, you can just switch to one of them. - -If our built-in themes don’t meet your requirement, you need to 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/) \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from DevExtreme Reactive/00 Migrate from DevExtreme Reactive.md b/concepts/50 React Components/65 Migrate from DevExtreme Reactive/00 Migrate from DevExtreme Reactive.md new file mode 100644 index 0000000000..18b96f657d --- /dev/null +++ b/concepts/50 React Components/65 Migrate from DevExtreme Reactive/00 Migrate from DevExtreme Reactive.md @@ -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). \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from DevExtreme Reactive/05 Examples to Review.md b/concepts/50 React Components/65 Migrate from DevExtreme Reactive/05 Examples to Review.md new file mode 100644 index 0000000000..fd6b613b93 --- /dev/null +++ b/concepts/50 React Components/65 Migrate from DevExtreme Reactive/05 Examples to Review.md @@ -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. \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from DevExtreme Reactive/10 Structure and Imports.md b/concepts/50 React Components/65 Migrate from DevExtreme Reactive/10 Structure and Imports.md new file mode 100644 index 0000000000..63be30d7b4 --- /dev/null +++ b/concepts/50 React Components/65 Migrate from DevExtreme Reactive/10 Structure and Imports.md @@ -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 () => ( +
+ +
+ + + + ); + +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 ( + + + + + + ); + }; + +#####See Also##### + +- [Component Configuration Syntax](/Documentation/Guide/React_Components/Component_Configuration_Syntax/) \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from DevExtreme Reactive/15 Transition Approaches.md b/concepts/50 React Components/65 Migrate from DevExtreme Reactive/15 Transition Approaches.md new file mode 100644 index 0000000000..bb8605e493 --- /dev/null +++ b/concepts/50 React Components/65 Migrate from DevExtreme Reactive/15 Transition Approaches.md @@ -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 ( +
+ + + +
+ ); + }; + +You can convert DevExtreme Reactive Grid `columns` into DevExtreme DataGrid [columns](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/) object: + + ({ + 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: + + + { + columns.map((column) => ( + + + )) + } + + +### 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 ( +
+ + + +
+ ); + }; + +After replacing everything from scratch, you get the following code: + + + + + + +#####See Also##### + +- [Optimize Performance](/Documentation/Guide/React_Components/Optimize_Performance/) \ No newline at end of file diff --git a/concepts/50 React Components/65 Migrate from DevExtreme Reactive/20 Themes.md b/concepts/50 React Components/65 Migrate from DevExtreme Reactive/20 Themes.md new file mode 100644 index 0000000000..f2e75b0533 --- /dev/null +++ b/concepts/50 React Components/65 Migrate from DevExtreme Reactive/20 Themes.md @@ -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 minimize migration efforts, you can just switch to one of them. + +If our built-in themes don’t meet your requirement, you need to 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/) \ No newline at end of file From b19844a28980d145b32c86222c56d306fbc8d5d4 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Fri, 25 Oct 2024 11:46:19 +0400 Subject: [PATCH 5/6] Minor fix --- .../65 Migrate from DevExtreme Reactive/20 Themes.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/concepts/50 React Components/65 Migrate from DevExtreme Reactive/20 Themes.md b/concepts/50 React Components/65 Migrate from DevExtreme Reactive/20 Themes.md index f2e75b0533..20b24dc88a 100644 --- a/concepts/50 React Components/65 Migrate from DevExtreme Reactive/20 Themes.md +++ b/concepts/50 React Components/65 Migrate from DevExtreme Reactive/20 Themes.md @@ -1,8 +1,8 @@ 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 minimize migration efforts, you can just switch to one of them. +DevExtreme React includes [built-in themes](/Documentation/Guide/Themes_and_Styles/Predefined_Themes/): Generic, Material, and Fluent. To minimize migration efforts, you can just switch to one of them. -If our built-in themes don’t meet your requirement, you need to use our [ThemeBuilder](/Documentation/Guide/Themes_and_Styles/ThemeBuilder/#Get_Started/Create_a_New_Theme) tool to create a custom theme. +If our built-in themes do not meet your requirement, you need to use our [ThemeBuilder](/Documentation/Guide/Themes_and_Styles/ThemeBuilder/#Get_Started/Create_a_New_Theme) tool to create a custom theme. #####See Also##### From 74203c0899a83b01cb334f20a4d93b3ec5830399 Mon Sep 17 00:00:00 2001 From: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com> Date: Fri, 25 Oct 2024 12:38:44 +0400 Subject: [PATCH 6/6] Apply suggestions from code review Co-authored-by: DirkPieterse --- .../65 Migrate from DevExtreme Reactive/20 Themes.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/concepts/50 React Components/65 Migrate from DevExtreme Reactive/20 Themes.md b/concepts/50 React Components/65 Migrate from DevExtreme Reactive/20 Themes.md index 20b24dc88a..51d4220a82 100644 --- a/concepts/50 React Components/65 Migrate from DevExtreme Reactive/20 Themes.md +++ b/concepts/50 React Components/65 Migrate from DevExtreme Reactive/20 Themes.md @@ -1,8 +1,8 @@ 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 minimize migration efforts, you can just switch to one of them. +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 requirement, you need to use our [ThemeBuilder](/Documentation/Guide/Themes_and_Styles/ThemeBuilder/#Get_Started/Create_a_New_Theme) tool to create a custom theme. +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#####