DevExtreme React Components

https://js.devexpress.com/React/Documentation/25_1/
Admin
DevExtreme React Components is a suite of 80+ responsive, touch-enabled UI components for React...
Tokens:2,354,599
Snippets:23,805
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install and run the sample application

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/Common/Integration_Guides/Use_MUI_components_in_your_DevExtreme_application

Commands to install project dependencies and start the development server.

```bash
npm i; npm run dev
```

--------------------------------

### Start the React Application

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/React_Components/Add_DevExtreme_to_a_React_Application

Execute the start command to launch the development server.

```bash
  1. npm start
```

--------------------------------

### start()

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/Common/Utils/TransitionExecutor

Starts all registered animations and returns a promise.

```APIDOC
## start()

### Description
Starts all the animations registered using the enter(elements, animation) and leave(elements, animation) methods beforehand.

### Return Value
- **PromiseLike** (Object) - A Promise that is resolved after all the animations are finished.
```

--------------------------------

### start()

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/Common/utils/TransitionExecutor

Starts all animations previously registered via enter() and leave() methods.

```APIDOC
## start()

### Description
Starts all the animations registered using the enter(elements, animation) and leave(elements, animation) methods beforehand.

### Return Value
- **PromiseLike** - A Promise that is resolved after all the animations are finished.
```

--------------------------------

### Install project dependencies

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/Common/Integration_Guides/Bind_DevExtreme_components_to_GraphQL

Command to install the necessary packages for the GraphQL server.

```bash
    1. npm i express cors graphql-http graphql nodemon
```

--------------------------------

### Install DevExtreme CLI

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/Common/DevExtreme_CLI

Global installation command for the DevExtreme CLI tool.

```bash
  1. npm i -g devextreme-cli
```

--------------------------------

### Run the Application

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/React_Components/Application_Template

Navigate to the project directory and start the development server.

```bash
  1. cd app-name
  2. npm run dev
```

--------------------------------

### Install React Router

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/UI_Components/Drawer/Getting_Started_with_Navigation_Drawer

Command to install the react-router-dom package for navigation.

```bash
npm install react-router-dom
```

--------------------------------

### Running Total Calculation Examples

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields

Examples showing the transformation of summary values when runningTotal is applied.

```text
  1. [ 3, 3, 3, 3, 3 ]
```

```text
  1. [ 3, 6, 9, 12, 15 ]
```

--------------------------------

### Console Output Example

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/UI_Components/ButtonGroup/Getting_Started_with_ButtonGroup

Example of log messages generated when a user interacts with the ButtonGroup.

```text
  1. The following style is added: underline
  2. The following style is removed: bold
```

--------------------------------

### Install AWS SDK for .NET

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/Common/Integration_Guides/Manage_Amazon_S3_Storage_with_DevExtreme_Components

Command to install the required AWS S3 SDK package via NuGet.

```bash
  1. dotnet add AWSSDK.S3 --version 3.7.308.2
```

--------------------------------

### Install Client Dependencies

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/Common/Integration_Guides/Bind_DevExtreme_components_to_GraphQL

Install necessary packages for the React application including Apollo Client and DevExtreme.

```bash
    1. cd vite-react
    2. npm i @apollo/client devextreme devextreme-react graphql loadsh whatwg-fetch
```

--------------------------------

### Install DevExtreme via npm

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/Common/Distribution_Channels

Commands to install stable or pre-release versions of DevExtreme packages using npm.

```bash
  1. npm install devextreme@25.1 --save --save-exact
  2. 	
  3. npm install devextreme-react@25.1 --save --save-exact
```

```bash
  1. npm install devextreme@25.1-next --save --save-exact
  2. 	
  3. npm install devextreme-react@25.1-next --save --save-exact
```

--------------------------------

### Install PivotGrid Export Dependencies

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/UI_Components/PivotGrid/Export

Install the required third-party libraries for Excel export functionality.

```bash
  1. npm install --save devextreme-exceljs-fork file-saver
```

--------------------------------

### Install DevExtreme via npm

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/Common/Distribution_Channels/npm

Commands to install stable or pre-release versions of DevExtreme packages using npm with exact version pinning.

```bash
  1. npm install devextreme@26.1 --save --save-exact
  2. 	
  3. npm install devextreme-react@26.1 --save --save-exact
```

