It takes several steps to include DevExtreme in a React application project. Of course we optimized the process as much as possible, so it’s not really complicated – but it can be time-consuming and it requires attention to detail. To make things easier, we created the DevExtreme React Application Template and extended the DevExtreme CLI to generate and modify your projects.
Template Features
The template implements a responsive application with a navigation menu and several sample views. A choice of layouts is available:
- The layout
side-nav-outer-toolbarshows a top-level toolbar across the entire page width. A Drawer component is located underneath that toolbar. side-nav-inner-toolbarshows the Drawer at full page height. Technically, the toolbar is wrapped in the Drawer, so they show side by side.- The
single-cardlayout shows a single adaptive card element on its own.
By default, the template applies one of side-nav-outer-toolbar and side-nav-inner-toolbar to all pages viewed by an authenticated user, while single-card is used to show a login form if the user is not authenticated. The layouts map to React components, so you can change this later as required.
To allow application components to adapt to screen size changes, we created a utility called media-query. Several default breakpoints are configured in that file, and you can see how the App and toolbar components use the information to change their appearances and layouts when screen sizes change.
The navigation menu shown in the Drawer is based on the DevExtreme TreeView component. We use react-router-dom to implement routing in the template.
The application template uses two DevExtreme themes, a base theme and an additional theme. The additional theme is used by default to render the navigation menu. For the base theme, the default is material.orange.light, while the additional theme is material.orange.dark. It is possible to switch to different themes by editing the metadata files in the themes folder and running npm run build-themes to regenerate the .css files and .scss variables.
You can also use the DevExtreme Theme Builder for more complex theme changes.
DevExtreme CLI
Of course it would be possible to download a copy of the template application from its GitHub repository and start working from there. However, our command line interface makes this easier, and it offers a few useful options. Install devextreme-cli like this:
> npm install -g devextreme-cli
The command devextreme is then available. It has built-in help documentation that shows if you run it without parameters.
To create a new React app using DevExtreme, use a command like this:
> devextreme new react-app my-app-name --layout side-nav-outer-toolbar [--empty]
If a layout is not given on the command line, you will be prompted for it. The brackets around --empty denote this as an optional parameter. If you provide it, the resulting application will not contain any sample views.
Alternatively, if you already have a React project, you can install the dependencies devextreme and devextreme-react as well as the required stylesheet references using this command:
> devextreme add devextreme-react
There is also a command available to add a view to an application based on the template. The new view is automatically added to the navigation menu and the routing configuration.
> devextreme add view my-view-name [--icon]
Your Feedback Counts
Please feel free to leave comments below, if you have any thoughts on our implementation. There is also a GitHub issue dedicated to this feature set, and it would be great if you could submit a quick response to this poll to help us analyze how we’re doing.