Mobx + React simple form

by Michel Weststrate

HTML

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/mobx@3/lib/mobx.umd.js"></script>
<script src="https://unpkg.com/mobx-react@4"></script>
<script src="https://unpkg.com/mobx-react-devtools@4"></script>
<script src="https://unpkg.com/mobx-utils@2/mobx-utils.umd.js"></script>
<body>
  <div id="mount">
  
  </div>
</body>

Babel + JSX

const {observer} = mobxReact
const {now} = mobxUtils

const NEW_YEAR = new Date(new Date().getFullYear()+1,0,1)
const SECOND = 1000
const MINUTE = 60 * SECOND
const HOUR = 60 * MINUTE
const DAY = 24 * HOUR

const CountDown = observer(() => {
  const timeLeft = NEW_YEAR - now()
  return (
    <h1>
      Happy New Year in{" "}
      {Math.floor(timeLeft / DAY)} days and{" "}
      {Math.floor((timeLeft % DAY) / HOUR)}:
      {Math.floor((timeLeft % HOUR) / MINUTE)}:
      {Math.floor((timeLeft % MINUTE) / SECOND)} hours!
    </h1>
  )
})

ReactDOM.render(<CountDown />, 
document.getElementById('mount'));