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.
-
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
-
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 toReact
.
- Remove everything inside the App container div:
-
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;
-
-
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
-
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
. -
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 @progress/kendo-svg-icons
or
yarn add @progress/kendo-react-dateinputs @progress/kendo-react-intl @progress/kendo-licensing @progress/kendo-svg-icons
-
Import the component where it will be used.
import { Calendar } from '@progress/kendo-react-dateinputs';
-
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:
cra-template-kendo
—A template for React applications using KendoReact.cra-template-kendo-sass
—Enables KendoReact and addssass
support.cra-template-kendo-typescript
—Enables KendoReact and addstypescript
support.cra-template-kendo-typescript-sass
—Enables KendoReact and adds support for bothtypescript
andsass
.
The following code snippet demonstrates the usage of the cra-template-kendo
template:
npx create-react-app my-react-app --template cra-template-kendo