Load and render react component from browser

deferred.jsx

/*jslint node: true */
'use strict';

var React = require('react');
var loader = require('scriptjs');

module.exports  = React.createClass({
  propTypes: {
    handler:    React.PropTypes.string.isRequired,
    handlerUrl: React.PropTypes.string,
    preloader:  React.PropTypes.element,
    props:      React.PropTypes.object
  },

  getInitialState:  function () {
    return {
      resolved: false,
    };
  },

  componentDidMount:  function () {
    // load component file
    loader(this.props.handlerUrl || this.props.handler, this.props.handler)
      .ready(this.props.handler, function() {
        this.setState({
          resolved: require(this.props.handler)
        });
      }.bind(this));
  },

  render: function () {
    var Handler;

    // render component if resolved
    if (this.state.resolved) {
      Handler = this.state.resolved;

    // or preloader if defined
    } else if (this.props.preloader) {
      Handler = this.props.preloader;
    }

    if (Handler) {
      return <Handler {...this.props} />;
    } else {
      // default preloader
      return <div>Component is loading…</div>;
    }
  }

});