gistfile1.js

// " In short, the closer the code is to a description of “what I want the program to do”, the better."
// http://staltz.com/why-react-redux-is-an-inferior-paradigm.html

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

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

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

////////////////////////////////////////////////////////////////////////////////
// React
import React from 'react'
import { render } from 'react-dom'

const Main = React.createClass({
  getInitialState() {
    return { count: 0 }
  },

  increment() {
    this.setState({ count: this.state.count + 1 })
  },

  decrement() {
    this.setState({ count: this.state.count - 1 })
  },

  render() {
    return (
      <div>
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.decrement}>Decrement</button>
        <p>Counter: {this.state.count}</p>
      </div>
    )
  }
})

render(<Main/>, document.getElementById('main'))