recreate the virtual dom of React
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Recreate a simple version of React.

Get started

To install packages and build:

$ npm install
$ npm run start

Then open index.html in your browser.

To run tests:

$ npm run test


  • understand better how React works
  • use pure JS
  • interact with browser APIs
  • use ES6
  • set up a project
  • practice TDD


General Todos

Virtual DOM Steps

  1. create virtual DOM, eg what original DOM should look like
  2. append virtual DOM to actual DOM
  3. listen for updates from components
  4. create new virtual DOM with changes
  5. diff the virtual DOM with actual DOM (-> patches)
  6. patch original DOM with patches
  7. start again from step 3

Approaches taken

  • render
    • just render into doc
    • hold all logic around diffing and patching, plus reference to the latest tree
  • general
    • use classes (eg VirtualPatch)
  • createElement
    • returns string
    • returns dom node
  • diff
    • store reference to target note
    • store path to target note
    • return an object of patches with keys as indices, values as patches
    • create elements while diffing
    • return an array of patches
  • patch
    • apply patch while traversing vdom
    • apply patch while traversing real dom
  • nodes
    • elm-like div representation, no ids (eg ['p', { id: 'blue' }, [ 'hello world' ]])
    • use simple objects, with ids (eg factories)
    • createNode returns obj
    • createNode returns dom node
    • keep track of ids, every vnode gets an id
    • only give ids to vnodes that need them
    • give no nodes ids; instead, give them reference to their dom el


Examples of a virtual DOM from other places. To compile, run webpack from the directory.