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

Kendo UI for React 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 simple and add the Buttons package:

    npm install --save @progress/kendo-react-buttons
  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 Button component.
    import { Button } from '@progress/kendo-react-buttons';
    
    class App extends Component {
     constructor(props) {
       super(props);
    
       this.state = {
         title: 'Welcome to React!'
       }
     }
     onButtonClick = () => {
       this.setState({title: 'Hello from Kendo UI!'})
     }
     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>
           <p className="App-intro">
             <Button
               onClick={this.onButtonClick}
               primary={true}
             >
               My Kendo UI Button
             </Button>
           </p>
         </div>
       );
     }
    }
    
    export default App;
  3. Run the application in the browser by using the npm start command.

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

Adding the Styles

The Kendo UI for React themes are distributed as separate NPM packages. At the time, the available theme packages are @progress/kendo-theme-default and @progress/kendo-theme-bootstrap.

  1. We'll take the Default theme and install it just like the Buttons 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 Button is fully functional and looks splendid! This final step concludes the getting-started walkthrough.

Video Tutorial

If you want to discover more of the amazing components Kendo UI for React 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

An orange button, while pretty, is not something that you will write home about. We are sure that you are looking for more—browse the components section and discover the amazing features that Kendo UI for React brings to the table.

Happy coding!