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="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//fb.me/react-0.13.1.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
​
</body>
</html>
 
var Grandpa = React.createClass({
​
    childContextTypes: {
         fruit: React.PropTypes.string.isRequired,
         name: React.PropTypes.string.isRequired
    },
​
    getChildContext: function() {
         return { fruit: "Banana", name: "Bob" };
    },
​
    render: function() {
         return <Dad />;
    }
});
​
var Dad = React.createClass({
     
    childContextTypes: {
         name: React.PropTypes.string.isRequired
    },
    
​
    getChildContext: function() {
         return { name: "James" };
    },
    
    render: function() {
        return <Son />;
    }
});
​
​
var Son = React.createClass({
    contextTypes: {
         name: React.PropTypes.string.isRequired,
         fruit: React.PropTypes.string.isRequired         
    },
    
    
    render: function() {
        return <h1>{this.context.name} likes {this.context.fruit}</h1>;
    }
 
});
​
// James likes Banana 
React.render(<Grandpa/>, document.body);
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers