JSFiddle - React, Tailwind, and code Playground

by Ayité D'almeida

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 store = createStore(counter);
const root = document.getElementById('root');

/*
document.addEventListener('click', () => {
  store.dispatch({ type: 'INCREMENT' });
});
*/

const Counter = ({ value, onIncrement, onDecrement }) => {
	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
  );
  //document.body.innerHTML = store.getState().toString();
}

store.subscribe(render);
render();