Counter example using react-transact

<!DOCTYPE html>
<html>
<head>
  <title>React Transact Counter Example</title>
  <link rel="stylesheet" href="./style.css"/>
</head>
<body>
<div id="app"></div>
<script src="https://npmcdn.com/react@15.0.2/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom@15.0.2/dist/react-dom.js"></script>
<script src="https://npmcdn.com/react-transact@0.2.0/umd/ReactTransact.js"></script>
<script src="./script.js"></script>
</body>
</html>

const Task = ReactTransact.Task
const taskCreator = ReactTransact.taskCreator
const transact = ReactTransact.transact
const RunContext = ReactTransact.RunContext
const h = React.createElement

// Tasks
const inc = Task.resolve({ type: 'INCREMENT' })
const dec = Task.resolve({ type: 'DECREMENT' })

// Create a HOC with transact.
const Container = transact()(
  // The state and transact props are coming from RunContext.
  ({ transact }) => h('div', {},
    h('div', { className: 'container', children: [
      h('button', { onClick: () => transact.run(dec) }, ['-']),
      h('p', {}, [transact.store.getState().counter]),
      h('button', { onClick: () => transact.run(inc) }, ['+'])
    ]})
  )
)

const stateReducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT': return { counter: state.counter + 1 }
    case 'DECREMENT': return { counter: state.counter - 1 }
    default: return (state || { counter: 0 })
  }
}

// Render the application with state reducer and starting props.
ReactDOM.render(
  h(RunContext, { stateReducer },
    h(Container)
  ),
  document.getElementById('app')
)

html, body, h1 {
  padding: 0;
  margin: 0;
  font-size: 10vh;
  line-height: 1;
}
.container {
  width: 100vw;
  height: 100vh;
  font-size: 1.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
button {
  font-size: 1.4rem;
  padding: 0.3em 0.5em;
}
p {
  width: 2.5em;
  text-align: center;
}