Getting Started with KendoReact

In this article, you'll learn the basics about working with KendoReact. First, you’ll complete the installation steps necessary to get KendoReact up and running. Next, you’ll see how to use multiple KendoReact components. And finally, you’ll find a few useful learning resources that will help you be successful with KendoReact.

Let’s get started.

New to KendoReact? KendoReact is an enterprise-grade React UI library with 120+ free and premium components for building polished, performant apps. Test-drive its full capabilities with a free 30-day trial.Start Free Trial

Installing Your First KendoReact Component

Prerequisites

KendoReact now offers seamless compatibility with React 19, empowering you to build modern, fast, and robust UI components with confidence. Start building with the latest version of React today!

React 18 (or a version >= 16.8.x)
NodeJS 18 (or a version >= 14). Use the node -v command to check your node versions.
A bash terminal of your choice, for example, the one available in the Visual Studio Code console.

1. Creating the React App

The easiest way to start with KendoReact is to use the create-kendoreact-app tool—a thin wrapper around the popular create-react-app. The create-kendoreact-app tool provides a setup wizard that guides you through the process of creating a new React application with KendoReact components. The tool handles the following tasks for you:

Creates a new KendoReact project.
Configures the project to use TypeScript or JavaScript.
Optionally adds SASS support.
Installs a KendoReact visual theme and imports the KendoReact styles.
Installs all KendoReact components and makes them available for import.

To start your first KendoReact project:

Use npx to fetch and run the create-kendoreact-app package.
bash
```
npx create-kendoreact-app
```

Answer the questions in the setup wizard as demonstrated below.

? What is the name of your project? my-kendoreact-app
? Do you want to use TypeScript? No
? Do you want to use SASS? Yes
? Which Kendo UI Theme do you want to use?
❯ default
  bootstrap
  material

When you use the options listed above, create-kendoreact-app scaffolds the React project and configures it to use SASS. The tool also installs the KendoReact Default visual theme and imports the required CSS file. If you prefer the Bootstrap or Material theme instead, select the corresponding option in the last step.

As create-kendoreact-app creates a small app with a KendoReact Button component, let's clean up this sample app by removing the following lines from src/App.js:

The imported Button and the kendoka.
The handleClick event handler.
Everything inside the App container div: <div className="App"> ... </div>.

The clean src/App.js will look like this:

jsx

import React from 'react';
import './App.scss';

function App() {
    return <div className="App"></div>;
}

export default App;

2. Using KendoReact Components

KendoReact is a library of 120+ UI components. In this section, you’ll learn how to use one of these components, the React Calendar, in only two steps.

The create-kendoreact-app tool has already installed all KendoReact components and their dependencies. So the next step to use any of these components is importing them. KendoReact is distributed as multiple npm packages scoped to @progress. For example, the Calendar component is part of the @progress/kendo-react-dateinputs package.

Import the Calendar into src/App.js.

jsx

import { Calendar } from '@progress/kendo-react-dateinputs';

Then, add the Calendar component to your markup. Now you have a fully functioning calendar in two lines of code!

jsx

return (
    <div className="App">
        <h1>Hello KendoReact!</h1>
        <Calendar />
    </div>
);

Using any other KendoReact component is as straightforward as using the Calendar—you import the component and use the component’s markup in your apps.

As a final step to getting KendoReact up and running, let’s look at how to handle licensing.

3. Activating Your Trial or Commercial License (Not Needed for Free Components)

KendoReact is an enterprise-grade UI library with 120+ free and premium components. Over 50 components, such as the Calendar, are free to use without a license, even in production. However, if you want to unlock the premium components and features of KendoReact, you need a commercial license.

Using any of the KendoReact premium UI components requires either a commercial license key or an active trial license key.

Since KendoReact version 5.16.0 (25 July 2023), a missing license causes a watermark to appear over selected components. For more information, see the Invalid License section. More information about the introduced changes can be found in this Invalid License section.

To experience the full potential of the KendoReact components, follow the instructions on the My License page to activate your license and hide the invalid/non-activated license attributes.

Now that you have a KendoReact theme installed, components imported, and licensing set up, you’re ready to start developing with KendoReact! Feel free to explore the full list of KendoReact components or follow the tutorial below to learn how to combine multiple KendoReact components and make them work together.

