image.png
参考react中文网：https://react.docschina.org/docs/how-to-contribute.html
react中文网提到运行代码的方法：
image.png
图片中的命令行：
yarn build react/index,react-dom/index --type=UMDfixtures/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源码查看。
各位善良的大佬如果发现我学习的方法有问题或者出现了错误，有时间麻烦帮忙指出下，非常感谢~
网友评论