React.js

https://apps.twitter.com
<div id="app">
React.render(
  React.DOM.h1(null, "Hello world!"),
  document.getElementById("app")
);
</div>
<script src="react/build/react.js"></script>

React.DOM.h1(
  {
    id: "my-heading"
  },
  "Hello world!"
);
React.DOM.h1(
  {id: "my-heading"},
  React.DOM.span(null, "Hello"),
  " world!"
);
React.render(
  <h1 id="my-heading">
    <span><em>Hell</em>o</span> world!
  </h1>,
  document.getElementById("app")
);
You cannot use class and for because these are reserved words in JavaScript. Instead you need className and htmlFor.
React.DOM.h1(
  {
    className: "pretty",
    htmlFor: "me"
  },
  "Hello world!"
);
When it comes to the style attribute, you cannot use a string as you normally do in HTML, but you need a JavaScript object instead. Avoiding strings is always a good idea to reduce the risks of XSS (Cross-site scripting) attacks.
React.DOM.h1(
  {
    style: {
      background: "black",
      color: "white",
      fontFamily: "Verdana"
    }
  },
  "Hello world!"
);

Custom Component
var Component = React.createClass({
  render: function() {
    return React.DOM.span(null, "My name is " + this.props.name);
  }
});
Passing the property when rendering the component looks like:

React.render(
  React.createElement(Component, {
    name: "Bob"
  }),
  document.getElementById("app")
);

var ComponentFactory = React.createFactory(Component);

React.render(
  ComponentFactory(),
  document.getElementById("app")
);
you can add a property called propTypes to declare the list of properties that your component accepts and their types.
var Component = React.createClass({
  propTypes: {
    name: React.PropTypes.string.isRequired
  },
  render: function() {
    return React.DOM.span(null, "My name is " + this.props.name);
  }
});
When state changes, React rebuilds the UI without you having to do anything.

var TextAreaCounter = React.createClass({

  propTypes: {
    value: React.PropTypes.string
  },

  _textChange: function(ev) {
    this.setProps({
      value: ev.target.value
    });
  },

  render: function() {
    return React.DOM.div(null,
      React.DOM.textarea({
        value: this.props.value,
        onChange: this._textChange
      }),
      React.DOM.h3(null, this.props.value.length)
    );
  }
});

var counter = (function() {
var value = 0;
return {
 get_value: function() {
   return value;
 },
 increment_value: function() {
   value += 1;
 }
}
})();

"use strict";
ReactJS framework is intended to avoid the shared mutable state and be idempotent.
declarative programming is the programming in which you specify what needs to be accomplished without telling how it needs to be done.

The Flux Architecture