Integrating Multiple KendoReact Components

KendoReact is a rich suite of modular React components. Next, you’ll use three of these components: the React Grid, React Window, and React DropDownList to build a small demo application.

Before continuing, first remove the Calendar from the page so that you have a blank app to work with.

1. Adding the KendoReact Data Grid

The KendoReact Data Grid provides 100+ ready-to-use features, covering everything from paging, sorting, filtering, editing, and grouping, to row and column virtualization and Excel/PDF export. This React Data Grid is free to use, but if you want to tap into its premium features, such as React server components (RSC) mode, custom cell rendering, advanced filtering, data export, and others, you need a commercial license or an active trial license.

In this section, you’ll try out several Grid features, but let’s start by importing the component and adding some sample data.

Import the components into your src/App.js file.

jsx

import { Grid, GridColumn } from '@progress/kendo-react-grid';

To add some sample data, create a src/products.json file, and then copy-paste this content from GitHub into the new file.
Import the sample data into src/App.js.
jsx
```
import products from './products.json';
```

Create a Grid and bind it to your list of products.

jsx

<Grid data={products}>
    <GridColumn field="ProductName" />
    <GridColumn field="UnitPrice" />
    <GridColumn field="UnitsInStock" />
    <GridColumn field="Discontinued" />
</Grid>

When your browser refreshes, you’ll see your first basic KendoReact Data Grid! Next, you will add the DropDownList component, and then you will use it to enable Grid filtering and several advanced features.

2. Adding the KendoReact DropDownList

Adding the KendoReact DropDownList allows you to display all available categories of products. This is a free React DropDownList component, and you need a license to use its premium filtering and virtualization functionality.

To use the component, you must import it and bind it to data.

Import the DropDownList into your src/App.js file.

jsx

import { DropDownList } from '@progress/kendo-react-dropdowns';

Create a new src/categories.json file and paste this content from GitHub. This will be the sample data for the DropDownList.

Import the newly added data.

jsx

import categories from './categories.json';

Bind the DropDownList to a list of categories from the sample data.

jsx

<p>
    <DropDownList data={categories} dataItemKey="CategoryID" textField="CategoryName" />
</p>

The data property of the DropDownList points to an array of objects or primitive values. In this case, you use an array of objects and therefore specify both the dataItemKey and textField properties.

To display a hint for the users when no item is selected, use the defaultItem property. The default item must have a field that matches the textField name.

DropDownList Code with Enabled Features

The following code represents a sample DropDownList implementation that also renders the ID of the selected category next to the DropDownList. To achieve this, define a category field in the application state and implement an onChange handler.

To see the DropDownList in use, copy the sample code below and add it to your src/App.js file.

jsx

import React, { Component } from 'react';
import './App.scss';
import categories from './categories.json';
import { DropDownList } from '@progress/kendo-react-dropdowns';

function App() {
    const [category, setCategory] = React.useState(null);

    const handleDropDownChange = React.useCallback((event) => {
        setCategory(event.target.value.CategoryID);
    }, []);

    return (
        <div className="App">
            <h1>Hello KendoReact!</h1>
            <p>
                <DropDownList
                    data={categories}
                    dataItemKey="CategoryID"
                    textField="CategoryName"
                    defaultItem={{ CategoryID: null, CategoryName: 'Product categories' }}
                    onChange={handleDropDownChange}
                />
                &nbsp; Selected category ID: <strong>{category}</strong>
            </p>
        </div>
    );
}

export default App;

3. Configuring an Advanced React Grid with DropDownList Filtering

To make this sample Grid resemble a real-world scenario, let's use a portion of the Grid APIs and add the features listed below. Here you will also learn how to enable the local data operations of the Grid and configure the already created DropDownList to filter the bound data.

Enabling Grid Features

When you familiarize yourself with the Grid API, copy-paste the updated sample App.js code in your app and see the features listed below in use.

To activate scrolling, add a height style to the Grid (enabled by default).
jsx
```
<Grid style={{ height: '400px' }}></Grid>
```

Add user-friendly column titles.

jsx

<GridColumn field="ProductName" title="Product Name" />

Format the numbers in the Price column.

jsx

<GridColumn field="UnitPrice" title="Price" format="{0:c}" />

