• Server renders HTML
  
• jQuery "spice" on browser
  
• (PHP, Rails, Django)
  

• Server renders JSON
  
• Javascript UI on browser
  
• (Backbone, Ember, Angular, Batman)
  

• in-memory data structure (fast)
• Synthetic event system
• Optimized for performance and memory footprint

• Build new Virtual DOM tree 
  
• Diff with old one
  
• Compute minimal set of changes
  
• Put them in a queue
  
• Batch render all changes to browser
  

var HelloMessage = React.createClass({
  render: function() {
    return React.DOM.div(                         {className: 'mystyle'},                         'Hello ' + this.props.name                         );
  }
});

React.renderComponent(HelloMessage({name:"John"}), mountNode);

The data returned from render is neither a string nor a DOM node -- it's a lightweight description of what the DOM should look like.

/** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function() {
    return <div>{'Hello ' + this.props.name}</div>;
  }
});

React.renderComponent(<HelloMessage name="John" />, mountNode);

`/** @jsx React.DOM */`HelloMessage = React.createClass
  render: ->
    `
     <div>       <h1>Welcome</h1>       <span>{'Hello ' + this.props.name}</span>     </div>    `
React.renderComponent(<HelloMessage name="John" />, mountNode)