Skip to content

Instantly share code, notes, and snippets.

@zpao
Created May 31, 2013 17:10
Show Gist options
  • Save zpao/5686416 to your computer and use it in GitHub Desktop.
Save zpao/5686416 to your computer and use it in GitHub Desktop.
/** @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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment