React Base Fiddle (JSX)

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

by Eugeniy Voronin

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 Hello = React.createClass({
  getInitialState: function () {
    var db = [];
    for (var i = 0, l = 500; i < l; i++) {
      db.push({
        name: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5),
        value: i
      });
    }
    return {
      db: db
    };
  },
  checkAll: function (ev) {
    var items = this.state.db.slice();
    items.forEach(function (v) {
      v.checked = ev.target.checked;
    });
    this.setState({db: items});

  },
  handleCheck: function (ev) {
    var id = ev.target.dataset.id;
    var items = this.state.db.slice();
    var item = items.filter(function (v) {
      return v.value == id;
    })[0];
    item.checked = ev.target.checked;
    console.log(items.filter(function (v) {
      return v.checked;
    }).length);
    this.setState({db: items});

  },
  render: function () {
    return <div>
      <table>
        <thead>
        <tr>
          <th>Name</th>
          <th>Value</th>
          <th>
            <input type="checkbox" onChange={this.checkAll} id="check-all"/>
            <label htmlFor="check-all">Check all</label>
          </th>
        </tr>
        </thead>
        <tbody> {
          this.state.db.map(function (v, i) {
            return (
                <tr key={v.value}>
                  <td>{v.name}</td>
                  <td>{v.value}</td>
                  <td>
                    <input id={'item-'+i} type="checkbox"
                           data-id={i}
                           onChange={this.handleCheck}
                           checked={v.checked}/>
                    <label htmlFor={'item-'+i}>Check this</label>
                  </td>
                </tr>
            );
          }.bind(this))
        }
        </tbody>
      </table>
    </div>;
  }
});

React.render(<Hello />, document.getElementById('container'));