bogdan-lyashenko / under-the-hood-reactjs Goto Github PK

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

Home Page: https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/

License: MIT License

CSS 6.87% HTML 20.73% JavaScript 72.40%

reactjs javascript webdevelopment debugging visualization flow hood scheme fiber stack

under-the-hood-reactjs's Introduction

My name is Bohdan and reading source code is my hobby and passion.

Few years ago I decided to learn React source code. It took quite some time, but as a result I published the open-source book “Under the hood ReactJs” which explains entire codebase with flowcharts.

First thing I realised after that I need some tool to generate flow chart images from JavaScript code. So a year later I built an open-source tool for that called “js2flowchart” which automatically generates flowcharts from JavaScript code.

Later, I discovered I still need something broader to cover entire codebase, something that can help marking important places in code, connections between files, etc. That's why I built “codecrumbs” (name is derived from “code” and “breadcrumb”). You can check out open-source version on Github.

While keep adding more features and learning more about the topic I got the vision that just a "library" won't solve it, it's time to step up the game and build an application with more systematic approach!

🔭 So currently I’m working on Codecrumbs v2, which standalone application with many cool features! Check out project here.

Follow alongside to see where it leads us.

under-the-hood-reactjs's People

Contributors

Stargazers

Watchers

Forkers

dmoralestech eduardosanzb ankeetmaini eric013 fadingvision srinivasdamam kvolkovich-sc bradparks bhageena benmcp vermuz crayonn backlighting-neo elektracodes webleading nangal hhy5277 kod3r luannguyenqv haozhaohang blackbriar dyhpoon jswar del44 ringofhealth vdt lili21 khakurel versutus daniel1989 superman66 djnkyrd bluenine99 cooleso dima1034 artgeektech xuezhma fanyifanbumaimeng slalx puppycodes chbless barseghyanartur vuongvu celleychen dub4ek leanklass ijazhussain786 almmiko liuuu hangeer note89 bray22 zzmjohn jebcat1982 whczs flowkater feanar729 shimteacher otwm leesnhyun todayears pgadea charithsoori kbsbroad yeyuguo imjerrybao whjvenyl damiansk jindev duckywang1 jae-kwang peter9ke dishui starandtina jiangjun1994 shenwei235 qianlongo aximario schatterjee4 bruno-oliveira omaten tcatche killsos jaykan miaodongqing rajeshpillai canhoviet-zz huhuanming wangsiyuan0215 gowthambalashanmugam humesnail xapuu kevindeasis bsdfzzzy techyrajeev danielkolsi adamadeane prudvigali necheporenko ashokvijayendra

under-the-hood-reactjs's Issues

We have translation this repo into Chinese, do you consider add a ch-zn branch for Chinese version?

You can see the Chinese Version at https://github.com/xitu/Under-the-hood-ReactJS/tree/translation.
PR 地址： #24

Russian translation

Hello!
Would it be ok if I translate this guide to Russian and submit a PR? I've noticed there are Chinese and Korean translation, but no Russian translation showed by google search; I briefly looked through all the forks and it doesn't seems that someone on it yet.

Really great guide about React internals!

Possible text formatting issue in part 9

Possibly the part 9 contains a small formatting issue:

But, what about setTimeout case

Maybe it should be:
But, what about setTimeout case

Broken link to previous page in Part 13

Link 'To the previous page: Part 12' (in Part 13) points to Part 13 itself

Possible typos in SVGs - part 7

Two SVGs in part 7 possibly contain small typos:
insertTreeBefpore - which maybe should be insertTreeBefore

https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS/blob/master/stack/images/7/part-7-A.svg
https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS/blob/master/stack/images/7/part-7-B.svg

Please let me know when I can create a Pull Request

Setting up the infrastructure.

Hy,
Thanks for the great article. I am just curious to know what steps exactly you did to actually set up the infrastructure ? Did you download from CDN or is it something else. How to actually clone a particular react version and use it for debugging? I have used React for past 1.5 years and really excited to know what happens inside. If you could mention or add it in README it would be really helpful.

Korean translate

Hello Mr.Bohdan Liashenko. I'm a studying React these days. :)
I'm going to korean translate your 'Under-the-hood-ReactJS' for the purpose of studying and sharing. Can I send Pull requests after I complete it?

How does react know that a stateless function is a react component

First of all thanks for publishing this. This looks like an enormous effort that would benefit a lot of people.

I am working on a few issues for https://github.com/yannickcr/eslint-plugin-react library and have very specific question that you might have an answer for.

How does react know that a stateless function is a react component.
For example:

const statelessComponent = (props) => {
   return <span>{props.someProp}</span>;
 }

If you could point to a source code where react evaluate whether a function is a React or not that would be awesome. Any other directions would also be greatly appreciated

Thanks,
Diana

Under the hood react js

Can I translate this repository into Chinese?

Hi, thank you for your sharing. It pretty good.

Can I translate this repository into Chinese? I will fork this repository translated into Chinese, then replacing the original content.

Help With Fiber

I issued the PR for some grammar fixes a few weeks ago. I'd like to do the same for your Fiber branch if you're ok with that. Let me know how I can help.

Updates

Grate repo, I love your work. I'm trying to read it but most of the times I can't find the codes you mention in react source code even with searching the entire repo. Sounds like react has changed many things. Do you have any plans to update this repository as well?

Favicon Missing for Under-the-hood-ReactJS

There is no favicon for Under-the-hood-ReactJs website.

What does the "clickable" mean in the title?

I see many titles like "Part 0 (clickable)" but it can't be clicked,is there anything I missed?

Picture Intro.3 has overlapping elements where the name is not visible

for example: Danger.js or ReactEventListener.js
Some of the overlapping elements have visible names

Use "React" instead of "ReactJS"

Just a minor suggestion for this excellent resource: You should refer to React as just "React", which is how they refer to it on the official website and in official documentation. So all instances of "ReactJS" should be changed to just "React".

which tool you use to draw picture？

How was this achieved?

Thank you very much for the extremely detailed explanation on how React internals work. It must have been a long journey to figure this out.

I am still learning on how to understand other people's source code better, and I have been trying to understand Angular 2's source code.

I was wondering if you would share some insight on how you were able to step through the React source code. Were you running a simple React app and stepping through it? Were you able to somehow get an unminified build? Were you importing React source code and running a simple app? Would it be possible for you to share your setup? Please let me know.

Thank you very much.