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 = 100;

for (var y = 0; y < size; y++) {
    layout[y] = [];
    for (var x = 0; x < size; x++) {
        layout[y][x] = {
            letter: randomLetter(),
            active: false
        };
    }
}

React.render(<Table layout={layout} />, document.getElementById('container'));

var table = document.getElementsByTagName("table")[0];

function update() {
    var x = random(size);
    var y = random(size);
    layout[y][x].active = !layout[y][x].active;
    
    console.time("render");
    table.rows[y].cells[x].className = layout[y][x].active ? "active" : "inactive";
    console.timeEnd("render");

    setTimeout(update, 100);
}

update();