Brilliant tutorial on how to build React (not an app, the library itself!) from scratch: https://pomb.us/build-your-own-react/
Ever since I transitioned from Vanilla JS to React, I have always wanted to know how React works under the hood - it just seems so magical when the state updates, the entire UI updates accordingly.
The tutorial taught me:
- How React works under the hook
- Important concepts in React 16: Fiber tree and Concurrent Mode, Rendering vs. Commit phase, Reconciliation
- Clean code and the importance of typing (more on this later!)
Frankly, it was not an easy read. Here are the reasons why:
- Just like with any other code-along tutorial, as more complex ideas are introduced and reflected into the code, it is easy to lose track of which function relates to which function.
- The relationships between high-level concepts were’t explained thoroughly. I didn’t know how the Fiber tree relates to the Virtual DOM, and I was clueless on how the rendering, commit, and reconciliation phases are related to each other.
It costs me a few Medium articles, (great) conversations with ChatGPT and hours of staring at the code, trying to reason it out with myself to grasp the big picture. Honestly, I wouldn’t blame the author since the tutorial was geared towards “code along with me” rather than “here are the big concepts and how they relate”. To compensate, I will have some future posts to break down the tutorial and tackle the related high concepts. Stay tuned!
That said, it is still a brilliant tutorial. Must-read if you want to understand the React internals.
Top comments (0)