Get Started

In this article

    Setting Up the React Project

    The easiest way to start with React is to use the create-react-app. To scaffold your project structure, follow its installation instructions.

    npm install -g create-react-app
    create-react-app my-app
    cd my-app

    Adding the Kendo UI Components

    KendoReact is distributed as multiple NPM packages, scoped to @progress. For example, the name of the Grid package is @progress/kendo-react-grid.

    1. Let's start and add the Grid package and its dependencies:

      npm install --save @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs
    2. Next, import the components into your source code. Change the code in src/App.js to:

      import React, { Component } from 'react';
      import logo from './logo.svg';
      import './App.css';
      
      // Import the Grid component.
      import { Grid, GridColumn } from '@progress/kendo-react-grid';
      
      class App extends Component {
       constructor(props) {
         super(props);
      
         this.state = {
           data: [
             {ProductName: "Chai", Price: 10},
             {ProductName: "Chang", Price: 20}
           ],
           title: "Hello from KendoReact!"
         }
       }
       render() {
         return (
           <div className="App">
             <header className="App-header">
               <img src={logo} className="App-logo" alt="logo" />
               <h1 className="App-title">{this.state.title}</h1>
             </header>
               <Grid data={this.state.data}>
                 <GridColumn field="ProductName" title="Product name"/>
                 <GridColumn field="Price"/>
               </Grid>
           </div>
         );
       }
      }
      
      export default App;
    3. Run the application in the browser by using the npm start command.

    We are done! The Grid is now visible, but it looks plain. Let's add the theme.

    Adding the Styles

    The KendoReact themes are distributed as separate NPM packages. At the time, the available theme packages are @progress/kendo-theme-default, @progress/kendo-theme-bootstrap and @progress/kendo-theme-material.

    1. We'll take the Default theme and install it just like the Grid package:

      npm install --save @progress/kendo-theme-default
    2. Now, import the CSS file from the package in src/App.js:

      // You can import style files in ./App.js and add global styles in ./App.css
      import '@progress/kendo-theme-default/dist/all.css';
    3. With the stylesheet in place, you should see something like this in the browser:

      getting-started-react.png

    The Grid is rendered and looks splendid! Now you can add many features to it like paging, sorting, filtering, grouping, editing etc. Explore all of them in the Grid documentation

    Video Tutorial

    If you want to discover more of the amazing components KendoReact offers, watch our video tutorial and see the Grid, Charts, and other of our components in action. In the tutorial you will build a React application from the ground up and learn how to set up and customize the components.

    Next Steps

    We are sure that you are looking for more—browse the components section and discover the amazing features that KendoReact brings to the table.

    Happy coding!

    Not finding the help you need?