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 应用。