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-react-intl.

    <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-drawing@latest/dist/cdn/js/kendo-drawing.js"></script>
    <script src="  https://unpkg.com/@progress/kendo-react-intl@latest/dist/cdn/js/kendo-react-intl.js"></script>
  3. Load the KendoReact script file.

    <script src="https://unpkg.com/@progress/kendo-react-all@latest/dist/cdn/js/kendo-react-all.js"></script>
  4. Load one of the KendoReact themes.

    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css"></link>
  5. Retrieve the desired component from the window object.

    const Calendar = window.KendoReactAll.Calendar
  6. 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.

In this article

 /