Using Kendo UI and jQuery UI with ReactJS

If you want to use Kendo UI or any other UI widget library with ReactJS then you’ll need to understand the component lifecycle. This really somewhat contrived example uses the Kendo date picker.

var React = require('react');

var KDatePicker = React.createClass({
    render: function () {
        return (
            <input type="text" id={this.props.id}/>
        );
    },

    componentDidMount: function () {
        $(this.getDOMNode()).kendoDatePicker();
    }
});

module.exports = KDatePicker;

After the component renders React will call the componentDidMount method and this is where you can call Kendo or jQuery UI’s methods to initialize their widgets.