前言
首先這是一個react17的項目，包含項目中常用的路由、狀態管理、less及全局變量配置、UI等等一系列的功能，開箱即用，是為了以后啟動項目方便，特地做的基礎框架，在這里分享出來。
這里寫一下背景，我最開始是node8的環境，因為react17需要至少node14的版本，我就直接升級到16了，關於node升級遇到的問題，我有另一篇文章專門羅列步驟和可能出現的問題及解決方案，這里就不多說。鏈接在這 https://www.cnblogs.com/pengfei-nie/p/15701138.html
下邊是目錄，因為每個項目不一樣，比如less、antd就不是必須的，大家可以直接點目錄跳轉自己想看的內容
另外，先貼一下代碼，這是我的GitHub項目地址 點這里，看源碼
以下流程是從零搭建，如果某些模塊你已經有了可以直接跳過。
目錄
先卸載老版本腳手架，然后安裝最新版本的，然后創建我們的應用，指令在下邊了。npx是npm附帶安裝的，可以執行二進制文件。創建好項目，我們就可以打開項目，看一下效果了。
npm uninstall -g create-react-app
npm install -g create-react-app npx create-react-app react-cli17
然后安裝less，我習慣使用less，如果不需要的可以直接略過。不過這個項目我會配置全局的樣式，還會配置全局的less變量。這個可以說是必須的，一個系統得有統一的風格，特別是色調和文字大小，有全局變量，后期維護或者做擴展都很方便，這也是良好的習慣。
下邊是安裝less相關包的指令
npm install less less-loader --save
npm i style-resources-loader
現在運行eject指令，暴露出項目的配置文件，然后安裝proxy本地服務代理依賴，官方支持代理，但是功能不多，用這個做多服務轉發，socket轉發等方便很多。關於代理，在src目錄下創建setupProxy.js文件，不需要引入，系統會自動攔截轉發的。具體代碼這里不貼了，看源碼吧。
完善下目錄結構，提前把常用的文件目錄都建好，后面就不用一一添加了，看下圖。
修改端口號，scripts\start.js 文件下第47行，將原來的端口號改成你想要的。改端口號方法很多，但是我們既然選擇eject了，那就在start.js文件里面修改。
配置less，config\webpack.config.js 文件 74行 和 541行，就是在sass的后邊增加less的解析、全局樣式文件的引入，確保你可以在項目任何地方使用你的less變量。這個行數是參考我的原碼來的，至於具體每一行代碼什么意思，我就不在這具體說了，只說配置，先把架構搭建起來，涉及東西太多，不明白的自己慢慢學。
配置便捷路徑，config\webpack.config.js 322行，就是配置一個便捷路徑，不需要按照相對路徑一層層寫下去，直接利用根路徑和path模塊，前端常規操作。
npm run eject // 顯示配置文件 npm install http-proxy-middleware --save // 安裝代理中間件
四、安裝路由react-route-dom
先安裝路由。這里大致解析下App.jsx文件，看圖片。react升級后，相關的依賴也都做了升級，增加了對應的hooks支持。標簽更是變化非常大，Routes就是以前Switch，還有其他標簽也變了，比如重定向、根標簽等等，這里也不多說，查文檔即可。需要注意下按需加載，首次用到某個模塊時，才會加載，使用suspense會自動執行加載動畫，要不然會閃屏。當然后續再打開就不會有加載動畫了。
結構方面，我做了layout布局組件，這個也是根據項目需要做修改，比如登陸、注冊肯定不會和業務邏輯頁面用同樣的布局，所以我認為登陸、首頁等屬於靜態路由不會變的，然后其他都屬於業務邏輯頁面，進行了路由嵌套。其實這里只是舉了簡單的例子，有一個路由的區分。不想把404還有其他一些情況寫進來，畢竟每個項目場景不同。
src\layouts\BasicLayout.jsx 布局文件渲染，這里渲染業務邏輯路由，我寫了個遞歸，路由和菜單都在route文件維護就好。
npm install --save react-router-dom
安裝狀態管理和http請求。src\utils\request.js 這是封裝的axios文件，對token添加，報錯統一處理等做了處理，代碼有注釋。 src\store\index.js 文件是redux的配置注意分模塊，action注意都加上模塊名，做區分，避免action同名，同時觸發。代碼有注釋。
npm install axios 做http請求的 npm install redux 狀態管理的 npm install react-redux 更方便的全局使用redux npm i redux-thunk redux中間件，解決異步請求問題的
六、安裝antd
然后安裝UI庫，我用antd習慣了，這里還是用它，這里大家隨意，畢竟UI庫很多，用別的的直接跳過。antd的引入本來就是按需加載的，最新版本icon為了迎合按需加載，也單獨抽離出來了。最新版放棄了moment ，改用dayjs。鑒於此，那我們項目中也使用dayjs，也得安裝一下。不過這個包用法和moment一樣，體積小特別多，確實更好。
這里注意修改 package.json 的babel配置，見下圖，按需加載樣式文件的。這個antd官網詳細有說明
npm i antd --save npm i --save @ant-design/icons npm install babel-plugin-import --save--dev npm i dayjs
封裝可復用組件，類型檢查是必須的，因為我沒有使用typeScript語法，所以使用props-types。然后這個項目我做了一些簡單邏輯，比如登陸，比如權限校驗，這些都是項目中必需的，為了方便，安裝了mock，做了模擬數據，mock也是非常方便的工具，裝了不吃虧。
npm i prop-types 做類型檢查
npm install mock 安裝mock，做數據模擬
八、編寫頁面邏輯
src\components 寫了一些全局組件，src\views\Report.jsx 是一個使用組件做的增刪改查界面。代碼邏輯我就不多說了。我在另一篇博客做了一些組件封裝，還有useState useEffect等hooks函數的使用講解，感興趣的可以去那看 鏈接在這： https://www.cnblogs.com/pengfei-nie/p/15719569.html
九、總結
這篇文章主要是對我GitHub上react17項目框架的一個搭建說明。記錄一下這個框架是怎么一步步搭建起來的。當中涉及的知識點很多，畢竟是一個項目的骨架，所以主要講怎么做，至於每個模塊代碼怎么用，那寫起來篇幅就太大了。不過這也是一條很好的學習之路，順着這套搭建流程，將這些技術點一個個攻克還是很有必要的。
希望這篇文章能對你有所幫助！