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.

   Copy Codenpx create-react-app my-app --use-npm
   cd my-app
   npm start

   or

   Copy Codeyarn 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

     Copy Codeimport 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.

   Copy Codenpm install --save @progress/kendo-theme-default

   or

   Copy Codeyarn 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.

   Copy Codeimport '@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.

   Copy Codenpm install --save @progress/kendo-react-dateinputs @progress/kendo-react-intl @progress/kendo-licensing @progress/kendo-svg-icons

   or

   Copy Codeyarn add @progress/kendo-react-dateinputs @progress/kendo-react-intl @progress/kendo-licensing @progress/kendo-svg-icons

6. Import the component where it will be used.

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

7. Add the component to your markup.

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

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

Since version 5.16.0 (26 July 2023) of KendoReact, a missing license causes a watermark to appear over selected components. For more information, see the 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.

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:

• cra-template-kendo—A template for React applications using KendoReact.
• cra-template-kendo-sass—Enables KendoReact and adds sass support.
• cra-template-kendo-typescript—Enables KendoReact and adds typescript support.
• cra-template-kendo-typescript-sass—Enables KendoReact and adds support for both typescript and sass.

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

Copy Codenpx create-react-app my-react-app --template cra-template-kendo

Suggested Links

• The React Guide on Getting Started
• All Things React Telerik Blog Page