<div id="container"></div>
// Child component that takes a numeric ID (for ease of tracking). 
// Render a simple button having the supplied ID as a label.
// Log to the console when it's mounted and unmounted from the DOM.
class Child extends React.Component {
  componentDidMount () { 
    console.log('Child ' + this.props.id + ' has been mounted')
  }
  componentWillUnmount() {
    console.log('Child ' + this.props.id + ' has been unmounted')
  }
  render() {
    return (
      <div className='btn btn-default'>{this.props.id}</div>
    )
  }
}
Child.propTypes = {
  id: React.PropTypes.number,
}

// View1 and View2 React functional components. Theyare identical from a markup standpoint. 
// The point of having separate functions is to test out the mounting/unmounting behavior
// of React.
// `View1` and `View2` are capitalized so that React knows that they are
// user-defined components instead of built-in components.
function View1() {
  return (
    <div>
      <Child id={1} key='child-1'/>
      <Child id={2} key='child-2'/>
    </div>
  )
}
function View2() {
  return (
    <div>
      <Child id={1} key='child-1'/>
      <Child id={2} key='child-2'/>
    </div>
  )        
}

// A very simple Container that will first show view 1, then wait for one second and switch to view 2.
// It also logs out useful lifecycle messages.
class Container extends React.Component {   
  constructor() {
    super()
    this.state = {
      viewIndex: 1
    }
  }
  componentDidMount() {
    console.log('Container mounted')
    console.log('Will change viewIndex to 2 in one second.')
    setTimeout(() => {
      this.setState({viewIndex: 2})
    }, 1000)
  }
  componentDidUpdate() {
    console.log("Container's state has been updated to " + this.state.viewIndex + " and finished re-render.")
  }
  render() {
    const {viewIndex} = this.state;
    if (viewIndex === 1) {
      return <View1 key='index'/>
    } else {
      return <View2 key='index'/>
    }
  }
}

ReactDOM.render(<Container/>, document.getElementById('container'))
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js