React Base Fiddle (JSX)

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

by ramnathv

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var todos = [];

function todoItemComponent(text) {
    return React.DOM.li({
        onClick: function() {
            todos = todos.filter(function(candidateText) {
                return candidateText !== text;
            });
            render();
        }
    }, text);
}       

function todoListComponent() {
    if (todos.length === 0) {
        return React.DOM.p(null, 'No TODOs on the list.');
    }
    
    return React.DOM.ul(
        null,
        todos.map(todoItemComponent)
    );
}

function addFormComponent() {
    return React.DOM.form({
        onSubmit: function(e) {
            e.preventDefault();
            
            var domNode = e.target.elements[0];
            todos.push(domNode.value);

            // We *can* do this functionally but it's outside
            // the scope of this tutorial (there are a few
            // tricks you need to do)            
            domNode.value = '';

            render();
        }
    }, React.DOM.input({
        placeholder: 'New TODO item'
    }), React.DOM.input({
        type: 'submit',
        value: 'Add TODO'
    }));
}

function render() {
    ReactDOM.render(
        React.DOM.div(
            null,
            React.DOM.h1(null, 'TODO list'),
            todoListComponent(),
            addFormComponent()
        ),
        document.getElementById("container")
    );
}

render();