Last April, a fellow batch-mate of mine from Hacker School did a presentation by rendering Conway’s Game of Life in html. It was a memorable presentation; Game of Life I never heard of before, but more importantly, it was my first introduction to React.js. All the underpinnings of it, like how html fragments are broken up and abstracted out into XML-like “components” and how it works in the browser was foreign to me, but I at least was able to comprehend that React can be fast. The cells flashed off and on quickly with no hiccups. A jQuery rendering (also shown) was noticeably slower.

So anyway, fast-forward to today - I gave replicating this project a try (the React part, at least). Surprisingly, it wasn’t terribly difficult to implement. Three components -

  1. <CellTable> - handles the state of the board/call stack.
  2. <CellRow> - holds the cells
  3. <Cell> - The cell itself - no state, but does respond to an onClick event that triggers a cell “culture” to form.

Outside functions determine what the new state would be, and that’s all there was to it.

A lot of fun to do!

Click Me!