#app
View Compiled
*
  box-sizing border-box

html
body
  margin 0
  padding 0
  text-align center
  background #ee786e
  color #fff

#app
  align-items center
  display flex
  flex-direction column
  justify-content center
  min-height 100vh
View Compiled
const { React, ReactDOM } = window
const { useEffect, useState, Fragment } = React
const { render } = ReactDOM
const rootNode = document.getElementById('app')

const getDimensions = () => ({
  height: innerHeight,
  width: innerWidth,
})

const App = () => {
  const [dimensions, setDimensions] = useState(getDimensions())
  const [x, setX] = useState()
  const [y, setY] = useState()
  // Effect for mousemove
  useEffect(
    () => {
      const update = e => {
        setX(e.x)
        setY(e.y)
      }
      window.addEventListener('mousemove', update)
      return () => {
        window.removeEventListener('mousemove', update)
      }
    },
    [setX, setY]
  )
  // Effect for window resizing
  useEffect(
    () => {
      const updateSize = () => setDimensions(getDimensions())
      window.addEventListener('resize', updateSize)
      return () => {
        window.removeEventListener('resize', updateSize)
      }
    },
    [setDimensions]
  )
  return (
    <Fragment>
      {x && y && <h1>{`x: ${x}; y: ${y};`}</h1>}
      <h1>{`Height: ${dimensions.height}; Width: ${dimensions.width};`}</h1>
    </Fragment>
  )
}

render(<App />, rootNode)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react@16.7.0-alpha.2/umd/react.development.js
  2. https://unpkg.com/react-dom@16.7.0-alpha.2/umd/react-dom.development.js