gistfile1.js

/** @jsx React.DOM */
var MyComponent = React.createClass({
  render: function() {
    // Defaults in case the props are undefined. We'll have a solution for this
    // soon that is less awkward.
    var perMinute = this.props.perMinute || '-';
    var perDay = this.props.perDay || '-';
    return (
      <div>
        <h3>Clickouts</h3>
        <p>last Minute: {perMinute}</p>
        <p>today: {perDay}</p>
      </div>
    );
  }
});

function renderOrUpdate(data) {
  // React.renderComponent will do an initial render OR perform an update if
  // needed. In this case you'll just continuously pass data in and as it comes
  // from the socket and the DOM will just keep updating. What this means is
  // that if only data.perMinute is updated and data.perDay stays the same,
  // we'll only update the <p> containing perMinute.
  React.renderComponent(
    <MyComponent perDay={data.perDay}, perMinute={data.perMinute} />,
    document.getElementById('domid')
  );
}

var socket = io.connect('http://localhost:3000');
socket.on('business.clickout', renderOrUpdate);