ReactJS SandBox

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<script>
class App extends React.Component {

   constructor(props) {
      super(props);
		
      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);

   };

   updateState(e) {
      this.setState({data: e.target.value});
   }

   render() {
      return (
         <div>
            <input type = "text" value = {this.state.data} 
               onChange = {this.updateState} />
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}

export default App;
</script>
<div id="qqq">
 
</div>
<div id="container">

    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var Hello = React.createClass({
    render: function() {
        return <div>
            <p>Hello {this.props.name} and thats where we have gotten into the problem.....</p>
            <p>Some text that does not have any reference to anything</p>
        </div>;
    }
});

var abc = React.createClass({});

React.render(<Hello name="World" />, document.getElementById('container'));
React.render(<QQ/>, document.getElementById('qqq'));
 
/*
React.render(<h1>Hello, !!! world!</h1>, document.getElementById('container'));
*/