Using with Scripts

You can use KendoReact components in React applications by loading them directly from script files.

1. Follow the steps from the described approach in the official React documentation.

2. Load the common scripts that are used by the KendoReact components including prop-types, kendo-drawing, and kendo-licensing.

   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
   <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
   <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
   <script src="https://unpkg.com/@progress/kendo-date-math/dist/cdn/js/kendo-date-math.js"></script>
   <script src="https://unpkg.com/@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
   <script src="https://unpkg.com/@progress/kendo-licensing/dist/index.js"></script>
   

3. Add your Script License key (for versions 4.8.0 and newer).

This section contains auto-generated content based on the license information for your account.

Please wait...To download a license key, you need to have a developer license or trial for KendoReact. If you already have a license or trial, please log in here. If you are new to KendoReact, sign up for a free trial.

All KendoReact components before version 4.0.0 DO NOT require script license key.

1. Load the KendoReact script files.

   <script src="https://unpkg.com/@progress/kendo-react-intl/dist/cdn/js/kendo-react-intl.js"></script>
   <script src="https://unpkg.com/@progress/kendo-react-all/dist/cdn/js/kendo-react-all.js"></script>
   

2. Load one of the KendoReact themes.

   <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material/dist/all.css"></link>
   

3. Retrieve the desired component from the window object.

   const Calendar = window.KendoReactAll.Calendar
   

4. Render the component on the page.

   <Calendar/>
   

The following example demonstrates the implementation of the described approach with JSX.

The following example demonstrates the implementation of the described approach when using the React.CreateElement.

Suggested Links

• Create Apps with No Configuration Official React Guide
• All Things React Telerik Blog Page