React Starter

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="root"></div>

CSS

div {
  color:blue;
  text-decoration:underline;
  cursor:pointer;
}

Babel + JSX

const Goodbye = () => {
	return (
  	<div onClick={()=>{render(<Hello/>)}}>
      I don't know why you say "Goodbye", I say "Hello, hello, hello".
     </div>
  )
}

const Hello = () => {
  return (
  	<div onClick={()=>{render(<Goodbye/>)}}>
      You say "Goodbye" and I say "Hello, hello, hello".
    </div>
  )
}

let render = (component) => {
	let event = new CustomEvent('goto')
  event.component = component
  document.dispatchEvent(event)
}

document.addEventListener('goto', (event)=>{
	ReactDOM.render(event.component, document.getElementById('root'))	
})

render(<Hello/>)