Reflex/React Comparison (look at the revision history)

Counters.hs

{-# LANGUAGE OverloadedStrings #-}
import Reflex.Dom

counter = el "div" $ do
  click <- button "Click"
  clicks <- foldDyn (\() n -> n + 1) 0 click
  el "p" $ display clicks
  return clicks

main = mainWidget $ do
  c1 <- counter
  c2 <- counter
  el "p" $ do
    text "Product: "
    display $ zipDynWith (*) c1 c2

Counters.js

import React, { Component } from 'react';

class Counter extends Component {
  render () {
    return <div>
      <button onClick={this.props.handleClick}>
        Click
      </button>
      <p>{this.props.count}</p>
    </div>;
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      c1: 0,
      c2: 0
    };
    this.incrementC1 = this.incrementC1.bind(this);
    this.incrementC2 = this.incrementC2.bind(this);
  };
  incrementC1() {
    this.setState(({ c1 }) => ({
      c1: c1 + 1
    }));
  };
  incrementC2() {
    this.setState(({ c2 }) => ({
      c2: c2 + 1
    }));
  };
  render() {
    return <div>
      <Counter
        count={this.state.c1}
        handleClick={this.incrementC1} />
      <Counter
        count={this.state.c2}
        handleClick={this.incrementC2} />
      <p>Product: {this.state.c1*this.state.c2}</p>
    </div>;
  }
}

export default App;