JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/JSXTransformer-0.9.0.js"></script>
<script src="http://fb.me/react-0.9.0.min.js"></script>
<script src="https://fb.me/react-js-fiddle-integration.js"></script>
<!-- Intro -->

CSS

.tree {
    margin-left: 20px;
}

JavaScript 1.7

/** @jsx React.DOM */

var isEmpty = function(obj) {
  for (var key in obj) {
    return false;
  }
  return true;
}

var Tree = React.createClass({
    render: function() {
        var files = [];
        for (var file in this.props.tree) {
            var rec = this.props.tree[file];
            files.push(
                <div className="tree">
                    {file}
                    {!isEmpty(rec) && <Tree tree={rec} />}
                </div>
            );
        }
        return <div>{files}</div>;
    }
});

var Main = React.createClass({
    deleteFirst: function() {
        var first = null;
        for (var key in tree) {
            first = key;
            break;
        }
        delete tree[first];
        var t = performance.now();
        this.forceUpdate(function() {
            console.log(performance.now() - t);
        });
    },
    deleteLast: function() {
        var last = null;
        for (var key in tree) {
            last = key;
        }
        delete tree[last];
        var t = performance.now();
        this.forceUpdate(function() {
            console.log(performance.now() - t);
        });
    },
    render: function() {
        return <div>
            <button onClick={this.deleteLast}>Delete Last</button>
            <button onClick={this.deleteFirst}>Delete First</button>
            <Tree tree={tree} />
        </div>;
    }
});

var tree = getTree();
var t = performance.now();
React.renderComponent(<Main />, document.body);
console.log(performance.now() - t);


















function getTree() {
var files =...