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
  • …
 
<html>
  <head>
    <script src="http://cdn.staticfile.org/react/0.12.0-rc1/react-with-addons.min.js"></script>
  </head>
  <body>
  </body>
</html>
 
.parent {
  background: rgba(0,0,0,.6);
}
​
.child {
  padding: 20px;
  background:#fff;
}
 
var Parent = React.createClass({
  getInitialState: function() {
     return {
       text: 'default'
     };
  },
  
  handleChildClick: function(){
    this.setState({
      text: Math.random() * 1000
    });
  },
  
  render: function(){
    console.log('parent render');
    
    return (
      <div className="parent">
       this is parent!
       <Child text={this.state.text} onClick={this.handleChildClick} />
      </div>
    );
  }
});
​
​
var Child = React.createClass({
  getInitialState: function() {
    return {
     text: this.props.text + '~~~'
    };
  },
  
  componentWillReceiveProps: function(nextProps) {
    this.setState({
      text: nextProps.text + '~~~'
    });
  },
  
  handleClick: function(){
    this.setState({
      text: 'clicked'
    });
    
    this.props.onClick();
  },
  
  render: function() {
    console.log('child render');
    
    return (
     <div className="child">
       I'm child
       <p>something from parent:</p>
       <p>{this.state.text}</p>
       <button onClick={this.handleClick}>click me</button>
     </div>
    );
  }
});
​
React.render(<Parent/>, document.body);
Output 300px

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

Dismiss x
public
Bin info
jasonslyviapro
0viewers