```bash
  1. npm install devextreme@26.1-next --save --save-exact
  2. 	
  3. npm install devextreme-react@26.1-next --save --save-exact
```

--------------------------------

### Create a basic FileUploader component

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/UI_Components/FileUploader/Getting_Started_with_FileUploader

Initial setup for the FileUploader component including necessary imports and CSS.

```tsx
  1. import React, { JSX } from 'react';
  2. import { FileUploader } from 'devextreme-react/file-uploader';
  3. import 'devextreme/dist/css/dx.fluent.blue.light.css';
  4.  
  5. export default function App(): JSX.Element {
  6.     return (
  7.         <FileUploader />
  8.     );
  9. }
```

--------------------------------

### Calculate axis start value with minValueMargin

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/UI_Components/dxChart/Configuration/commonAxisSettings

The formula and an example calculation for determining the axis start value based on the minValueMargin ratio.

```text
  1. axisStartValue = minDataValue - (maxDataValue - minDataValue) * minValueMargin
```

```text
  1. axisStartValue = 1960 - (2010 - 1960) * 0.1 = 1960 - 50 * 0.1 = 1960 - 5 = 1955
```

--------------------------------

### Console Output Example

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/UI_Components/ButtonGroup/Getting_Started_with_ButtonGroup

Displays the expected console output when multiple items are selected.

```text
  1. The following styles are selected: bold, underline, strike
```

--------------------------------

### getStartViewDate()

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/UI_Components/dxScheduler/Methods

Gets the current view's start date.

```APIDOC
## getStartViewDate()

### Description
Gets the current view's start date.

### Return Value
- **Date** - The view's start date.
```

--------------------------------

### Initialize a Form component

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/UI_Components/Form/Getting_Started_with_Form

Basic setup for a React Form component including necessary imports and CSS.

```javascript
  1. import React from 'react';
  2. import 'devextreme/dist/css/dx.fluent.blue.light.css';
  3. 	
  4. import {
  5.     Form
  6. } from 'devextreme-react/form';
  7. 	
  8. const App = () => {
  9.     return (
  10.         <div className="App">
  11.             <Form id="form">
  12.                 {/* Configuration goes here */}
  13.             </Form>
  14.         </div>
  15.     );
  16. }
  17. 	
  18. export default App;
```

```css
  1. #form {
  2.     height: 400px;
  3. }
```

--------------------------------

### Initialize Server Folder

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/Common/Integration_Guides/Bind_DevExtreme_components_to_GraphQL

Create the server directory for the backend logic.

```bash
    1. mkdir server
    2. cd server
```

--------------------------------

### startDateField()

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/UI_Components/dxDateRangeBox/Methods

Gets the input element of the start date field.

```APIDOC
## startDateField()

### Description
Gets the <input> element of the UI component's start date field.

### Return Value
- **HTMLElement | jQuery** - An HTML element or a jQuery element if jQuery is used.
```

--------------------------------

### slice(skip, take)

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/Data_Layer/Query/Methods

Gets a specified number of data items starting from a given index.

```APIDOC
## slice(skip, take)

### Description
Gets a specified number of data items starting from a given index.

### Parameters
- **skip** (Number) - Required - The index of the first data item to get.
- **take** (Number | undefined) - Optional - The number of data items to get.

### Return Value
- **Query** - The Query with transformed data.
```

--------------------------------

### Initialize Client Project

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/Common/Integration_Guides/Bind_DevExtreme_components_to_GraphQL

Commands to create a subfolder and initialize a new Vite project.

```bash
    1. mkdir client
    2. cd client
```

```bash
    1. npm create vite@latest
```

--------------------------------

### Guid()

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/Data_Layer/Guid/Methods

Creates a new Guid instance with a generated GUID.

```APIDOC
## new Guid()

### Description
Creates a new Guid instance that contains a generated GUID.

### Example
```javascript
import Guid from 'devextreme/core/guid';
this.guid = new Guid();
```
```

--------------------------------

### Initialize Node.js project

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/Common/Integration_Guides/Bind_DevExtreme_components_to_GraphQL

Commands to create a new directory and initialize a Node.js project.

```bash
    1. mkdir graphql-tutorial
    2. cd graphql-tutorial
    3. npm init
```

--------------------------------

### Guid Methods

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/Data_Layer/Guid

