Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
/** @jsx React.DOM */
var MyComponent = React.createClass({
getInitialState: function() {
// set up the initial state. used for "logical" initialization code
return {perMinute: '-', perDay: '-'};
},
componentDidMount: function() {
// fired only once, when the component is added to the DOM
// used for initialization code that has "side effects" i.e. i/o, jquery plugins, etc
var socket = io.connect(this.props.url);
// assuming that the data coming back has perMinute and perDay keys, this will just work.
// if it doesn't, just pass a callback that will eventually call setState() with the right
// values
socket.on('business.clickout', this.setState.bind(this));
},
render: function() {
var perMinute = this.state.perMinute;
var perDay = this.state.perDay;
return (
<div>
<h3>Clickouts</h3>
<p>last Minute: {perMinute}</p>
<p>today: {perDay}</p>
</div>
);
}
});
React.renderComponent(
<MyComponent url="http://localhost:3000" />,
document.getElementById('domid')
);

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment