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.0/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react-with-addons.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
CSS
table { border-spacing: 0; }
td { width: 30px; height: 30px; text-align: center; vertical-align: middle; }
td.active { background: yellow; }
td.inactive { background: grey; }
JavaScript 1.7
var Table = React.createClass({
render: function() {
return <table><tbody>{this.props.layout.map(this.renderRow)}</tbody></table>;
},
renderRow: function(row, index) {
return <tr key={index}>{row.map(this.renderCell)}</tr>;
},
renderCell: function(cell, index) {
return <Cell key={index} letter={cell.letter} active={cell.active} />;
}
});
var Cell = React.createClass({
shouldComponentUpdate: function(nextProps) {
return this.props.active != nextProps.active;
},
render: function() {
return <td className={this.props.active ? "active" : "inactive"}>{this.props.letter}</td>;
}
});
var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
function random(limit) {
return Math.floor(Math.random() * limit);
}
function randomLetter() {
return letters.charAt(random(letters.length));
}
var layout = [];
var size = 10;
for (var y = 0; y < size; y++) {
layout[y] = [];
for (var x = 0; x < size; x++) {
layout[y][x] = {
letter: randomLetter(),
active: false
};
}
}
function update() {
var x = random(size);
var y = random(size);
layout[y][x].active = !layout[y][x].active;
console.time("render");
React.render(<Table layout={layout} />, document.getElementById('container'));
console.timeEnd("render");
setTimeout(update, 100);
}
update();