[Update] The series starts with the old React architecture, there’s a new self-contained post where we build everything from scratch including hooks, concurrent mode, fibers, etc.

A long time ago, when I took Data Structure and Algorithms, one of the assignments was to write my own implementation of an array list, a linked list, a queue and a stack (using Modula-2). Since that day, I’ve never had the need of implementing a linked list again, there’s always a library that keeps me from reinventing the wheel.

Was the assignment worthwhile? Of course. I learned a lot by doing it myself. I learned how to properly use each data structure and how to choose between them.

The purpose of this series of posts (and the companion repository) is to do the same but with something that we now use more than linked lists: React.

Luckily, if we don’t care about performance, debuggability, portability, et cetera, the main three or four features of React aren’t very difficult to re-write. In fact, they are pretty simple and can be written in less than 200 lines of code.

We are going to do that. Write a working version of React, in less than 200 lines of code, with the same API. Given the didactic nature of this library we’ll call it Didact.

The code of an application using Didact will look like this:

In fact that’s the code of the sample app that we will be using during the series. It renders this:

We are going to add features to Didact one at a time on the following posts:

Things out of the scope for these series (for now):

• Functional components (but should be easy to add)
• Context
• Life cycle methods
• The ref attribute
• Reconciliation by key (only reconciliation by children order)
• Others renderers (only DOM is supported)
• Old browsers support

You can find information about React implementation details on the implementation notes, on this talk from

Paul O’Shannessy

or on the React repository.

More coming soon. Follow us on Medium or Twitter to be notified when the next post is published.

Thanks for reading.

I build things at Hexacta.

Have an idea or project we can help with? Write us.