Methods to retrieve the GUID value from a Guid instance.

```APIDOC
## toString()

### Description
Returns the GUID as a string.

## valueOf()

### Description
Returns the GUID value. Works identically to the toString() method.
```

--------------------------------

### Create and Bind a Custom File System Provider

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/UI_Components/dxFileManager/File_System_Providers

Demonstrates initializing a CustomFileSystemProvider with custom operation handlers and binding it to the FileManager component.

```javascript
  1. import React from 'react';
  2. import 'devextreme/dist/css/dx.fluent.blue.light.css';
  3. import FileManager from 'devextreme-react/file-manager';
  4. import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
  5.  
  6. class App extends React.Component {
  7.     render() {
  8.         constructor() {
  9.             super();
  10.             this.fileSystemProvider = new CustomFileSystemProvider({
  11.                 getItems,
  12.                 createDirectory,
  13.                 renameItem,
  14.                 deleteItem,
  15.                 // ...
  16.             });
  17.         }
  18.         return (
  19.             <FileManager 
  20.                 fileSystemProvider={fileSystemProvider}>
  21.             </FileManager>
  22.         );
  23.     }
  24. }
  25. function getItems(parentDirectory) {
  26.     // ...
  27. }
  28. // other functions
  29.  
  30. export default App;
```

--------------------------------

### Import Guid

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/Data_Layer/Guid

Import the Guid object from the common DevExtreme module.

```javascript
import { Guid } from "devextreme/common"
```

--------------------------------

### Configure Default Options for Desktop

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/UI_Components/dxFileManager/Methods

Demonstrates how to apply default configuration properties to all FileManager instances on desktop devices.

```javascript
  1. import dxFileManager from "devextreme/ui/file_manager";
  2. import FileManager from "devextreme-react/file-manager";
  3.  
  4. dxFileManager.defaultOptions({
  5.     device: { deviceType: "desktop" },
  6.     options: {
  7.         // Here go the FileManager properties
  8.     }
  9. });
  10.  
  11. export default function App() {
  12.     return (
  13.         <div>
  14.             <FileManager id="fileManager1" />
  15.             <FileManager id="fileManager2" />
  16.         </div>
  17.     )
  18. }
```

--------------------------------

### Configure DataSource store

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/Data_Layer/DataSource/Configuration/store

Demonstrates initializing a DataSource with an ArrayStore instance, a configuration object, or a raw array.

```javascript
  1. // ...
  2. import DataSource from 'devextreme/data/data_source';
  3. import ArrayStore from 'devextreme/data/array_store';
  4.  
  5. const ds = new DataSource({
  6.     store: new ArrayStore({
  7.         // ArrayStore instance
  8.     })
  9.     // ===== or =====
  10.     store: {
  11.         type: 'array',
  12.         // ArrayStore configuration object
  13.     }
  14.     // ===== or =====
  15.     store: [
  16.         { id: 1, name: 'John Doe' }
  17.     ]
  18. });
  19.  
  20. class App extends React.Component {
  21.     // ...
  22. }
  23. export default App;
```

--------------------------------

### Create a React application with Vite

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/Common/First_Steps

Initializes a new React project using the Vite build tool.

```bash
  1. npm create vite@latest my-app -- --template react
```

--------------------------------

### Guid(value)

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/Data_Layer/Guid/Methods

Creates a new Guid instance from a specified string representation.

```APIDOC
## new Guid(value)

### Description
Creates a new Guid instance that contains the specified GUID.

### Parameters
- **value** (String) - Required - A string representation of the GUID. Hyphens are optional.

### Example
```javascript
import Guid from 'devextreme/core/guid';
this.guid = new Guid("40810dcc-e08b-10a2-8227-c67c8933c31a");
```
```

--------------------------------

### Start the Gatsby Development Server

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/Common/Integration_Guides/Create_a_DevExtreme_application_with_Gatsby

Navigate to the project directory and launch the local development server for live previews.

```bash
  1. cd my-website
  2. gatsby develop
```

--------------------------------

### Retrieve the GUID string using toString()

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/Data_Layer/Guid/Methods

Returns the GUID as a hyphenated string.

