React Base Fiddle (JSX)

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

by kazu69

HTML

<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="http://fb.me/react-with-addons-0.12.1.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id='content'></div>

CSS

.show {
    visibility: visible;
}
.hide {
    visibility: hidden;
}
}

JavaScript 1.7

var data = [{
    show: true,
    name: 'dog'
}, {
    show: true,
    name: 'cat'
}, {
    show: false,
    name: 'monkey'
}];

// list-box
var ListBox = React.createClass({
    render: function () {
        return ( < div className = "list-box" > < h1 > Item < /h1>
         <ItemList data={this.props.data} / > < /div>
     );
   }
 });
 
 
/ / item list
        var ItemList = React.createClass({
            render: function () {
                var items = this.props.data.map(function (item) {
                    return ( < Item data = {
                        item
                    }
                    />
       );
     });
     
     return (
       <ul className="item-list">
         {items}
       </ul > );
                }
                });

            var Item = React.createClass({
                render: function () {
                    var name = this.props.data.name;
                    var stateClass = (this.props.data.show) ? 'show' : 'hide'
                    return ( < li data - name = {
                        name
                    }
                    className = {
                        stateClass
                    } > {
                        name
                    } < /li>
     );
   }
 });
 
 React.render(
  <ListBox data={data} / > ,
                    document.getElementById('content'));