React 应用构建（环境）
可以少去理解一些不必要的概念，而多去思考为什么会有这样的东西，它解决了什么问题，或者它的运行机制是什么？
一. 环境搭建
- 工作编辑器：Visual Studio Code。
- Javascript 解析器、运行环境 Node.js 的安装。
- npm 安装：npm 是 Node.js 的软件包管理器。
二. 项目构建
1. 脚手架构建项目（JavaScript）
脚手架是快速帮助开发者搭建开发环境，用最简单方式创建一个简单 Hello World 项目。主要步骤分析如下所示。
全局、非全局安装脚手架环境，创建项目：
全局安装脚手架环境 create-react-app：
$ npm install -g create-react-app
# 查看安装版本
$ create-react-app -V
# 创建一个项目
$ create-react-app my-app
非全局安装，可以直接使用 npx（临时安装最新的脚手架）：
# 安装、构建 react 项目
$ npx create-react-app my-app
运行项目：
# 运行项目
$ cd my-app
$ npm start
构建项目实际上会安装三个东西：
- react：react 顶级库。
- react-dom：因为 react 有很多的运行环境，比如 app 端的 react-native ，我们要在 web 上运行就使用 react-dom。
- react-scripts：包含运行和打包 react 应用程序的所有脚本及配置。
其他命令：
# 1. 安装依赖 node_modules
$ npm install 缩写 npm i
# 2. nrm 是 npm 包的仓库管理软件，仓库链接地址托管给 nrm 管理，也就是镜像管理
$ npm i -g nrm # 安装 nrm
$ nrm ls # 查看可选源镜像
$ nrm use xxx # 切换镜像
$ nrm current # 查看当前镜像源
# 3. 清除 npm 缓存
$ npm cache clean --force
第一个项目解析 chess-game：
项目入口：index.html 里面加载一个空的 div 节点：
<div id="root"></div>
项目解析：
// 从 React 的包中引入了 React。只要你写 React.js 组件就必须引入 React，因为 React 里有一种语法叫 JSX。要写 JSX 就必须引入 React。
import React from "react";
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去。它是从 react-dom 中引入的。
import ReactDOM from "react-dom"
// ReactDOM 里有一个 render 方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
// 利用 React DOM 模块 渲染一段 DIV 节点，把整段节点插入到 root 节点中。
ReactDOM.render(<Game />, document.getElementById("root"))
// React 18 替换之前写法如下：
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Game />);
2. 脚手架构建项目（TypeScript）
脚手架是快速帮助开发者搭建开发环境，这里脚手架采用 TypeScript 模版创建一个项目。
$ npx create-react-app my-app --template typescript
3. Umi 脚手架构建项目
在工作空间目录下建个空目录用来存放项目：
$ mkdir myapp && cd myapp
通过官方工具创建项目：
$ yarn create @umijs/umi-app
# 或
$ npx @umijs/create-umi-app
安装依赖：
$ yarn install
启动项目：
$ yarn start
4. Umi + dva + antd + mobile
项目以 UMI + DVA 为底层框架，以 Ant Design Mobile 为 UI 组件库，快速构建 H5 应用。