搭建源码调试环境

必修文章

官方文档：zh-hans.reactjs.org/docs/codeba…

Beta：beta.reactjs.org/learn/descr…

BuildYouOwnApp: pomb.us/build-your-…

React哲学: zh-hans.reactjs.org/docs/thinki…

前言：我也是第一次开始尝试写一些文章，总感觉来这世上走一遭，总是需要留下点什么；写的肯定不好，看到的就略过吧，无所谓的～～～ 就写着玩玩，ps：如果真的能帮助到别的小伙伴，那自然是极好的

下载源代码

git clone https://github.com/facebook/react.git

创建调试项目

npx create-react-app my-app

cd my-app & npm install & npm run build

// 将react和react软链到你本地的react代码 此时就可以进行源码调试了
npm link xxxx/react/build/node_modules/react
npm link xxxx/react/build/node_modules/react-dom

如何生存map文件？

如何调试并查看源码

1、找到项目的入口文件 src/index.js，我们可以看到项目的入口是root.render 那么我们可以以此为切入点去查看它的源码;

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();