React Development Environment Construction

prepare

node.js version

可以用nvm管理, 和 pyenv 类似, 可安装多个 node.js 版本, 然后切换

installation in china refer to: https://gitee.com/RubyKids/nvm-cn:

bash -c "$(curl -fsSL https://gitee.com/RubyKids/nvm-cn/raw/main/install.sh)"

add taobao mirror to ~/.bashrc:

export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node/

then source ~/.bashrc

use nvm install node to install latest version, or nvm install --lts to install latest lts version.

例如系统已安装 node 14, 但是有的项目需要 node 10, 那么可以用 nvm 安装:

nvm install 10

然后我们可以用npm ls查看有哪些版本:

$ nvm ls
->     v10.24.1
         system
default -> 10 (-> v10.24.1)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v10.24.1) (default)
stable -> 10.24 (-> v10.24.1) (default)
lts/* -> lts/gallium (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.20.0 (-> N/A)
lts/gallium -> v16.17.0 (-> N/A)

可以看到有两个版本: 10.24.1 和 system, system 指的就是在系统安装的版本, 那么 system 的版本是多少呢?

$ nvm run system --version
Running node system (npm v6.14.12)
v14.16.1

如果要切换版本, 那么就用 use 命令:

$ nvm use system
Now using system version of node: v14.16.1 (npm v6.14.12)
$ node --versio
v14.16.1

如果要切回到 10 版本呢?

# 不用输入完整的10版本, 因为在ls里显示default -> 10 (-> v10.24.1)
$ nvm use 10
Now using node v10.24.1 (npm v6.14.12)

npm vs yarn 包管理

npm 和 yarn 的区别，我们该如何选择？

都是包管理工具, 一样的用法

在 npm5.0 之前，yarn 的优势特别明显。但是在 npm 之后，通过以上一系列对比，我们可以看到 npm5 在速度和使用上确实有了很大提升，值得尝试，不过还没有超过 yarn。

综上我个人的建议是如果你已经在个人项目上使用 yarn，并且没有遇到更多问题，目前完全可以继续使用。但如果有兼容 npm 的场景，或者身处在使用 npm，cnpm，tnpm 的团队，以及还没有切到 yarn 的项目，那现在就可以试一试 npm5 了。

语法

https://babeljs.io/docs/en/learn
https://www.babeljs.cn/docs/learn
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

搭建环境

编辑器推荐 vscode

创建步骤参照: https://create-react-app.bootcss.com/docs/getting-started

npx create-react-app my-app
cd my-app
npm start

开发

按照官方文档https://zh-hans.reactjs.org/tutorial/tutorial.html的示例项目过一遍就大概熟悉了 React

环境变量

参照https://create-react-app.bootcss.com/docs/adding-custom-environment-variables
在项目目录下创建.env, .env.development, .env.production等文件, 分别对应不同的环境, 具体参照文档.
环境变量必须以REACT_APP_开头, 在代码里使用process.env.REACT_APP_XXX获取值.
如果是 dict string, 那么可以用JSON.parse来转换为 dict.

React Router

https://reactrouter.com/en/main/start/tutorial

Code Split

这个非常重要, 不然会把所以代码打包在一个文件里, 然后文件巨大, 加载会很慢.
参照: https://create-react-app.bootcss.com/docs/code-splitting
https://reactjs.org/docs/code-splitting.html

问题