```javascript
  1. // ...
  2. import Guid from 'devextreme/core/guid';
  3.  
  4. class App extends React.Component {
  5.     constructor(props) {
  6.         super(props);
  7.  
  8.         this.guid = new Guid("40810dcce08b10a28227c67c8933c31a");
  9.         console.log(this.guid.toString()); // logs 40810dcc-e08b-10a2-8227-c67c8933c31a
  10.     }
  11. }
  12. export default App;
```

--------------------------------

### Initialize a DevExtreme Chart in React

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/UI_Components/Chart/Getting_Started_with_Chart

Basic setup for importing the Chart component and required CSS styles.

```tsx

  1. import React from 'react';
  2. import 'devextreme/dist/css/dx.fluent.blue.light.css';
  3. import Chart from 'devextreme-react/chart';
  4.  
  5. function App() {
  6.     return (
  7.         <Chart id="chart">
  8.             {/* Configuration goes here */}
  9.         </Chart>
  10.     );
  11. }
  12.  
  13. export default App;


```

--------------------------------

### Configure default options for desktop devices

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/UI_Components/dxMenu/Methods

Demonstrates how to use the static defaultOptions method to apply configuration properties to all Menu instances on desktop devices.

```javascript
  1. import dxMenu from "devextreme/ui/menu";
  2. import Menu from "devextreme-react/menu";
  3. 	
  4. dxMenu.defaultOptions({
  5.     device: { deviceType: "desktop" },
  6.     options: {
  7.         // Here go the Menu properties
  8.     }
  9. });
  10. 	
  11. export default function App() {
  12.     return (
  13.         <div>
  14.             <Menu id="menu1" />
  15.             <Menu id="menu2" />
  16.         </div>
  17.     )
  18. }
```

--------------------------------

### Configure Default Properties for Desktop

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/UI_Components/dxScheduler/Methods

Demonstrates how to use the static defaultOptions method to apply configuration properties to all Scheduler instances on desktop devices.

```javascript
  1. import dxScheduler from "devextreme/ui/scheduler";
  2. import Scheduler from "devextreme-react/scheduler";
  3. 	
  4. dxScheduler.defaultOptions({
  5.     device: { deviceType: "desktop" },
  6.     options: {
  7.         // Here go the Scheduler properties
  8.     }
  9. });
  10. 	
  11. export default function App() {
  12.     return (
  13.         <div>
  14.             <Scheduler id="scheduler1" />
  15.             <Scheduler id="scheduler2" />
  16.         </div>
  17.     )
  18. }
```

--------------------------------

### Configure default options for desktop devices

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/UI_Components/dxMultiView/Methods

Demonstrates how to use the static defaultOptions method to apply configuration properties to all MultiView instances on desktop devices.

```javascript
  1. import dxMultiView from "devextreme/ui/multi_view";
  2. import MultiView from "devextreme-react/multi-view";
  3.  
  4. dxMultiView.defaultOptions({
  5.     device: { deviceType: "desktop" },
  6.     options: {
  7.         // Here go the MultiView properties
  8.     }
  9. });
  10.  
  11. export default function App() {
  12.     return (
  13.         <div>
  14.             <MultiView id="multiView1" />
  15.             <MultiView id="multiView2" />
  16.         </div>
  17.     )
  18. }
```

--------------------------------

### Resource and Assignment Data Object Structures

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/UI_Components/Gantt/Gantt_Elements

Example structures for resource definitions and their corresponding task assignments.

```javascript
  1. // Resource
  2. {        
  3.     'id': 1,
  4.     'text': 'Management'       
  5. }
  6. // Resource Assignment
  7. {        
  8.     'id': 0,
  9.     'taskId': 3,
  10.     'resourceId': 1
  11. }
```

--------------------------------

### Initialize Scheduler Component

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/UI_Components/Scheduler/Getting_Started_with_Scheduler

Basic setup for the Scheduler component including required CSS imports and component structure.

```javascript
  1. import 'devextreme/dist/css/dx.fluent.blue.light.css';
  2. import './App.css';
  3. 	
  4. import { Scheduler } from 'devextreme-react/scheduler';
  5. 	
  6. function App() {
  7.     return (
  8.         <Scheduler id="scheduler">
  9.             {/* Configuration goes here */}
  10.         </Scheduler>
  11.     );
  12. }
  13. 	
  14. export default App;
```

```css
  1. #scheduler {
  2.     height: 600px;
  3. }
```

--------------------------------

### Get Help for Node.js Generation Script

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/UI_Components/VectorMap/Providing_Data

