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>
CSS
.c { background: yellow }
td { border: 1px solid gray }
table { border-collapse: collapse }
JavaScript 1.7
var ROWSC = 400;
var COLSC = 100;
var Hello = React.createClass({
getInitialState: function () {
return {
t: { "1-1": 'c' }
};
},
clicked: function (k) {
var t = this.state.t;
t[k] = t[k] ? 0 : 'c';
this.setState({ t: t });
},
render: function() {
var items = [];
for (var r = 0; r < ROWSC; r++) {
var cols = [];
for (var c = 0; c < COLSC; c++) {
var k = ''+r+'-'+c;
cols.push(<td key={c} onClick={this.clicked.bind(this,k)} className={this.state.t[k]}> </td>);
}
items.push(<tr key={r}>{cols}</tr>);
}
return <div>Hello {this.props.name}
<table>
{items}
</table>
</div>;
}
});
console.time('a');
React.render(<Hello name="World" />, document.getElementById('container'));
console.timeEnd('a');