JSFiddle - React, Tailwind, and code Playground

by vikikamath

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/cyclejs-core/7.0.0/cycle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xstream/10.2.0/xstream.min.js"></script>

Babel + JSX

import xs from 'xstream';
import Cycle from '@cycle/core';
import {div, button, p, makeDOMDriver} from '@cycle/dom';

function main(sources) {
  let action$ = xs.merge(
    sources.DOM.select('.decrement').events('click').map(ev => -1),
    sources.DOM.select('.increment').events('click').map(ev => +1)
  );
  let count$ = action$.fold((x,y) => x + y, 0);
  return {
    DOM: count$.map(count =>
        div([
          button('.decrement', 'Decrement'),
          button('.increment', 'Increment'),
          p('Counter: ' + count)
        ])
      )
  };
}

Cycle.run(main, {
  DOM: makeDOMDriver('#main-container')
});