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(){}
    }
  }
});

Methodology

1. DOM libs usually manipulate the DOM
2. React tries to re-render and finds a different DOM than it had last
   time and freaks out
3. We hide the DOM manipulation from React
4. Consumers of our component can stay in React-land.

Usage:

/** @jsx React.DOM */

var App = React.createClass({

  getInitialState: function() {
    return { taco: null, showForm: false };
  },

  handleTacoSubmission: function(event) {
    event.preventDefault();
    var taco = this.refs.favoriteTaco.getDOMNode().value;
    this.setState({
      taco: taco,
      showForm: false
    });
  },

  renderTaco: function() {
    return this.state.taco ?
      "Your favorite taco is: "+this.state.taco:
      "You don't have a favorite taco yet.";
  },

  showForm: function() {
    this.setState({showForm: true});
  },

  handleDialogClose: function() {
    if (!this.state.taco)
      alert("You don't have a favorite taco?");
  },

  render: function() {
    return (
      <div>
        <button onClick={this.showForm}>Tell me your favorite taco</button>
        <p>{this.renderTaco()}</p>
        <Dialog
          title="Favorite Taco"
          open={this.state.showForm}
          onClose={this.handleDialogClose}
        >
          <form onSubmit={this.handleTacoSubmission}>
            <p>Tacos are delicious. Which is your favorite?</p>
            <p>
              <input type="text" ref="favoriteTaco"/> <button type="submit">Submit</button>
            </p>
          </form>
        </Dialog>
      </div>
    );
  }
});

React.renderComponent(<App/>, document.body);

demo: http://jsbin.com/gamina/2/edit

hello nice to meet you,

I am new to this site where can someone help me with a .js code???