/** @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