Need help with Under-the-hood-ReactJS?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Bogdan-Lyashenko
4.3K Stars 377 Forks MIT License 173 Commits 4 Opened issues

Description

Entire React code base explanation by visual block schemes (Stack version)

Services available

!
?

Need anything else?

Contributors list

# 4,978
JavaScr...
virtual...
reactjs
visuali...
71 commits
# 409
JavaScr...
reactjs
React
transla...
27 commits
# 11,972
CSS
fiber
virtual...
reactjs
9 commits
# 90,227
fiber
virtual...
reactjs
HTML
3 commits
# 89,621
HTML
Shell
fiber
virtual...
3 commits
# 108,880
virtual...
HTML
CSS
Node.js
2 commits
# 109,187
HTML
fiber
virtual...
reactjs
2 commits
# 111,402
reconci...
virtual...
reactjs
HTML
1 commit
# 21,266
JavaScr...
reactjs
React
Swift
1 commit
# 73,901
Sass
virtual...
reactjs
Shell
1 commit
# 141,562
reconci...
virtual...
reactjs
HTML
1 commit
# 136,882
reconci...
virtual...
reactjs
HTML
1 commit
# 149,236
reconci...
virtual...
reactjs
HTML
1 commit

Under the hood: React

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.

If you like this project, follow me on Twitter @bliashenko to hear about things I am building.

I wanted to automate process of "learning and documenting" as much as possible, so I started codecrumbs project. It will help to build projects like "Under the hood ReactJs" in shorter time.

Read in the best format from github-pages website.

Feel free to open an issue regarding any ideas you have to make it better.

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 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

The entire scheme is divided into 15 parts, let's get started.

Fiber

Will be done with a help of js-code-to-svg-flowchart tool later. 1. Intro [TODO]

Languages

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.