<div id="container"></div>
.btn {
  position: absolute;
  transition: transform 2000ms;
  background-color: red;
  width: 50px;
  height: 50px;
  line-height: 50px;
  top: 0;
  left: 0;
  padding: 0;
}
// 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() {
    const {id, x, y} = this.props;
    const style = {
      transform: `translateX(${x}px) translateY(${y}px)`,
    }
    return (
      <div className='btn btn-default' style={style}>{this.props.id}</div>
    )
  }
}
Child.propTypes = {
  id: React.PropTypes.number,
  x: React.PropTypes.number,
  y: 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' x={20} y={0}/> 
      <Child id={2} key='child-2' x={200} y={0}/>
    </div>
  )
}
function View2() {
  return (
    <div>
      <Child id={1} key='child-1' x={60} y ={0}/> 
      <Child id={2} key='child-2' x={120} y={0}/>
    </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()
    } else {
      return View2()
    }
  }
}

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