React Base Fiddle (JSX)

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

by linmic

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>

JavaScript 1.7

var Child = React.createClass({
    handleUp: function(e) {
        switch(e.key) {
            case "ArrowDown":
                this.props.handleFocus(this.props.id+1);
            break;
            case "ArrowUp":
                this.props.handleFocus(this.props.id-1);            
            break;
        }
    },
    render: function() {
        return <div><input defaultValue={this.props.name} onKeyUp={this.handleUp} ref="input" /></div>;
    }
});

var Parent = React.createClass({
    handleFocus: function(id) {
        var child = this.refs['child' + id];
        if (!child) return;
        var input = child.refs.input;
        input.getDOMNode().focus();
    },
    render: function() {
        var inputs = [];
        for (var i=0; i<10; i++) {
            inputs.push(<Child key={i} id={i} name={"value" + i} handleFocus={this.handleFocus} ref={'child' + i} />);
        }
        return <div>
            {inputs}
        </div>;
    }
});
 
React.render(<Parent />, document.body);