可以少去理解一些不必要的概念，而多去思考為什麼會有這樣的東西，它解決了什麼問題，或者它的運行機制是什麼？ 一. 環境搭建 工作編輯器：Visual Studio Code。 Javascript 解析器、運行環境 Node.js 的安裝。 npm 安裝：npm 是 Node.js 的軟體包管理器。 ...
可以少去理解一些不必要的概念，而多去思考為什麼會有這樣的東西，它解決了什麼問題，或者它的運行機制是什麼？
一. 環境搭建
- 工作編輯器：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 應用。
