一、初始化專案

yarn create vite  // 初始化

(根據提示，確定專案名稱、選擇框架react、選擇react還是react-ts )
cd 專案名稱        // 進入專案根目錄
yarn                    // 安裝依賴包
yarn dev              // 執行

註釋：專案初始化後src中的目錄很簡單，自己可以按照自己的風格設定子目錄結構，例如下面：

二、配置

開啟根目錄，參考vite官網，進行配置檔案vite.config.js，比如 別名、less、proxy跨域代理 這些常用的配置項。

三、路由

參考react-router-dom-v6官網：

(1)  安裝路由包：yarn add react-router-dom@6

(2)  專案入口檔案不變

(3)  巢狀路由中父元件需要使用Outlet（當然路由也可以平鋪）

import { Routes, Route, Navigate, Outlet } from 'react-router-dom';

註釋：以上的outlet元件只是一個插座，並不能獨立顯示父元件內容；以下可以解決這個問題：

四、介面統一配置

(1)      安裝axios： yarn add axios 或 npm install axios --save

(2)      新建一個axios.config.js檔案（將被引入api檔案中）；

(3)      配置（或封裝）axios.config.js檔案，大致如下：

(4)      api檔案引入該配置，然後開始寫介面，如下：

註釋：具體地，可以參考：

https://www.npmjs.com/package/axios

https://www.cnblogs.com/ljy-/articles/13863579.html

五、狀態管理

狀態管理有多種方式：redux 、recoil、mobx、xstate、dva等。 

註釋：最流行的5種狀態管理庫的對比可以參考：https://blog.csdn.net/frontend_frank/article/details/109192922

對於我這個初學者而言，首選具有龐大社群、大量文件以及大量問答的庫，最開始嘗試了Redux。下面就以redux為例：

Redux官網：https://react-redux.js.org/

Redux中文：http://cn.redux.js.org/

元件中，對redux的屬性與方法的處理方式，

在類元件中，主要是將state/dispatch繫結到該元件中：

 而在函式元件中，可以直接通過react-redux中的如下方法進行呼叫：

import { useSelector, useDispatch } from 'react-redux';

const dispatch = useDispatch();//若是要將store中的屬性更新在檢視中，可以用useState設定

六、函式元件與類元件

七、UI框架配置（以antd為例）

參考antd官網：https://ant.design/docs/react/introduce-cn

 (1)      安裝包：yarn add antd 或 npm install antd --save 

(2)      入口檔案引入樣式：import 'antd/dist/antd.css'; 或 import 'antd/dist/antd.less'

(3)      使用元件：參考antd官網的元件使用示例；