<!DOCTYPE html>
<html>

  <head>
    <script src="https://npmcdn.com/react@15.4/dist/react.js"></script>
    <script src="https://npmcdn.com/react-dom@15.4/dist/react-dom.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="container"></div>
    <script src="script.js"></script>
  </body>

</html>
// This file should have the extension .jsx so that plunker compiles all the JSX
// The index.html file will include this file as script.js (not .jsx) however

// Define a component:
var Button = React.createClass({
  getInitialState: function() {
    return {counter: 0};
  },
  handleClick: function(){
    this.setState( {counter: this.state.counter + 1});
  },
  render: function() { 
    return(
      <button onClick={this.handleClick}>{this.state.counter}</button>
      );
  }
});
var Result = React.createClass({
  render:function(){
    return (
        <div>XXX</div>
      );
  }
});

var Main = React.createClass({
  render: function(){
    return (
        <div>
          <Button />
          <Result />
        </div>
      )
  }
})
// Render a component to the browser:
ReactDOM.render( <Main/ > , // What to render (an instance of the Main component)
  document.getElementById('container') // Where to render it
);

// If nothing appears in the browser, check the dev-tools console for errors.

// ******************************************************
// *  Checkout the new jsComplete Interactive Lab!!     *
// *  http://jscomplete.com/interactive-learning-demo/  *
// ******************************************************