when you do not need a router

notes.txt

when you do not need a router
then we can escape by mounting and unmounting components manually

also can we hook `history.js` into mount and unmount to get a stupid router ?

stupid-router.jsx

var HelloWorld = React.createClass({
  componentWillMount: function() {
    console.log("mounting HelloWorld");
  },

  render: function() {
    console.log("rendering HelloWorld");

    return (
      <p>hello world</p>
    );
  },

  componentDidMount: function() {
    console.log("mounted HelloWorld");
  },

  componentWillUnmount: function()  {
    console.log("unmounting HelloWorld");
  }
});

var YoWorld = React.createClass({
  componentWillMount: function() {
    console.log("mounting YoWorld");
  },

  render: function() {
    console.log("rendering YoWorld");

    return (
        <p>Yo! World</p>
    );
  },

  componentDidMount: function() {
    console.log("mounted YoWorld");
  },

  componentWillUnmount: function()  {
    console.log("unmounting YoWorld");
  }
});

var Wrapper = React.createClass({
  unMountApp: function() {
    ReactDOM.unmountComponentAtNode(document.getElementById('app2'));
  },

  mountHello: function() {
    ReactDOM.render(
      <HelloWorld />,
      document.getElementById('app2')
    );
  },

  mountYo: function() {
    ReactDOM.render(
      <YoWorld />,
      document.getElementById('app2')
    );
  },

  render: function() {
    return (
      <div>
        <button onClick={this.mountHello}>hello</button>
        <button onClick={this.mountYo}>yo</button>
        <div id="app2">
          {this.props.children}
        </div>
      </div>
    );
  }
});

ReactDOM.render(
  <Wrapper><HelloWorld/></Wrapper>,
  document.getElementById('app')
);

when-you-do-not-need-a-router.html

<div id="app"></div>