React 开发环境搭建
安装 nvm
nvm 是运行 Node.js 的流行方式。 它允许你轻松切换 Node.js 版本，并安装新版本以尝试在出现问题时轻松回滚，它适用于任何符合 POSIX 的 shell 环境。因此在 Windows 中，最好是使用 WSL 来进行开发。
安装 nvm 非常简单，可以直接通过如下的命令来进行安装。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.2/install.sh | bash
具体的 nvm 版本，你可以在 https://github.com/nvm-sh/nvm 中进行查看，以安装最新的 nvm 版本。
安装 Node.js
当你安装好了 nvm 之后，就可以安装 Node.js 了。
要下载安装最新版本的 node，请执行以下命令：
nvm install node
要安装特定版本的 node，请执行以下作：
nvm install 14.7.0
要设置别名：
nvm alias my_alias v14.4.0
安装的第一个版本将成为默认 nodejs 版本。新打开的 shell 环境中的也将是默认版本。
可以使用以下方法列出所有可用的 nodejs 版本
nvm ls-remote
上述命令列出的 nodejs 版本中会包含 LTS 版本，一般而言，推荐安装 nodejs 的 LTS 版本，即长期支持版本。
如果要查看已安装的版本, 可以执行以下命令：
nvm ls
切换 nodejs 版本，可以执行以下命令，即可切换到指定的版本：
nvm use 16
npm介绍
npm 是 Node.js 的包管理工具，它允许你安装和运行 Node.js 的第三方模块。它的使用非常简单，我们可以通过 npm install xxx 来安装指定的软件包，默认情况下软件包会被安装到当前文件树中的 node_modules 子文件夹下。在这种情况下，npm 还会在当前文件夹中存在的 package.json 文件的 dependencies 属性中添加 xxx 条目。
安装包：
npm install <package-name>@<version>
可以只指定包名称，不指定版本，版本是可选项，默认会安装最新的版本。
卸载软件包：
npm uninstall <package-name>
更新指定的包：
npm update <package-name>
更新所有包：
npm update
更新所有包的时候，npm 将检查所有包是否有满足你的版本控制约束的更新版本。推荐在项目下使用 npm update 命令，这样 npm 会检查当前项目下所有依赖的包是否有更新版本。
查看所有已安装的 npm 软件包
npm list
查看软件包在 npm 仓库上最新的可用版本：
npm view [package_name] version
列出软件包所有的以前的版本：
npm view react versions
package.json介绍
package.json 文件是项目的清单。其中包含了项目的依赖项，比如 Node.js 的版本，依赖项，开发依赖项，脚本等。其中比较重要的字段有以下部分。
- version 表明了当前的版本。
- name 设置了应用程序/软件包的名称。
- description 是应用程序/软件包的简短描述。
- main 设置了应用程序的入口点。
- private 如果设置为 true，则可以防止应用程序/软件包被意外地发布到 npm。
- scripts 定义了一组可以运行的 node 脚本。
- dependencies 设置了作为依赖安装的 npm 软件包的列表。
- devDependencies 设置了作为开发依赖安装的 npm 软件包的列表。
- engines 设置了此软件包/应用程序在哪个版本的 Node.js 上运行。
- browserslist 用于告知要支持哪些浏览器（及其版本）。
package-lock.json介绍
在 npm 5.0.0 版本后，npm 引入了 package-lock.json 文件，该文件旨在跟踪被安装的每个软件包的确切版本，以便产品可以以相同的方式被 100％ 复制（即使软件包的维护者更新了软件包）。
确保依赖版本的一致性（Version Locking）
package.json 允许使用 版本范围（如 ^1.2.3 或 ~1.2.3），这样不同环境（比如开发环境和生产环境）可能会安装到不同的依赖版本，导致 “它在我电脑上可以跑” 这种经典问题。
package-lock.json 记录了 每个安装的确切版本，确保所有开发者、CI/CD、生产环境安装的都是同一个版本，避免版本漂移问题。
提高安装速度（Performance Optimization）
package-lock.json 记录了依赖的 完整解析信息（包括 resolved URL 和 integrity 哈希值），这样 npm 可以 直接使用这些信息下载依赖，跳过解析 package.json 的过程，提高安装速度。
防止间接依赖变化
package.json 只管理 直接依赖，但实际安装的模块可能还有 间接依赖（transitive dependencies）。
package-lock.json 记录了所有 直接 + 间接 依赖的版本，确保即使某个间接依赖发布了新版本，也不会影响现有项目。
npx介绍
npx 是一个非常强大的命令，从 npm 的 5.2 版本（发布于 2017 年 7 月）开始可用。npx 可以运行使用 Node.js 构建并通过 npm 仓库发布的代码。
Node.js 开发者过去通常将大多数可执行命令发布为全局的软件包，以使它们处于路径中且可被立即地执行。这很痛苦，因为无法真正地安装同一命令的不同版本。
npx 的另一个重要的特性是，无需先安装命令即可运行命令，这非常有用，主要是因为：
- 不需要安装任何东西。
- 可以使用 @version 语法运行同一命令的不同版本。
例如，可以直接使用 create-react-app 创建新的 React 应用：npx create-react-app my-react-app
创建React项目
创建 React 项目最简单的方法是使用 npx 命令。
npx create-react-app my-app
这样就可以创建一个名为 my-app 的 React 项目了。