Telerik blogs
KendoReact Creating Robust React Applications_870_220
In this second post of the Getting Started with KendoReact series, Eric Bishard helps you better understand KendoReact so you can build more robust applications. See what KendoReact can do for you, the React developer!

Back to the first post of the series, KendoReact: What Can It Do for You?

 

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.
KendoReact 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 React 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>


Check out the third post of the series, KendoReact: Adding a Grid, Dropdown List and More.

Eric Bishard
About the Author

Eric Bishard

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.

Related Posts

Comments

Comments are disabled in preview mode.