Display help information for the generation script parameters.

```bash
  1. node dx.vectormaputils.node.js --help
```

--------------------------------

### Create a new Guid instance

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/Data_Layer/Guid/Methods

Initializes a new Guid instance with a generated value.

```javascript
  1. // ...
  2. import Guid from 'devextreme/core/guid';
  3.  
  4. class App extends React.Component {
  5.     constructor(props) {
  6.         super(props);
  7.  
  8.         this.guid = new Guid();
  9.     }
  10. }
  11. export default App;
```

--------------------------------

### Configure default options for desktop

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/UI_Components/dxSwitch/Methods

Demonstrates how to use the static defaultOptions method to apply properties to all Switch instances on desktop devices.

```javascript
  1. import dxSwitch from "devextreme/ui/switch";
  2. import Switch from "devextreme-react/switch";
  3.  
  4. dxSwitch.defaultOptions({
  5.     device: { deviceType: "desktop" },
  6.     options: {
  7.         // Here go the Switch properties
  8.     }
  9. });
  10.  
  11. export default function App() {
  12.     return (
  13.         <div>
  14.             <Switch id="switch1" />
  15.             <Switch id="switch2" />
  16.         </div>
  17.     )
  18. }
```

--------------------------------

### Initialize PivotGrid and Chart Components

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/UI_Components/PivotGrid/Integration_with_Chart

Basic setup for rendering both PivotGrid and Chart components within a React application.

```tsx
  1. import React from 'react';
  2. import PivotGrid from 'devextreme-react/pivot-grid';
  3.  
  4. const App = () => {
  5.     return (
  6.         <React.Fragment>
  7.             <PivotGrid />
  8.             <Chart />
  9.         </React.Fragment>
  10.     );
  11. }
  12.  
  13. export default App;
```

--------------------------------

### Configure FileUploader properties

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/UI_Components/FileUploader/Getting_Started_with_FileUploader

Example demonstrating how to enable multiple file selection, manual upload buttons, and cancellation functionality.

```tsx
  1. export default function App(): JSX.Element {
  2.     return (
  3.         <FileUploader
  4.             multiple={true}
  5.             uploadMode="useButtons"
  6.             allowCanceling={true}
  7.         />
  8.     );
  9. }
```

--------------------------------

### Install Globalize via npm

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/Common/Localization

Use npm to install the necessary packages for localization.

```Bash
npm install --save-dev devextreme-cldr-data globalize
```

--------------------------------

### Install Azure Storage SDK

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/Common/Integration_Guides/Manage_Azure_Blob_Storage_with_DevExtreme_Components

Use the .NET CLI to add the required Azure Storage Blobs package to your project.

```bash
  1. dotnet add Azure.Storage.Blobs --version 12.19.1
```

--------------------------------

### Create a basic DateRangeBox

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/UI_Components/DateRangeBox/Getting_Started_with_DateRangeBox

Initial setup for the DateRangeBox component in a React application.

```javascript
  1. import React from 'react';
  2. 	
  3. import 'devextreme/dist/css/dx.fluent.blue.light.css';
  4. 	
  5. import { DateRangeBox } from 'devextreme-react/date-range-box';
  6. 	
  7. export default function App() { 
  8.     return (
  9.         <DateRangeBox ...
 10.             // Configuration goes here
 11.         />
 12.     );
 13. }
```

--------------------------------

### Margin Configuration Example

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/UI_Components/dxFunnel/Configuration

Example of how to configure the margin property within the Funnel component.

```APIDOC
import Funnel, { Margin } from 'devextreme-react/funnel';

<Funnel>
    <Margin
        top={20}
        bottom={20}
        left={30}
        right={30}
    />
</Funnel>
```

--------------------------------

### Configure default properties for Resizable

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/UI_Components/dxResizable/Methods

Demonstrates how to set default configuration properties for all Resizable instances on desktop devices.

```javascript
  1. import dxResizable from "devextreme/ui/resizable";
  2. import Resizable from "devextreme-react/resizable";
  3. 	
  4. dxResizable.defaultOptions({
  5.     device: { deviceType: "desktop" },
  6.     options: {
  7.         // Here go the Resizable properties
  8.     }
  9. });
  10. 	
  11. export default function App() {
  12.     return (
  13.         <div>
  14.             <Resizable id="resizable1" />
  15.             <Resizable id="resizable2" />
  16.         </div>
  17.     )
  18. }
```

