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.
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
Before getting started on the Kendo components, you can delete the contents of
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>
Eric Bishard is a Developer Advocate and former member of the KendoReact team at Progress. A software engineer with experience building web based applications with a focus on components for user interfaces in Angular and React, Eric works with @Couchbase, tweets @httpJunkie and blogs at ReactStateofMind.com.
Subscribe to be the first to get our expert-written articles and tutorials for developers!