Dialog.js

var Dialog = React.createClass({
  render: function() {
    // 1) render nothing, this way the DOM diff will never try to do
    //    anything to it again, and we get a node to mess with
    return React.DOM.div();
  },

  componentDidMount: function() {
    // 2) do DOM lib stuff
    this.node = this.getDOMNode();
    this.dialog = $(this.node).dialog({
      autoOpen: false,
      // pass in lib options from props
      title: this.props.title,
      close: this.props.onClose
    }).data('ui-dialog');

    // 3) call method to reconnect React's rendering
    this.renderDialogContent(this.props);
  },

  componentWillReceiveProps: function(newProps) {
    // 4) render reconnected tree when props change
    this.renderDialogContent(newProps);
  },

  renderDialogContent: function(props) {
    // 5) make a new rendering tree, we've now hidden the DOM
    //    manipulation that jQuery UI dialog did from React and
    //    continue the React render tree, some people call this
    //    a "portal"
    React.renderComponent(React.DOM.div({}, props.children), this.node);

    // 6) Call methods on the DOM lib via prop changes
    if (props.open)
      this.dialog.open();
    else
      this.dialog.close();
  },

  componentWillUnmount: function() {
    // clean up the mess
    this.dialog.destroy();
  },

  getDefaultProps: function() {
    return {
      title: '',
      onClose: function(){}
    }
  }
});