Skip to content

Instantly share code, notes, and snippets.

@joshuacalloway

joshuacalloway/gist:ae5b184c485956314d1c

Created March 3, 2015 00:28
Show Gist options
  • Save joshuacalloway/ae5b184c485956314d1c to your computer and use it in GitHub Desktop.
Save joshuacalloway/ae5b184c485956314d1c to your computer and use it in GitHub Desktop.
Download ZIP
simple React Hello trying to use React addons Perf. Throws undefined for count
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>Basic Example</title>
</head>
<body>
<h1>Basic Example 2</h1>
<div id="container"></div>
<div id="simple"></div>
<div id="table"></div>
<script src="http://fb.me/react-with-addons-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="js/application.js"></script>
<script type="text/jsx">
var HelloMessage = React.createClass({
componentWillMount: function() {
console.log("componentWillMount");
//React.addons.Perf.start();
},
componentDidMount: function() {
console.log("componentDidmount");
//React.addons.Perf.stop();
//React.addons.Perf.printWasted();
},
componentWillUpdate: function(nextProps, nextState) {
console.log("componentWillUpdate");
React.addons.Perf.start();
console.log("componentWillUpdate 2");
},
componentDidUpdate: function(prevProps, prevState) {
console.log("componentDidUpdate");
React.addons.Perf.stop();
React.addons.Perf.printWasted();
},
getInitialState: function() {
return { name: this.props.name };
},
changeName: function() {
console.log("changeName.. called");
this.setState({ name:"Alex" });
},
render: function() {
console.log("render called");
return <div>Hello {this.state.name}
<input type="button" onClick={this.changeName} value="change name2"/>
</div>;
}
});
React.render(
<HelloMessage name="John" />,
document.getElementById('container')
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment