React Base Fiddle (JSX)

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

by Tahir Ahmed

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="container"></div>

JavaScript 1.7

var data = [{result: 'lorem'}, {result: 'ipsum'}, {result: 'dolor'}];
var length = data.length;
var SearchBox = React.createClass({
    render: function(){
        var searchResultObjects = [];
        for (var i = 0; i < length; i += 1){
            searchResultObjects[searchResultObjects.length] = <SearchResult result={data[i].result} />;
        }
        return (
            <ul>
                {searchResultObjects}
            </ul>
        );
    }
});
var SearchResult = React.createClass({
    render: function() {
        return <li>{this.props.result}</li>
    }
});
 
React.render(<SearchBox />, document.getElementById('container'));