#app

*
  box-sizing border-box

html
body
  margin 0
  padding 0
  text-align center
  background #fceeb5

#app
  align-items center
  display flex
  flex-direction column
  justify-content center
  min-height 100vh

const { React, ReactDOM } = window
const { useEffect, useState, Fragment } = React
const { render } = ReactDOM
const rootNode = document.getElementById('app')

const useMousePosition = () => {
  const [x, setX] = useState()
  const [y, setY] = useState()
  useEffect(
    () => {
      const update = e => {
        setX(e.x)
        setY(e.y)
      }
      window.addEventListener('mousemove', update)
      return () => {
        window.removeEventListener('mousemove', update)
      }
    },
    [setX, setY]
  )
  return { x, y }
}

const App = () => {
  const {x, y} = useMousePosition()
  return x && y ? (<h1>{`x: ${x}; y: ${y};`}</h1>) : null
}

ReactDOM.render(<App />, rootNode)