React Base Fiddle (JSX)

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

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">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var Perf = React.addons.Perf;
var App = React.createClass({
    getInitialState: function() {
        return {
            count: 10
        };
    },
    onClick: function() {
        Perf.start();
        this.setState({count: this.state.count + 1}, function() {
            setTimeout(function() {
                Perf.stop();
                Perf.printWasted();
                Perf.printDOM();
            }, 10000);
        });
    },
    render: function() {
        var messages = [];
        for (var i = this.state.count; i > 0; --i) {
            messages.push({id: i, body: 'message:' + i});
        }
        return (
            <div>
                <button onClick={this.onClick}>add</button>
                <div>
                    {messages.map(function(message, index) { return <Message key={index} message={message.body} />})}
                </div>
            </div>
        );
    }
});

var Message = React.createClass({
    componentWillMount: function() {
       // for (var i = 0; i < 1000000; ++i) {}
    },
    render: function() {
        return (
            <div>{this.props.message}</div>
        );
    }
});
 
React.render(<App />, document.getElementById('container'));