Oliver Russell, a London-based Python engineer, recently made a playful attempt to “implement” React with 33 lines of code.

His implementation of React mainly involves the following abstractions:

  • We pass a function that gets the state and returns the virtual DOM
  • React renders the virtual DOM as a real DOM in the browser
  • When the state changes, React runs the function again and returns the new virtual DOM
  • React efficiently updates the real DOM to match the new virtual DOM

As you can see, the functionality of this implementation is quite limited. Only virtual DOM generation, difference comparison, and real DOM rendering are involved.

All implementation codes are shown in the figure below.

  • Uncommented edition: github.com/leontrolski…
  • Annotated version: github.com/leontrolski…

This implementation references the syntax of Mithril (mithril.js.org/). Two main functions are exposed:

  • M () : A Mithril style HyperScript helper function for creating a virtual DOM
  • M.ender () : DOM mount and render logic

Where m() receives the following parameters:

  • Label name (e.g'tr') and.The name of the separated class
  • (Optional){string: any}Object that contains all the attributes added to the DOM node
  • Any nested child node, which can be another virtual DOM or string

Returns a virtual DOM object, such as:

{
    tag: 'div',
    attrs: {},
    classes: [],
    children: [
        {
            tag: 'h3',
            attrs: {},
            classes: [],
            children: [
                'current player: x'
            ]
        },
        {
            tag: 'table',
            attrs: {},
            classes: [],
            children: [
                {
                    tag: 'tr',
                    attrs: {},
                    classes: [],
                    children: [
...

Copy the code

It’s still a “toy” to many, but in Oliver Russell’s words, “nobody would recognize 33 lines of code to replace React.” He also wrote several examples based on this “React”.

Noughts and Crosses

  • Leontrolski. Making. IO / 33 – line – rea…

Calendar Picker

  • Leontrolski. Making. IO / 33 – line – rea…

Snake

  • Leontrolski. Making. IO / 33 – line – rea…

I also wrote a very simple ToDo based on this “React” :

class toDoDemo { constructor() { this.todos = [] this.render = () => m.render( document.getElementById('example'), {children: [this.showtodos ()]},) this.render() {return m('div', m('h3', 'ToDo '), m('input', {placeholder: placeholder); 'add todo'}), m('button', {onclick: (e) => this.addTodo(e) }, '+' ), m('ul', this.todos.map((item, i) => m('li', [ m('span', item), m('button', { onclick: () => this.removeTodo(i) }, '-' ) ]))) ]) } removeTodo(i) { this.todos.splice(i,1) this.render() } addTodo(e) { const input = e.target.previousSibling const todo = input.value if(! todo.trim()) return input.value = '' this.todos.push(todo) this.render() } } new toDoDemo()Copy the code
  • code.h5jun.com/zelix/

Interested readers should take a moment to explore this “33-line-React”, including the examples above.

Reference links:

  • Leontrolski. Making. IO / 33 – line – rea…
  • News.ycombinator.com/item?id=227…