React Base Fiddle (JSX)

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

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>
            <Child1 active={this.state.activeColor == "red"} color="red" />
            <Child1 active={this.state.activeColor == "blue"} color="blue" />
            <Child1 active={this.state.activeColor == "green"} color="green" />
        </div>;
    }
});

var Child1 = React.createClass({
    getInitialState: function() {
        return {
            active: this.props.active
        };
    },
    
    render: function() {
        return (
            	<div style={{color: this.props.color}}>{this.props.color + " "}
                   { this.state.active
                       ? " √"
                       : <a href="#" onClick={this.activate}>activate</a> 
                   }
                </div>
        );
     },
     
     activate: function(e) {
         //How do I tell my Parent that I want to be activated?
         //Or: if i do this.setState({ active: true }),
         //how do i capture that in the parent to enforce only one color
         //being active at a time?
         
         this.setState({
             active: true
         });
         
         e.preventDefault();
     }
});

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