(Premium) Enable paging and sorting. These features require you to enable data operations.
jsx
```
<Grid pageable={true} sortable={true}></Grid>
```

(Premium) Display the boolean values in the Discontinued column as checkboxes. For this purpose, you will customize the table cell rendering through the cell property and a custom checkboxColumn component.

jsx

<Grid>
    <GridColumn field="Discontinued" cell={checkboxColumn} />
</Grid>

To define the custom checkboxColumn component:

jsx

const CheckboxColumn = (props) => {
    return (
        <td>
            <input type="checkbox" checked={props.dataItem[props.field]} disabled="disabled" />
        </td>
    );
};

Enabling Local Data Operations

This section looks at some of the premium Data Grid features. To be able to complete this part of the tutorial, you need a commercial license or an active trial license.

Features like sorting, filtering, and paging require you to configure data operations. As the Grid in this tutorial is bound to local (client-side) data, enable local data operations by following these steps:

Enable each data operation separately in the Grid declaration (pageable={true} and sortable={true}).
Configure the data operation settings and the initial state of the Grid data. For example:
- The initial page (skip) will be the first one.
- The page size (take) will be 10.
- The Grid will be initially sorted by Product Name.
- You will save all these settings in the App state as dataState and apply them in bulk to the Grid with {...dataState}.
Define an onDataStateChange handler. Its purpose is to update dataState after each user interaction. In turn, this will cause the Grid to refresh and display the expected data.
To display the correct Grid data, you bind the Grid to the output of a function, rather than the products array directly. For this purpose, import the process function from the kendo-data-query package.
jsx
```
import { process } from '@progress/kendo-data-query';
```
Finally, add Grid filtering through the DropDownList. To do that, use the existing handleDropDownChange function and add a filter descriptor to gridDataState. As the number of data items and pages will decrease, reset the page index (skip) to zero.

Sample Code with all React Grid Features Enabled

To see all these features in action, copy the updated App.js code below. This code includes the implementation for the features described above.

jsx

import React, { Component } from 'react';
import './App.scss';
import categories from './categories.json';
import products from './products.json';
import { process } from '@progress/kendo-data-query';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import { Window } from '@progress/kendo-react-dialogs';

function App() {
    const [categody, setCategory] = React.useState(null);
    const [dataState, setDateState] = React.useState({
        sort: [{ field: 'ProductName', dir: 'asc' }],
        skip: 0,
        take: 10
    });

    const handleDropDownChange = React.useCallback(
        (event) => {
            let newDataState = { ...dataState };
            if (event.target.value.CategoryID !== null) {
                newDataState.filter = {
                    logic: 'and',
                    filters: [
                        {
                            field: 'CategoryID',
                            operator: 'eq',
                            value: event.target.value.CategoryID
                        }
                    ]
                };
                newDataState.skip = 0;
            } else {
                newDataState.filter = [];
                newDataState.skip = 0;
            }

            setCategory(event.target.value.CategoryID);
            setDateState(newDataState);
        },
        [dataState]
    );

    const handleGridDataStateChange = (event) => {
        setDateState(event.dataState);
    };

    return (
        <div className="App">
            <h1>Hello KendoReact!</h1>
            <p>
                <DropDownList
                    data={categories}
                    dataItemKey="CategoryID"
                    textField="CategoryName"
                    defaultItem={{ CategoryID: null, CategoryName: 'Product categories' }}
                    onChange={handleDropDownChange}
                />
                &nbsp; Selected category ID: <strong>{categody}</strong>
            </p>

            <Grid
                data={process(products, dataState)}
                pageable={true}
                sortable={true}
                {...dataState}
                onDataStateChange={handleGridDataStateChange}
                style={{ height: '400px' }}
            >
                <GridColumn field="ProductName" title="Product Name" />
                <GridColumn field="UnitPrice" title="Price" format="{0:c}" />
                <GridColumn field="UnitsInStock" title="Units in Stock" />
                <GridColumn field="Discontinued" cell={CheckboxColumn} />
            </Grid>
        </div>
    );
}

const CheckboxColumn = (props) => {
    return (
        <td>
            <input type="checkbox" checked={props.dataItem[props.field]} disabled="disabled" />
        </td>
    );
};

export default App;

In this section, you added a robust Data Grid to your application—enhanced with paging, filtering, and sorting—and you explored the KendoReact APIs.

