[FE] React 初窥门径（一）：环境准备

github: facebook/react
最新的 tag 为 17.0.2

1. 准备 React 源码（ReactProject）

安装 node v14.18.1

$ nvm use v14.18.1
$ nvm alias default v14.18.1

全局安装 yarn，并设置 registry 为 taobao 镜像地址

$ npm i -g yarn

# 会修改 ~/.yarnrc
$ yarn config set registry https://registry.npm.taobao.org

克隆代码（并切换到 tag v17.0.2）

$ git clone https://github.com/facebook/react.git
$ git checkout v17.0.2

安装依赖

$ yarn

2. 创建测试工程（ExampleProject）

设置 registry 为 taobao 镜像地址

# 会修改 ~/.npmrc
$ npm config set registry https://registry.npm.taobao.org

安装 create-react-app，并初始化一个 React 项目（我们这里起名为 test-react）

$ npm i -g create-react-app

# 会自动安装依赖
$ create-react-app test-react

运行项目

# 会自动打开 http://localhost:3000/
$ npm start

3. 运行

目前还没有直接调试 React 源码的办法，只能调试编译后的代码
参考 Question: Building react with sourcemaps

设置环境变量 ~/.zshrc（便于以后命令行处理）

# 需要结合实际情况进行修改

# React 源码目录
export ReactProject=/Users/.../react

# 使用 React 的项目目录
export ExampleProject=/Users/.../test-react

跳转到源码目录，构建 react 项目（watch 模式），

$ cd $ReactProject
$ yarn build

创建符号链接，将 react 和 react-dom 的依赖指向 react 源码的构建产物，然后再启动，

$ cd $ExampleProject
$ ln -s $ReactProject/build/node_modules/react $ExampleProject/node_modules/react
$ ln -s $ReactProject/build/node_modules/react-dom $ExampleProject/node_modules/react-dom
$ yarn start

---

参考

github: nvm
github: facebook/react v17.0.2
yarn config
Question: Building react with sourcemaps