一、初始化項目
yarn create vite // 初始化
(根據提示，確定項目名稱、選擇框架react、選擇react還是react-ts )
cd 項目名稱 // 進入項目根目錄
yarn // 安裝依賴包
yarn dev // 運行
注釋：項目初始化后src中的目錄很簡單，自己可以按照自己的風格設置子目錄結構，例如下面：
二、配置
打開根目錄，參考vite官網，進行配置文件vite.config.js，比如 別名、less、proxy跨域代理 這些常用的配置項。
三、路由
參考react-router-dom-v6官網：https://reactrouter.com/docs/en/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官網的組件使用示例；