Feel free to explore the KendoReact Grid documentation pages to get a sense of just how many things the Grid can do. Next, let's add a KendoReact DropDownList to the React app.

4. Adding the KendoReact Window

The products array contains some fields that are not displayed in the Grid that you added previously. To display these additional product details when users select a Grid row, you’ll use the free KendoReact Window. Responding to user actions and displaying information from the Grid in other React components is a very common interaction between KendoReact components.

To use the free KendoReact Window in the sample application:

Import the Window component.

jsx

import { Window } from '@progress/kendo-react-dialogs';

Define new windowVisible and gridClickedRow constants in your application state.

jsx

const [windowVisible, setWindowVisible] = React.useState(false);
const [gridClickedRow, setGridClickedRow] = React.useState({});

Add a row click handler to the Grid.

jsx

<Grid onRowClick={handleGridRowClick}></Grid>

Add the handleGridRowClick function that will set the windowVisible flag to true and save the Grid data item in the application state. You’ll use the data item values to render the Window's content.
jsx
```
handleGridRowClick = (event) => {
    setWindowVisible(true);
    setGridClickedRow(event.dataItem);
};
```

Immediately after the </Grid>, add the Window declaration. Note that the Window will be rendered only if the windowVisible flag value is true.

jsx

{
    windowVisible && (
        <Window title="Product Details" onClose={closeWindow} height={250}>
            <dl style={{ textAlign: 'left' }}>
                <dt>Product Name</dt>
                <dd>{gridClickedRow.ProductName}</dd>
                <dt>Product ID</dt>
                <dd>{gridClickedRow.ProductID}</dd>
                <dt>Quantity per Unit</dt>
                <dd>{gridClickedRow.QuantityPerUnit}</dd>
            </dl>
        </Window>
    );
}

Finally, add the following Window close handler, which will set the windowVisible flag to false when the user closes the Window.
jsx
```
const closeWindow = React.useCallback((event) => {
    setWindowVisible(false);
}, []);
```

With this code in place, try clicking a row in the grid. A custom window with additional product information appears.

With KendoReact, you get a powerful collection of React components that are easy to add to your app and solve hard problems—in this case, building a customizable cross-browser-friendly Window. That’s the power of KendoReact!

To learn more about the Window component and what it can do, see the KendoReact Window documentation.

5. Getting the Sample App Source Code

Your KendoReact Getting Started application is complete! You can download and run the complete sample application from the kendo-react-getting-started GitHub repository. Alternatively, run, fork and experiment with the application directly in StackBlitz.

This article shows just a glimpse of what you can create with KendoReact. We hope we’ve managed to inspire you how to become a more productive React developer and build complex UI in no time with our professional UI library.

Resources

Let’s look at a few more tips and tools that can help you master KendoReact.

1. Building Blocks and Page Templates

Page Templates offer ready-to-use React layouts that effectively integrate the KendoReact components. These templates consist of Building Blocks, which are the individual elements that form the complete layouts. The templates and blocks streamline the development process by providing pre-designed, customizable elements. For more details, refer to the Building Blocks and Page Templates documentation.

2. ThemeBuilder

To take full control over the appearance of the KendoReact components, you can create your own styles by using ThemeBuilder.

ThemeBuilder is a web application that enables you to create new themes and customize existing ones. Every change that you make is visualized almost instantly. Once you are done styling the React components, you can export a zip file with the styles for your theme and use them in your React app.

3. UI Kits for Figma

KendoReact comes with four UI Kits for Figma: Material, Bootstrap, Fluent, and Kendo UI Default. They provide the designers of your application with building blocks that match the UI components available in the KendoReact suite. Having matching building blocks guarantees the smooth implementation of the design.

4. VS Code Extension

To help you create projects even faster, we introduced the Kendo UI Productivity Tools extension for Visual Studio Code. This extension comes with a handy template wizard that facilitates the creation of new projects and with a rich code snippet library that allows you to add KendoReact components to your project.

5. TypeScript Support

All KendoReact components are natively written with TypeScript and provide all of the benefits of TypeScript, like typings, IntelliSense, and many others. The complete getting started example is also available in TypeScript.

Sample Applications

If you want to see more KendoReact components in action, check out our feature-packed sample applications for inspiration: