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.
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>
Check out the third post of the series, KendoReact: Adding a Grid, Dropdown List and More