--------------------------------

### Check Node.js Version

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/Troubleshooting/DevExtreme_CLI_Issues/Create_a_New_Application

Verify the currently installed Node.js version.

```bash
  1. node -v
```

--------------------------------

### Configure default options for desktop devices

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/UI_Components/dxDiagram/Methods

Demonstrates how to use the static defaultOptions method to apply configuration properties to all Diagram instances on desktop devices.

```javascript
  1. import dxDiagram from "devextreme/ui/diagram";
  2. import Diagram from "devextreme-react/diagram";
  3. 	
  4. dxDiagram.defaultOptions({
  5.     device: { deviceType: "desktop" },
  6.     options: {
  7.         // Here go the Diagram properties
  8.     }
  9. });
  10. 	
  11. export default function App() {
  12.     return (
  13.         <div>
  14.             <Diagram id="diagram1" />
  15.             <Diagram id="diagram2" />
  16.         </div>
  17.     )
  18. }
```

--------------------------------

### Configure Default Options for Desktop

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/UI_Components/dxDrawer/Methods

Demonstrates how to use the static defaultOptions method to apply configuration properties to all Drawer instances on desktop devices.

```javascript
  1. import dxDrawer from "devextreme/ui/drawer";
  2. import Drawer from "devextreme-react/drawer";
  3. 	
  4. dxDrawer.defaultOptions({
  5.     device: { deviceType: "desktop" },
  6.     options: {
  7.         // Here go the Drawer properties
  8.     }
  9. });
  10. 	
  11. export default function App() {
  12.     return (
  13.         <div>
  14.             <Drawer id="drawer1" />
  15.             <Drawer id="drawer2" />
  16.         </div>
  17.     )
  18. }
```

--------------------------------

### Install Export Libraries

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/UI_Components/dxDataGrid/Configuration/export

Commands to install the necessary dependencies for Excel and PDF export functionality.

```bash
    1. <!-- Export to Pdf  -->
    2. npm install jspdf
    3.  
    4. <!-- Export to Excel -->
    5. npm install --save devextreme-exceljs-fork file-saver
```

--------------------------------

### Define Sample Data for Transformation

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/Data_Layer/Data_Layer

Initializes a sample array of objects for use in data transformation examples.

```JavaScript
  1. const data = [
  2.     {
  3.         firstName: "John",
  4.         lastName: "Smith",
  5.         city: "San Francisco"
  6.     },
  7.     {
  8.         firstName: "Xavier",
  9.         lastName: "Lee",
  10.         city: "New York"
  11.     },
  12.     {
  13.         firstName: "Maria",
  14.         lastName: "Gomez",
  15.         city: "Denver"
  16.     }
  17. ];
```

--------------------------------

### beginCustomLoading(text)

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/UI_Components/dxCardView/Methods

Displays the load panel manually.

```APIDOC
## beginCustomLoading(text)

### Description
Displays the load panel. When opened manually, the load panel remains visible until endCustomLoading() is called.

### Parameters
- **text** (String) - Optional - The text for the load panel to display.
```

--------------------------------

### Configure default options for desktop devices

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/UI_Components/dxStepper/Methods

Demonstrates how to use the static defaultOptions method to apply global configuration properties to all Stepper instances on desktop devices.

```javascript
  1. import dxStepper from "devextreme/ui/stepper";
  2. import Stepper from "devextreme-react/stepper";
  3. 	
  4. dxStepper.defaultOptions({
  5.     device: { deviceType: "desktop" },
  6.     options: {
  7.         // Here go the Stepper properties
  8.     }
  9. });
  10. 	
  11. export default function App() {
  12.     return (
  13.         <div>
  14.             <Stepper id="stepper1" />
  15.             <Stepper id="stepper2" />
  16.         </div>
  17.     )
  18. }
```

--------------------------------

### Retrieve the GUID string using valueOf()

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/Data_Layer/Guid/Methods

Returns the GUID as a hyphenated string, functioning identically to toString().

```javascript
  1. // ...
  2. import Guid from 'devextreme/core/guid';
  3.  
  4. class App extends React.Component {
  5.     constructor(props) {
  6.         super(props);
  7.  
  8.         this.guid = new Guid("40810dcce08b10a28227c67c8933c31a");
  9.         console.log(this.guid.valueOf()); // logs 40810dcc-e08b-10a2-8227-c67c8933c31a
  10.     }
  11. }
  12. export default App;
```

