KendoReact: Creating Robust React Applications

The first thing that we're going to do today is use create-react-app. Then, we'll locate the components we're going to use from the KendoReact site, and install them using node package manager.

We will also install the Kendo default theme.

We first build out the project using create-react-app. If you are new to Create React App, check out this article to learn more. Otherwise, let's open our terminal and globally install it (if needed):

npm install create-react-app -g

Once installed we can run create-react-app anytime we want, let's do just that.

create-react-app kendo-react

We'll mostly be working in the src directory. Remember you can always refer to the KendoReact documentation to get more information about all the components. For this project we'll be working with Buttons, DropDowns, NumericTextBox and Data Grid components.

First, let's just install the buttons. We see that in the Buttons documentation that we have an Installation section that let's us know how to get started. We just need to install the Buttons library with npm by running:

npm install @progress/kendo-react-buttons

That will save the package to the project's package.json and all Kendo packages follow this same naming convention:

npm install @progress/kendo-react-<componennt-name>

Now lets install the rest of the packages we need: DropDowns, NumericTextBoxes and also the internationalization package, which is required for globalization features in KendoReact components.

npm install @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs @progress/kendo-react-pdf @progress/kendo-drawing

Now we can go ahead and talk about the theme. In order to get some nice, modern styling, we need to install one of these themes. For this project, we actually won't be doing any customization in CSS, we'll solely rely on the styling from the theme. If you do want to customize, you can use the Progress Theme Builder. This builder lets you customize your theme for any Kendo UI component library. You can use Material, Bootstrap or your own custom settings using those themes as a starting point.

For today, we are actually just going to install the default theme. All we are going to do is run:

npm install @progress/kendo-theme-default

This package is now added to your package.json and also resides in your node_modules directory and we can include it in React with a simple import. Next, we import the theme CSS into our App.js page:

import '@progress/kendo-theme-default/dist/all.css';

Before getting started on the Kendo components, you can delete the contents of App.css, the logo.svg and its import statement at the top of the App.js file. While we're editing the App.js file, let's replace the HTML (JSX) with the following:

<div> <h1>KendoReact Grid</h1> </div>