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.

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