Didact: a DIY guide to build your own React
[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.
We are going to add features to Didact one at a time on the following posts:
- Rendering DOM elements
- Element creation and JSX
- Instances, reconciliation and virtual DOM
- Components and state
- Fiber: Incremental reconciliation
Things out of the scope for these series (for now):
- Functional components (but should be easy to add)
- Context
- Life cycle methods
- The
refattribute - 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.
