In the previous

The debugging time of the following contents is the same as the release time of the article. The debugging version is V17.0.2. The problems encountered during the debugging are described below.

To the source code

First you need to pull the React code

Git clone https://github.com/facebook/react.git # # pull/clone code network environment is bad, slow pull, can choose the following two solutions: # 1. Using CPM agent git clone https://github.com.cnpmjs.org/facebook/react # 2. Or by code download git clone https://gitee.com/mirrors/react.git cloud domestic environmentCopy the code

After the pull is successful, install the dependency

Install dependency yarn. Install dependency yarnCopy the code

During the process of installing dependencies, it is possible to encounter installation failures, such as the one I encountered:

Solution:

Fix node version incompatible command configuration, ignoring engine version check.

yarn config set ignore-engines true
Copy the code

New YARN can be used.

Packaged source

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

# packaged command yarn build react/index, the react/JSX, react - dom/index, the scheduler - type = NODECopy the code

After yarn Build is executed, the following package failure may occur.

The solution is to try itnpmPack it and you can pack it.

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

Package successful effect picture:

Then go to the source directorybuild/node_modulesThe latest packaged code is generated. We providereact,react-domcreateyarn link.

You can use Yarn Link to change the directory direction of dependent packages in a project

Do not run yarn link CD react yarn link CD.. cd react-dom yarn linkCopy the code

Create a debug project

NPX create-react-app react-origin-code CD react-origin-code Connect the react and react-dom packages to yarn link react-domCopy the code

React /build/node_modules/react-dom/ CJS /react-dom.development.js

Then YARN Start starts the project.

The page may report an error after the project is started.

Solution:

Fixtures /legacy-jsx-runtimes/react-17/ CJS/react-jsx-dev-runtime.develop. js to the build folder we packed Build /node_modules/react/ CJS and start yarn again.

Finally take a look at the console we added console.log to the react-dom.development.js file

The last

Print success, good, ready to debug!