1.创建项目

npx create-react-app react-app

2.弹射create-react-app脚手架内部配置

npm run eject

3.下载源码

进入项目文件夹react-app/src下克隆react源码

git clone --branch v18.2.0 https://github.com/facebook/react.git

4.链接本地源码文件

// config/webpack.config.js
修改前：
alias: {
        // Support React Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        "react-native": "react-native-web",
        // Allows for better profiling with ReactDevTools
        ...(isEnvProductionProfile && {
          "react-dom$": "react-dom/profiling",
          "scheduler/tracing": "scheduler/tracing-profiling",
        }),
        ...(modules.webpackAliases || {}),
      },
    }
 
修改后：
alias: {
        // Support React Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        "react-native": "react-native-web",
        // Allows for better profiling with ReactDevTools
        ...(isEnvProductionProfile && {
          "react-dom$": "react-dom/profiling",
          "scheduler/tracing": "scheduler/tracing-profiling",
        }),
        ...(modules.webpackAliases || {}),
        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`),
        scheduler: path.resolve(__dirname, `../src/react/packages/scheduler`),
        "react-reconciler": path.resolve(
          __dirname,
          `../src/react/packages/react-reconciler`
        ),
      },

5.修改环境变量

react中有大量的__DEV__变量，如遇到浏览器控制台中出现__DEV__ is not defined，可修改下面的环境变量。

// config/env.js

修改前：
const stringified = {
  "process.env": Object.keys(raw).reduce((env, key) => {
    env[key] = JSON.stringify(raw[key]);
    return env;
  }, {}),

修改后：
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,
  };

5.启动项目

npm start

6.解决报错1

修改React和ReactDOM的引用方式
import * as React from "react";
import * as ReactDOM from "react-dom/client";

7.解决报错2

unstable_yieldValue,unstable_setDisableYieldValue这两个模块在
scheduler/src/forks/SchedulerMock.js中，我们在scheduler/index.js中导出即可

修改前：
export * from './src/forks/Scheduler';

修改后：
export * from './src/forks/Scheduler';
export {
    unstable_yieldValue,
    unstable_setDisableYieldValue,
} from "./src/forks/SchedulerMock.js";

8.解决报错3

// react-reconciler/src/ReactFiberHostConfig.js

修改前：
// We expect that our Rollup, Jest, and Flow configurations
// always shim this module with the corresponding host config
// (either provided by a renderer, or a generic shim for npm).
//
// We should never resolve to this file, but it exists to make
// sure that if we *do* accidentally break the configuration,
// the failure isn't silent.

throw new Error('This module must be shimmed by a specific renderer.');

修改后：
throw new Error('This module must be shimmed by a specific renderer.');

export * from "./forks/ReactFiberHostConfig.dom";

9.关闭eslint

// webpack.config.js文件加个false