-
-
Save petehunt/5687230 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** @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
Thanks!