discover · compare · collections · requirements · contribute · feed · watching · stats · help with your tokens
Bogdan-Lyashenko/Under-the-hood-ReactJS · source
Snapshot 0 · 2026-11-04T12:47:24Z · JavaScript · MIT
Content fingerprint
792410f0e57a112297b02cec9edfecdb34b6736859228edc019e69c566f2c230GitHub description at capture
Entire React code base explanation by visual block schemes (Stack version)
README at capture
# Under the hood: React <em> This repository contains an explanation of inner work of React. In fact, I was debugging through the entire code base and put all the logic on visual block-schemes, analyzed them, summarized and explained main concepts and approaches. I've already finished with Stack version and now I work with the next, Fiber version. </em> ### I wanted to automate process of "learning and documenting" a complex codebase as much as possible, so I started [Codecrumbs project](https://codecrumbs.io/). It will help to build projects like "Under the hood ReactJs" in a shorter time and in a simpler way! Each scheme is clickable and can be opened in a new tab, use that to zoom it and be able to read from it. Keep the article and a scheme you are reading about at that moment in separate windows (tabs), that will help to match text and code flow easier. We are gonna talk here about both React versions, current one with Stack reconciler and the next one with Fiber (as you probably know, the next version of React will be released soon), so, you can understand better how current React works and appreciate huge achievements on React-Fiber. We use [React v15.4.2](https://github.com/facebook/react/tree/v15.4.2) for explaining how ‘legacy React’ works and React v16.*.*** for ‘Fiber’. Let’s start from old (I have fun to say that) stack version. ## Stack reconciler [](./stack/images/intro/all-page-stack-reconciler.svg) The entire scheme is divided into 15 parts, let's get started. > Read in the best format from [github-pages website](https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/). * [Intro](./stack/book/Intro.md) * [Part 0](./stack/book/Part-0.md) * [Part 1](./stack/book/Part-1.md) * [Part 2](./stack/book/Part-2.md) * [Part 3](./stack/book/Part-3.md) * [Part 4](./stack/book/Part-4.md) * [Part 5](./stack/book/Part-5.md) * [Part 6](./stack/book/Part-6.md) * [Part 7](./stack/book/Part-7.md) * [Part 8](./stack/book/Part-8.md) * [Part 9](./stack/book/Part-9.md) * [Part 10](./stack/book/Part-10.md) * [Part 11](./stack/book/Part-11.md) * [Part 12](./stack/book/Part-12.md) * [Part 13](./stack/book/Part-13.md) * [Part 14](./stack/book/Part-14.md) ## Fiber Will be done with a help of [js-code-to-svg-flowchart tool](https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart) later. 1. [Intro](./fiber/book/Intro.md) [TODO] ## Languages - [Chinese](./stack/languages/chinese/book/Intro.md) - [Korean](./stack/languages/korean/book/Intro.md)