Debug react source code

foreword

This article mainly introduces how to debug the react source code

• The react version uses 17.0.2;
• Requires Java JDK installed for packaging
• node version in 14+

Download react source code

The author currently executes the following command in the git folder

git clone [email protected]:facebook/react.git
复制代码

When you look at the console and see the figure below, the react source code is downloaded successfully

cd react
复制代码

execute yarn

yarn
复制代码

Execute the package command

yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE
复制代码

When you see the picture below you should have packaged successfully

Modify react and react-dom to point to

This is done by yarn linkcreating a local dependency pointing to

modify react

implement:

cd build/node_modules/react
复制代码

yarn link
复制代码

See the picture below, it should be created successfully.

Modify react-dom

exit the current folder

cd .. 
复制代码

Go to the react-do folder

cd react-dom
复制代码

execute yarn link

yarn link
复制代码

See the picture below indicating success

Create a react project

Use create-react-app to create a project named react-code (the name can be taken by yourself)

See the figure below to indicate that the react creation was successful

Enter the react-code project

cd react-code
复制代码

Switch react and react-dom to point

yarn link react react-dom
复制代码

test

In git/react/build/node_modules/react/cjs/react.development.js file add

注意：这是下载react源码的路径，git文件夹下react源码路径！！！

start react-code

Observe if the console prints 100

The author can already debug the react source code, if you need it, you can try it

Epilogue

The author's level is limited, if there are any shortcomings, please correct me; any comments and suggestions are welcome to browse and discuss in the comment area