JSFiddle - React, Tailwind, and code Playground

by liormb

HTML

<script src="https://npmcdn.com/redux/dist/redux.js"></script>
  <script src="https://npmcdn.com/react/dist/react.js"></script>
  <script src="https://npmcdn.com/react-dom/dist/react-dom.js"></script>
  <script src="https://npmcdn.com/react-redux/dist/react-redux.js"></script>
  <script src="https://npmcdn.com/expect/umd/expect.js"></script>
  <script src="https://wzrd.in/standalone/deep-freeze@latest"></script>
<body>
  <div id='root'></div>
</body>

Babel + JSX

const { createStore } = Redux;

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

const root = document.getElementById('root');
const store = createStore(counter);

const Counter = (props) => {
	const { value, onIncrement, onDecrement } = props;
	return (
		<div>
			<h1>{value}</h1>
			<button onClick={onIncrement}>+</button>
			<button onClick={onDecrement}>-</button>
		</div>
	);
};

const render = () => {
  ReactDOM.render(
		<Counter
			value={store.getState()}
			onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
			onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
		/>, root
	);
}

store.subscribe(render);
render();