Using with Create React App

Create React App is a tool for scaffolding and building React applications.

To create new projects with KendoReact components, we recommend using the [create-kendoreact-app tool], which is built specifically for this purpose. The Getting Started with KendoReact tutorial demonstrates how to scaffold a new project with this tool. Read further if you prefer create-react-app instead.

Setting Up React Projects

For detailed instructions on scaffolding a project with the create-react-app tool, see the installation instructions.

  1. Create the application.

    npx create-react-app my-app --use-npm
    cd my-app
    npm start

    or

    yarn create react-app my-app
    cd my-app
    yarn start
  2. Before you add the KendoReact UI components, clean up the new app. Here is a list of suggested edits, with the resulting src/App.js code below:

    • In src/App.js:

      • Remove everything inside the App container div: <div className="App"> ... </div>.
      • Remove the logo.svg import.
      • Import {Component} in addition to React.
    • Remove the contents of src/App.css.

    • Delete src/logo.svg

      import React, {Component} from 'react';
      import './App.css';
      
      class App extends Component {
      
        render() {
          return (
            <div className="App">
              <h1>Hello KendoReact!</h1>
            </div>
          );
        }
      }
      
      export default App;
  3. To apply a consistent visual theme to all KendoReact UI components, install one of the three out-of-the-box themes: KendoReact Default, Bootstrap, or Material.

    npm install --save @progress/kendo-theme-default

    or

    yarn add @progress/kendo-theme-default
  4. In src/App.js, import the CSS file from the theme's package that you installed in the previous step.

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

    The KendoReact UI components are architected in such a way that the components themselves are not tightly coupled to a specific theme. While you need to include one of these three themes, or your own custom theme, this also allows you to change the look and feel by modifying a sass or CSS file, or even swap themes for your entire application by changing a single import.

    If needed, any additional custom styles can go in the empty src/App.css.

  5. Install the npm packages with the desired UI components and their dependencies. For example, to add a React Calendar component to the application, install the dateinputs package.

    npm install --save @progress/kendo-react-dateinputs @progress/kendo-react-intl @progress/kendo-licensing

    or

    yarn add @progress/kendo-react-dateinputs @progress/kendo-react-intl @progress/kendo-licensing
  6. Import the component where it will be used.

    import { Calendar } from '@progress/kendo-react-dateinputs';
  7. Add the component to your markup.

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

As a final step, don't forget to activate your trial or commercial license.

Using Custom KendoReact Templates

The create-react-app script allows developers to provide custom templates through the --template option. For KendoReact applications, you can choose between four different templates depending on the preferred technology stack:

The following code snippet demonstrates the usage of the cra-template-kendo template:

npx create-react-app my-react-app --template cra-template-kendo