DevExtreme React - Application Template

The DevExtreme React Application Template helps you create a simple React application with a navigation menu and several sample views in a responsive layout (see live preview).

View Video

npx devextreme-cli new react-app app-name
// ===== or generate a template with TypeScript =====
npx devextreme-cli new react-app app-name --template=typescript
cd app-name
npm run start

The application already contains the DataGrid and Form components. You can find their configurations in the src\pages\tasks\tasks.js and src\pages\profile\profile.js files correspondingly.

The application includes two layouts. The only difference between them is where the toolbar is located: outer (default) or inner toolbar.

Outer toolbar

Inner toolbar

To switch to another layout, open the src\Content.js file and replace the SideNavOuterToolbar import with SideNavInnerToolbar:

import {
  SideNavInnerToolbar as SideNavBarLayout,
  SingleCard
} from './layouts';

To generate a new application with an inner toolbar, set the --layout flag to side-nav-inner-toolbar:

npx devextreme-cli new react-app app-name --layout=side-nav-inner-toolbar

Run the following command to add a new view. --icon specifies an icon from the DevExtreme icon library.

npx devextreme add view view-name [--icon=IconName]

You can find the added view under the src\pages folder. This command also creates a navigation menu item for the added view in the src\app-navigation.js file.

Edit the src\app-navigation.js file to configure navigation menu items. Each item configuration can have the following fields:

• text - the item's text

• icon - the item's icon

• path - a navigation path associated with the item

• items - child items

{
    text: 'Category',
    icon: 'folder',
    items: [{
        text: 'About',
        path: '/about'
    }]
}

In the closed state, the navigation menu is partially visible because it displays item icons. If the items do not have icons, you can hide the menu. To do this, open the SideNavOuterToolbar or SideNavInnerToolbar component (depending on the used layout), find the Drawer configuration, and set its minSize property to 0:

// ...
export default function ({ title, children }) {
    // ...
    return (
        <div className={'side-nav-inner-toolbar'}>
            <Drawer ...
                minSize={0}>
                {/* ... */}
            </Drawer>
        </div>
    );
}

The application template uses the DevExtreme Toolbar component. The Toolbar is part of the Header component whose configuration is in the src\components\header\Header.js file. To add a custom toolbar item, open this file and add an Item element inside Toolbar. Refer to the items help section for information on Item properties.

The following code adds a search button to the toolbar:

// ...
export default ({ ..., search }) => (
    <header className={'header-component'}>
        <Toolbar className={'header-toolbar'}>
            {/* ... */}
            <Item location="after">
                <Button icon="search" onClick={search} />
            </Item>
            {/* ... */}
        </Toolbar>
    </header>
)

// ...
export default function ({ title, children }) {
    // ...
    const search = useCallback(() => {
        console.log("search");
    }, []);

    return (
        <div className={'side-nav-outer-toolbar'}>
            <Header ...
                search={search}
            />
            {/* ... */}
        </div>
    );
}

In the code above, the button click handler is declared in the SideNavOuterToolbar component. This component applies when the outer toolbar layout is used. If the application uses the inner toolbar layout, add the same code to the SideNavInnerToolbar component.

You can switch between themes in the DevExtreme React Template. src\theme.tsx contains the theme switcher logic.

The template uses a main theme for view content and an additional theme (color swatch) for the navigation menu. The corresponding .JSON files are shown below.

The default theme is fluent.blue.light. To switch to another theme, open the .JSON file and assign the theme name to the baseTheme field:

{
    // ...
    "baseTheme": "material.blue.light",
    // ...
}

{
    // ...
    "baseTheme": "material.blue.light",
    // ...
}

{
    // ...
    "baseTheme": "material.blue.dark",
    // ...
}

{
    // ...
    "baseTheme": "material.blue.dark",
    // ...
}

You can find all theme names in the Predefined Themes help topic. Use theme names without the dx prefix.

After making changes in the .JSON files, run the following command to rebuild themes:

npm run build-themes

You can use the DevExtreme ThemeBuilder to create custom themes based on predefined themes. Follow the steps below:

1. Import theme .JSON file to the ThemeBuilder.

2. Customize the theme.

3. Export theme metadata to the initial file (see Postpone Customization).

Run the following command to rebuild themes:

npm run build-themes

Color swatches are secondary color schemes used alongside a primary color scheme.

In the DevExtreme React Template, a color swatch is applied to the navigation menu. You can configure it in the src\themes\metadata.additional.json and src\themes\metadata.additional.dark.json files. To use this color swatch on an element, add the dx-swatch-additional class (or dx-swatch-additional-dark for a dark theme) to the element:

<div className={`dx-swatch-additional${theme?.isDark() ? '-dark' : ''}`}>
    <!-- Your content here -->
</div>

Theme variables are defined in the src\variables.scss file. Apply the variables to custom elements, so that the elements have a uniform appearance with the rest of the application.

The following code applies the var(--base-accent) variable as the background-color of my-element:

// Your SCSS file
@‌use "../../../variables.scss";

#my-element {
    background-color: var(--base-accent);
}

A DevExtreme React application includes authentication UI and API. Client-side routing is configured so that unauthenticated users can navigate to authentication pages only. These pages allow the users to sign in, create a new account, or reset the password.

Authentication pages are rendered by the UnauthenticatedContent.js component. The rest of the application is rendered by the Content.js component.

Stub authentication functions for back-end requests are located in the src\api\auth.js file. Update these functions to make actual requests to your back end.

Each function returns an object with the following fields:

User information is stored in a context declared in the contexts\auth.js module.

To access user information from any part of the application, use the useAuth hook. This hook returns an object with the following fields:

The following code uses the useAuth hook to access user information:

import { useAuth } from './contexts/auth'; 

export default function() { 
    const { user } = useAuth(); 
    if (user) { 
        // User is authenticated 
        ...
    } 
    ... 
}

To generate an application with empty data, use the --empty flag (the layout remains the same):

npx devextreme-cli new react-app app-name --empty

See Also

• Add DevExtreme to a React application