/** @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') | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
evgenosiptsov commentedJun 12, 2016
Thanks!