JSFiddle - React, Tailwind, and code Playground

by vjeux

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="http://fb.me/react-js-fiddle-integration.js"></script>

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({
    onClick: function() {
    
    },
    render: function() {
        var files = [];
        for (var file in this.props.tree) {
            var rec = this.props.tree[file];
            files.push(
                <div className="tree" key={file}>
                    <input type="checkbox" onClick={this.onClick.bind(file)} />
                    <img src={'http://lorempixel.com/32/32/?' + file} width={32} height={32} />
                    {file}
                    {!isEmpty(rec) && <Tree tree={rec} />}
                </div>
            );
        }
        return <div>{files}</div>;
    },
    shouldComponentUpdate: function(nextProps) {
        return JSON.stringify(this.props.tree) !== JSON.stringify(nextProps.tree);
    }
});



var files =...