JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.37/Bacon.js"></script>
<script src="http://fb.me/react-0.12.1.js"></script>

JavaScript

// Our streams just like before
var keypressStream = Bacon.fromEventTarget(document.body, "keypress")
.map(function (e) {
  return String.fromCharCode(e.charCode)
});

var countStream = keypressStream.scan(0, function (count, key) {
  return count + 1;
});

var KeyPressComponent = React.createClass({
  getInitialState: function(){
    return {"count":0, "keypress":"<press a key>","totalWords":""};
  },
  componentWillMount: function () {
    this.props.countStream.onValue(function (count) {
      this.setState({"count": count});
    }.bind(this));

    this.props.keypressStream.onValue(function (key) {
      this.setState({"keypress": key});
    }.bind(this));

    // Add something extra because why not
    this.props.keypressStream.scan("", function (totalWords, key) {
      return totalWords + key;
    })
    .onValue(function (totalWords) {
      this.setState({"totalWords": totalWords});
    }.bind(this));
  },
  render: function () {
    return React.DOM.div(null,
      React.createElement("h1", null, "Count: " + this.state.count),
      React.createElement("h1", null, "Keypress: " + this.state.keypress),
      React.createElement("h1", null, "Total words: " + this.state.totalWords))
    }
  });

React.render(React.createElement(KeyPressComponent, {
  keypressStream: keypressStream,
  countStream: countStream
}), document.body);