Interpretation of React source code

1. Configure React source code local debugging environment

Use create-react-app scaffolding to create projects
npx create-react-app react-test
Ejection create-react-app scaffolding internal configuration
npm run eject
Clone the official source code of react (clone in the root directory of the project)
git clone --branch v16.13.1 --depth=1 https://github.com/facebook/react.git src/react

Link local source code

// 文件位置: react-test/config/webpack.config.js
resolve: {
  alias: {
    "react-native": "react-native-web",
    "react": path.resolve(__dirname, "../src/react/packages/react"),
    "react-dom": path.resolve(__dirname, "../src/react/packages/react-dom"),
    "shared": path.resolve(__dirname, "../src/react/packages/shared"),
    "react-reconciler": path.resolve(__dirname, "../src/react/packages/react-reconciler"),
    "legacy-events": path.resolve(__dirname, "../src/react/packages/legacy-events")
  }
}

Modify environment variables

// 文件位置: react-test/config/env.js
const stringified = {
    "process.env": Object.keys(raw).reduce((env, key) => {
       env[key] = JSON.stringify(raw[key])
      return env
   }, {}),
   __DEV__: true,
   SharedArrayBuffer: true,
   spyOnDev: true,
   spyOnDevAndProd: true,
   spyOnProd: true,
   __PROFILE__: true,
   __UMD__: true,
   __EXPERIMENTAL__: true,
   __VARIANT__: true,
   gate: true,
   trustedTypes: true
 }

Tell babel to ignore type checking when converting code

npm install @babel/plugin-transform-flow-strip-types -D

// 文件位置: react-test/config/webpack.config.js [babel-loader]
plugins: [
  require.resolve("@babel/plugin-transform-flow-strip-types"),
]

Export HostConfig

// 文件位置: /react/packages/react-reconciler/src/ReactFiberHostConfig.js
+ export * from './forks/ReactFiberHostConfig.dom';
- invariant(false, 'This module must be shimmed by a specific renderer.');

Modify the ReactSharedInternals.js file

// 文件位置: /react/packages/shared/ReactSharedInternals.js
- import * as React from 'react';
- const ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+ import ReactSharedInternals from '../react/src/ReactSharedInternals';

Close eslint extension

// 文件位置: react/.eslingrc.js [module.exports]
// 删除 extends
extends: [
  'fbjs',
  'prettier'
]

Prohibit invariant reporting errors

// 文件位置: /react/packages/shared/invariant.js
export default function invariant(condition, format, a, b, c, d, e, f) {
  if (condition) return;
  throw new Error(
    'Internal React error: invariant() is meant to be replaced at compile ' +
      'time. There is no runtime version.',
  );
}

eslint configuration

Create a new .eslintrc.json in the react source code folder and add the following configuration

{
  "extends": "react-app",
  "globals": {
    "SharedArrayBuffer": true,
    "spyOnDev": true,
    "spyOnDevAndProd": true,
    "spyOnProd": true,
    "__PROFILE__": true,
    "__UMD__": true,
    "__EXPERIMENTAL__": true,
    "__VARIANT__": true,
    "gate": true,
    "trustedTypes": true
  }
}

Modify the introduction method of react react-dom

import * as React from "react"
import * as ReactDOM from "react-dom"

Solve flow errors in vsCode
```
 "javascript.validate.enable": false
```
Optional configuration
If your vscode editor installs the prettier plugin and the following error appears in the lower right corner when saving the react source file, follow the steps below to solve
<img src="./images/1.png" width="60%" />
1. Install prettier globally
  npm i prettier -g
2. Configure prettier path
  Settings > Extensions > Prettier > Prettier path
  <img src="./images/2.png" width="80%" />
\_\_DEV\_\_ report an error
Delete the node_modules folder and execute npm install

2. Create React Elements

JSX is compiled by Babel into a call to the React.createElement method. After the call, the createElement method returns ReactElement, which is virtualDOM.