Download the source code

First, go to Github and find the React source library, then fork into your own library.

Take my fork library for example:

git clone [email protected]:EagleClark/react.git
Copy the code

Then, add the main library:

cd react
git remote add main https://github.com/facebook/react.git
Copy the code

You can update the code from the main library using the following command:

# View remote branches
git branch -r
# Cut the local branch
git checkout origin/main
# pull the remote code main branch
git pull main main
Pull remote code like version 17.0.2The git pull the main 17.0.2Copy the code

Install dependencies

You are advised to use YARN to manage dependency packages.

First, install YARN

# macOS
brew install yarn
Copy the code

Windows can be downloaded from the official website. Msi file for installation.

After installation, use the following command to view the version:

yarn --version
Copy the code

Yarn source configuration (If the domestic network is very slow, you can configure domestic mirroring.)

# mirror view
yarn config get registry
# temporary changesYarn save package name - registry at https://registry.npm.taobao.org/# global change
yarn config set registry https://registry.npm.taobao.org/
Copy the code

In addition, the image address of electron also needs to be configured.

yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/
Copy the code

Go to the project directory and execute the following command to install dependencies

yarn

You may need to add sudo under Mac
sudo yarn
Copy the code

packaging

The react, Scheduler, and React-dom packages are CJS packages that dev environment can use.

--type=NODE
yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE
Copy the code

The source directory build/node_modules now generates the latest code package. We’ll create a shortcut for react and react-dom, which will link to the file we built.

# link will link the current module globally, if you want to unlink it
Change the react pointer
cd build/node_modules/react
yarn link

Change the react-dom pointer
cd build/node_modules/react-dom
yarn link
Copy the code

Create the project and debug it

Next we use create-React-app to create a new project somewhere else (although we can also build our own scaffolding if create-React-app is too heavy for us).

npx create-react-app react-test
Copy the code

In the react-test project, point the react and react-dom packages to the facebook/react package we just generated.

# react-dom = react-dom = react-dom
yarn link react react-dom
Copy the code

Now try changing the code in react/build/node_modules/react-dom/ CJS /react-dom.development.js to anything like console.log.

Run yarn start under the React-test project to start debugging.

Introduction to Directory Structure

├─ fixtures # Contains minor React test projects for contributors ├─ packages # Contains metadata (package.json) and source code for all packages in the React repository (subdirectory SRC) Scripts # Scripts for various toolchains such as git, Jest, ESLint, etcCopy the code

Pay attention to the packages directory, and there are a lot of directories under it. Let’s pick some of the more important ones:

└.CreateElement React.Com API ├─ React.dom Responsible for rendering the changing components to the page ├─ React-Reconciler # Coordinator, Responsible for finding out the changing components, very important Core ├─ Scheduler # Implementation, scheduling task priorities, Priority priority for high-priority tasks into Reconciler Exercises ─ shared # methods and global variables common to other modules in the source codeCopy the code

About Flow Syntax

When you open the Source Code for React with VS Code, you will find a lot of errors. The syntax is different from that of JS and TS. This is because the source Code for React uses Flow syntax. The GitHub address of the project can be seen here, but without digging into the syntax, you won’t need to look it up again.

Flow syntax is Facebook’s JavaScript static type checker. More information about Flow syntax can be found in the official documentation. Here’s a quick introduction to useful points or syntax.

VS Code error resolved

In VS Code, the Code (file) – > Preferences (Preferences) – > Settings (set) search in javascript. Validate. Enable to disable it.

To enable the Flow

Add annotations to enable Flow.

// @flow
Copy the code

or

/ * * *@flow* /
Copy the code

Type annotation

Basic types:

  • Booleans
  • Strings
  • Numbers
  • null
  • undefined (void in Flow types)
  • Symbols (new in ECMAScript 2015)
// @flow
function square(n: number) :number {
  return n * n;
}

square("2"); // Error!
Copy the code

The Maybe type, which can be the currently set type or null or void.

// @flow
function acceptsMaybeString(value: ? string) {
  // ...
}

acceptsMaybeString("bar");     // Works!
acceptsMaybeString(undefined); // Works!
acceptsMaybeString(null);      // Works!
acceptsMaybeString();          // Works!
Copy the code

Type Aliases Type alias

// @flow
type MyObject = {
  foo: number,
  bar: boolean,
  baz: string,
};
Copy the code
import type {Container} from './ReactDOMHostConfig';
Copy the code