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-vite tool to bootstrap a KendoReact project supporting both JSX and TypeScript. 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.

To start your first KendoReact project:

Use npm to create and run the vite application.
sh
```
npm create vite@latest
```
or
sh
```
yarn create vite
```

After executing the command, the interface will ask you to apply additional configurations to your project:

Set the project name:

Here you can define the name of your project. For the needs of the current article, set the name of the application as my-app.

When prompted, complete the step-by-step interactive project configuration. Make sure to select React as the project framework. You can choose any of the suggested variants.
Finally, run the newly created project.
sh
```
cd my-app
npm i
npm run dev
```

You can skip the step-by-step project configuration by specifying the project name and adding -- --template if you are using NPM or --template if you are using Yarn straight from the command line. See Scaffolding Your First Vite Project for more CLI options.

#npm
npm create vite@latest my-app -- --template react

# yarn
yarn create vite my-app --template react

2. Create a Vite Project using Kendo CLI

As an alternative to the default way of creating Vite projects, the Kendo CLI helps you generate projects with JavaScript or TypeScript. To generate a project with the Kendo CLI, you have to do the following:

Install the @progress/kendo-cli package using the following command:

shell

npm i -g @progress/kendo-cli

Use the following command to generate a new Vite project with Typescript:

shell

npx kendo react create vite MyKendoApp

The CLI also provides an option to define which Kendo Theme will be added to the generated project. To set a theme, add one of the following to the above commands:

--theme=default - Adds the Kendo Default Theme
--theme=bootstrap - Adds the Kendo Bootstrap Theme
--theme=material - Adds the Kendo Material Theme
--theme=fluent - Adds the Kendo Fluent Theme

The CLI allows you to specify the preferred styling. By default, the project will use CSS, but you can specify Sass if needed:

--styling=CSS - Use CSS styling (default)
--styling=Sass - Use Sass styling

The result of using the Kendo CLI will be a Vite project that has a KendoReact Grid component added to it. The Kendo CLI helps you test the KendoReact components fast and easy, but you can still use the Vite CLI, if preferred.

Below you will find information on how to add components to a Vite project, no matter how it is generated.

3. 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-vite 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.

Install the dependencies for KendoReact Calendar, Grid, DropDownList and Window:

npm i @progress/kendo-react-dateinputs @progress/kendo-react-grid @progress/kendo-react-dropdowns @progress/kendo-react-dialogs

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>
);

Remove the default styling that is applied to the project by removing the index.css import in main.jsx.
To style the Calendar component as well as the other KendoReact components, install the Default theme, which is one of the four beautiful themes for KendoReact.

npm i @progress/kendo-theme-default

Import the KendoReact Default theme in your main.jsx.

jsx

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

After completing the above steps, run the project using npm run dev and navigate to the URL displayed in the console. You can view all the available commands in the scripts property in package.json.

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.

4. 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: