React Hello World Example with ES6+JSX

React Context Example JSX transformed + ES6 support

by Hellfrom

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="app">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

class Grandparent extends React.Component {
	constructor(props) {
    	super(props);
        this.handlers = {
        	onRegister: this.onRegister.bind(this)
        };
        this.state = {count: 1};
    }
    
    onRegister() {
    	setTimeout(function() {
        	console.log('onregister in grandparent', this.state.count);
        	this.setState({
            	count: this.state.count + 1
            });
        }.bind(this), 1000);
    }
    
	getChildContext() {
         return {
         	message: "From Grandparent",
            handlers: this.handlers
         };
    }
    
    render() {
        return (
        	<Parent />
        );
    }
}

Grandparent.childContextTypes = {
	message: React.PropTypes.string.isRequired,
    handlers: React.PropTypes.object
}


class Parent extends React.Component {
	render() {
        return (
        	<Child />
        );
    }
}

class Child extends React.Component {
	render() {
        return (
        	<div onClick={this.context.handlers.onRegister}>
            	message: {this.context.message}
            </div>
        );
    }
}

Child.contextTypes = {
	message: React.PropTypes.string.isRequired,
    handlers: React.PropTypes.object.isRequired
}

React.render(<Grandparent />, document.body);