--------------------------------

### Install DevExtreme Packages Manually

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/React_Components/Add_DevExtreme_to_a_React_Application

Install specific versions of the core and React-wrapper packages using npm.

```bash
  1. npm install devextreme@24.2 devextreme-react@24.2 --save --save-exact
```

--------------------------------

### Configure default options for desktop

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/UI_Components/dxPagination/Methods

Demonstrates how to apply default configuration properties to all Pagination instances on desktop devices.

```javascript
  1. import dxPagination from "devextreme/ui/pagination";
  2. import Pagination from "devextreme-react/pagination";
  3.  
  4. dxPagination.defaultOptions({
  5.     device: { deviceType: "desktop" },
  6.     options: {
  7.         // Here go the Pagination properties
  8.     }
  9. });
  10.  
  11. export default function App() {
  12.     return (
  13.         <div>
  14.             <Pagination id="pagination1" />
  15.             <Pagination id="pagination2" />
  16.         </div>
  17.     )
  18. }
```

--------------------------------

### Retrieve data items by key using CustomStore

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/Data_Layer/CustomStore/Methods

Demonstrates initializing a CustomStore with single or composite keys and using the byKey method to fetch data items.

```javascript
  1. // ...
  2. import CustomStore from 'devextreme/data/custom_store';
  3.  
  4. // The key consists of a single data field
  5. const singleKeyStore = new CustomStore({
  6.     key: "field1",
  7.     // ...
  8. });
  9.  
  10. // The key consists of several data fields
  11. const compositeKeyStore = new CustomStore({
  12.     key: [ "field1", "field2" ],
  13.     // ...
  14. });
  15.  
  16. class App extends React.Component {
  17.     constructor(props) {
  18.         super(props);
  19.  
  20.         // Gets the data item with "field1" being equal to 1
  21.         singleKeyStore.byKey(1).then(
  22.             (dataItem) => { /* Process the "dataItem" here */ },
  23.             (error) => { /* Handle the "error" here */ }
  24.         );
  25.  
  26.         // Gets the data item with both "field1" and "field2" being equal to 1
  27.         compositeKeyStore.byKey({
  28.             field1: 1,
  29.             field2: 1
  30.         }).then(
  31.             (dataItem) => { /* Process the "dataItem" here */ },
  32.             (error) => { /* Handle the "error" here */ }
  33.         );
  34.     }
  35.     // ...
  36. }
  37. export default App;
```

--------------------------------

### Install React Testing Library

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/React_Components/Components_Testing

Use this command to add the React Testing Library to your project if it is not already included.

```bash
npm install --save-dev @testing-library/react
```

--------------------------------

### Install Required Dependencies

Source: https://js.devexpress.com/React/Documentation/25_1/ApiReference/UI_Components/dxPivotGrid/Configuration/export

Install the necessary ExcelJS and FileSaver libraries to enable client-side export functionality.

```bash
    1. npm install --save devextreme-exceljs-fork file-saver
```

--------------------------------

### Implement CustomStore for Lazy Loading

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/UI_Components/Scheduler/Optimize_Scheduler_Performance_with_Lazy_Loading

Create a CustomStore to fetch appointments from the server based on specific start and end date parameters.

```javascript
    1. const myCustomStore = new CustomStore({
    2.     key: 'id',
    3.     async load(loadOptions) => {
    4.         const startDate = loadOptions.startDate;
    5.         const endDate = loadOptions.endDate;
    6.         try {
    7.             const response = await fetch(`https://my-server.com/api/appointments?startDate={startDate}&endDate={endDate}`);
    8.             const result = await response.json();
    9.                 return {
    10.                     data: result.data;
    11.                 }
    12.         } catch (err) {
    13.             throw new Error('Data Loading Error');
    14.         }
    15.     }
    16. });
```

--------------------------------

### Widgets Argument Syntax

Source: https://js.devexpress.com/React/Documentation/25_1/Guide/Common/DevExtreme_CLI

Example syntax for specifying a comma-separated list of UI components.

```bash
    1. --widgets=datagrid,treelist,selectbox
```
Tokens:
Raw