如何运行react源码

2,138 阅读2分钟

参考react中文网:react.docschina.org/docs/how-to…

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

图片中的命令行:

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

获取react源码

  • 从github找到react官方地址

github地址:github.com/facebook/re…

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

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

安装依赖

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

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

打包react和react-dom

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

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

运行打包后的代码

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

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

总结

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

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

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

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