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