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();