Git Product home page Git Product logo

under-the-hood-reactjs's Introduction

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.

I wanted to automate process of "learning and documenting" a complex codebase as much as possible, so I started Codecrumbs project. 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 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.

Read in the best format from github-pages website.

Fiber

Will be done with a help of js-code-to-svg-flowchart tool later.

  1. Intro [TODO]

Languages

under-the-hood-reactjs's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

under-the-hood-reactjs's Issues

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

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

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.

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?

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!

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.

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.

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?

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.