创建react源码项目-源码调试

135 阅读1分钟

link本地打包文件

cd react-source-learn/dist/node_modules/react // react-source-learn项目名称
pnpm link --global

下载官方的react代码

在react-source-learn的同级目录下,创建react项目

npx create-react-app react-source-origin

把react-source-origin中使用的react变成自定义的react

cd react-source-origin
pnpm link react --global 

image.png

验证连接效果

在react-source-origin/src/index.js

import React from 'react';
const jsx = (
  <div>
    hello<span>world</span>
  </div>
);

console.log('=====react', React);
console.log('=====jsx', jsx);

image.png 可以看到react变成自己定义的了,原始的react中是没有_mark字段的

目前自定的react中没有react-dom,所以在创建的react业务项目中,react-dom的相关应用都删除了。 原本的自定义的jsx对children的处理有问题,这版代码改写了jsxDEV方法中的children

代码地址

github.com/wangyanduod…