如何运行react源码

image.png

参考react中文网：https://react.docschina.org/docs/how-to-contribute.html

react中文网提到运行代码的方法：

image.png

图片中的命令行：

• yarn build react/index,react-dom/index --type=UMD
• fixtures/packaging/babel-standalone/dev.html

获取react源码

• 从github找到react官方地址

github地址：https://github.com/facebook/react

• 将代码库拉取到本地(因为代码库比较大，需要时间比较长，我直接下载的zip包)

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

安装依赖

下图中提到：在仓库根目录下执行 yarn。

image.png

按照官网在本地代码中安装依赖包：

image.png

打包react和react-dom

在根目录下执行yarn build react/index,react-dom/index --type=UMD,生成打包后的文件。

image.png

生成的文件在根目录/build/node_modules/下面

image.png

运行打包后的代码

找到根目录/fixtures/packaging/babel-standalone/dev.html文件，可以看到是加载了这三个文件。

image.png

在浏览器中打开dev.html可以看到hello world 已经渲染出来

image.png

总结

    根据中文网提到的相关操作，可以将react,react-dom打包，直接通过dev.html加载运行，为了后期方便学习，我直接将用到的文件复制到新的空项目中,github地址:https://github.com/dai1254473705/react-study

image.png

    如果有想要一起学习的可以直接clone代码，项目中source目录下的文件是打包后直接复制过来的,本人不会修改该目录中内容,packages下是react没有打包前的代码，可以对比学习。

打包后的代码适合本地debug调试，查看react运行机制，可以参考react源码查看。

各位善良的大佬如果发现我学习的方法有问题或者出现了错误，有时间麻烦帮忙指出下，非常感谢~