lecture.js

var React = require('react');
var $ = require('jquery');
require('jquery-ui');

var Dialog = React.createClass({
  componentDidMount: function() {
    this.portalNode = this.getDOMNode();
    this.$portal = $(this.portalNode);
    this.$portal.dialog({
      autoOpen: false,
      close: this.props.onClose
    });
    this.renderToPortal(this.props);
  },

  componentWillReceiveProps (nextProps) {
    this.renderToPortal(nextProps);
  },

  componentWillUnmount () {
    this.$portal.dialog('destroy');
  },

  renderToPortal (props) {
    React.render(<div>{props.children}</div>, this.portalNode);
    if (props.isOpen)
      this.$portal.dialog('open');
    else
      this.$portal.dialog('close');
  },

  render: function() {
    return <div/>;
  }
});

var App = React.createClass({
  getInitialState () {
    return {
      now: Date.now(),
      modalIsOpen: false
    };
  },

  componentDidMount () {
    setInterval(() => {
      this.setState({now: Date.now()});
    }, 500);
  },

  openModal () {
    this.setState({
      modalIsOpen: !this.modalIsOpen
    });
  },

  handleDialogClose () {
    this.setState({
      modalIsOpen: false
    });
  },

  render () {
    return (
      <div>
        <button onClick={this.openModal}>Open</button>
        <Dialog
          isOpen={this.state.modalIsOpen}
          onClose={this.handleDialogClose}
        >
          <p>
            {this.state.now}
          </p>
        </Dialog>
      </div>
    );
  }
});

React.render(<App/>, document.getElementById('app'));