Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-0.14.3.js"></script>
<script src="//fb.me/react-dom-0.14.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id='stage'></div>
</body>
</html>
 
.foo {
  background: red;
  display: inline-block;
  padding: 1em;
  margin: 2em 0;
}
 
var Stage = React.createClass({
  getInitialState: function(){
    return { 
      phrase: "helpme!",
      width: "0"
    };
  },
  updatePhrase: function(e){
    this.setState({phrase: e.target.value});
  },
  componentDidMount: function(){
    console.log('did mount')
    this.setState({
      width: this.refs.el.clientWidth
    });
  },
  componentDidUpdate: function(){
    console.log("fetch correct size:"+this.refs.el.clientWidth);
//  this.setState({
//    width: this.refs.el.clientWidth
//  });
  },
//   componentDidUpdate: function(){
//     console.log("fetch correct size:"+this.refs.el.clientWidth);
//   },
  render: function(){
  return (
    <div>
      <div><input type="text" id="phrase" onChange={this.updatePhrase} value={this.state.phrase} /></div>
      <div className="foo" ref="el">{this.state.phrase}</div>
      <div>Width: {this.state.width}</div>
    </div>
  )
}
});
​
ReactDOM.render(
  <Stage />,
  document.getElementById('stage')
);
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers