This is my very first attempt to read the source code of a big project. I've read some some projects like redux, react-redux, etc. But trying on a new one, especially one as big as React, could always be challenging and interesting.
The thing is, for a big project like react, even you are a core maintainer, you may not say you are able to fully comprehend everything under the hood or remember every details. We are human, not machines, and we forget things. So it's possibly I'm not covering every details of it. We'll focus on the core, the design pattern, philosophy and leave out the hacky, dirty stuff.
Let's get started.
I always think that to read source code of a project, you should first get some proficiency of using them it. Currently, we have numerous of good tutorial on the internet. Of them I like the official guide the most. I assume you've written at least some React code, but other than that, we should listen to its maintainers, on how to approach the advance usage of it.
There are quite a few topics covered in the advanced guide. The topics that start with an asterisk(*) is the ones I think are not as relevant to the source code compared to the rest.
If you clone the react repository, you can see many separated projects under /package. It's so because in this way their changes can be coordinated together, and issues live in one place. And we are gonna focus on the /package/react/src, where we'll spend the most of our time on. (Note that there are many irrelevant folder like __fixture__, build.)
In the "overview" post, other than the codebase architecture. There are also some disclaimers to help us understand the code better:
The React codebase uses the warning module to display warnings
To forbid some code path from executing,invariant module is used, which throws an error when the condition is falsy.
It used flow as the static type checker.
Different type of renderers, which target at different kinds of platforms, like DOM, native, test, etc.
...
Ask yourself Before Move On
How is the code organized in the React codebase
What are react and react-dom responsible for, respectively
What is the difference between components, elements, instances in React:
Components: function components, class components. It's essentially the mapping function,
(props) => elements
Elements: the output of a components, which is essentially a tree object
Instances: only in the class component, which is what this points to, also where setState lives in
How is React different from the traditional class-instance based composition
How does React use the element tree, instead of instances to compose the DOM structure
What is the advantage(s) of using the element tree:
it's just manipulating objects instead of DOM, which is much more efficient)
How does the React recursively work out a final DOM tree from a mixture of DOM components and React components during the render process
This is my very first attempt to read the source code of a big project. I've read some some projects like redux, react-redux, etc. But trying on a new one, especially one as big as React, could always be challenging and interesting.
The thing is, for a big project like react, even you are a core maintainer, you may not say you are able to fully comprehend everything under the hood or remember every details. We are human, not machines, and we forget things. So it's possibly I'm not covering every details of it. We'll focus on the core, the design pattern, philosophy and leave out the hacky, dirty stuff.
Let's get started.
I always think that to read source code of a project, you should first get some proficiency of using them it. Currently, we have numerous of good tutorial on the internet. Of them I like the official guide the most. I assume you've written at least some React code, but other than that, we should listen to its maintainers, on how to approach the advance usage of it.
There are quite a few topics covered in the advanced guide. The topics that start with an asterisk(*) is the ones I think are not as relevant to the source code compared to the rest.
JSX in Depth
React.createElement.{ }{...props}[*] Typechecking With PropTypes
[*] Static Type Checking
Refs and the DOM
[*] Uncontrolled Components
Optimizing Performance
react-virtualizedshouldComponentUpdate, immutableReconciliation
keys, how it works?[*] Context
[*] Fragments
[*] Portals
[*] Error Boundaries
[*] Higher Order Component
[*] Render Props
[*] Integrating with Other Libraries
[*] Code Splitting
Prerequisites
Please read these two posts first:
Codebase Overview Implementation Details
If you clone the react repository, you can see many separated projects under
/package. It's so because in this way their changes can be coordinated together, and issues live in one place. And we are gonna focus on the/package/react/src, where we'll spend the most of our time on. (Note that there are many irrelevant folder like__fixture__,build.)In the "overview" post, other than the codebase architecture. There are also some disclaimers to help us understand the code better:
warningmodule to display warningsinvariantmodule is used, which throws an error when the condition is falsy.flowas the static type checker.Ask yourself Before Move On
How is the code organized in the React codebase
What are
reactandreact-domresponsible for, respectivelyWhat is the difference between components, elements, instances in React: Components: function components, class components. It's essentially the mapping function, (props) => elements Elements: the output of a components, which is essentially a tree object Instances: only in the class component, which is what
thispoints to, also wheresetStatelives inHow is React different from the traditional class-instance based composition
How does React use the element tree, instead of instances to compose the DOM structure
What is the advantage(s) of using the element tree: it's just manipulating objects instead of DOM, which is much more efficient)
How does the React recursively work out a final DOM tree from a mixture of DOM components and React components during the render process