React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by Jimmy Sawczuk

HTML

<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="http://fb.me/react-with-addons-0.12.1.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container"></div>

JavaScript 1.7

var Parent = React.createClass({
    getInitialState: function() {
        return {
            activeColor: "red"
        };
    },
    render: function() {
        return <div>
            <Child active={this.state.activeColor == "red"} color="red" onChange={this.setActiveColor} />
            <Child active={this.state.activeColor == "blue"} color="blue" onChange={this.setActiveColor} />
            <Child active={this.state.activeColor == "green"} color="green" onChange={this.setActiveColor} />
        </div>;
    },
    setActiveColor: function(color)
    {
        this.setState({
            activeColor: color
        });
    }
});

var Child = React.createClass({  
    render: function() {
        return (
            	<div style={{color: this.props.color}}>{this.props.color + " "}
                   { this.props.active
                       ? " √"
                       : <a href="#" onClick={this.activate}>activate</a> 
                   }
                </div>
        );
     },
     
     activate: function(e) {
         this.props.onChange(this.props.color);
     }
});

React.render(<Parent />, document.getElementById("container"));