從零搭建react hooks專案(github有原始碼)

Mr.聶發表於2021-12-28

前言

  首先這是一個react17的專案,包含專案中常用的路由、狀態管理、less及全域性變數配置、UI等等一系列的功能,開箱即用,是為了以後啟動專案方便,特地做的基礎框架,在這裡分享出來。

  這裡寫一下背景,我最開始是node8的環境,因為react17需要至少node14的版本,我就直接升級到16了,關於node升級遇到的問題,我有另一篇文章專門羅列步驟和可能出現的問題及解決方案,這裡就不多說。連結在這  https://www.cnblogs.com/pengfei-nie/p/15701138.html

  下邊是目錄,因為每個專案不一樣,比如less、antd就不是必須的,大家可以直接點目錄跳轉自己想看的內容

  另外,先貼一下程式碼,這是我的GitHub專案地址   點這裡,看原始碼

  以下流程是從零搭建,如果某些模組你已經有了可以直接跳過。

 

目錄

1、使用 create-react-app 建立應用

2、安裝less、完善目錄結構

3、修改配置檔案(修改埠號,安裝本地服務轉發等)

4、安裝路由react-route

5、安裝axios和redux三件套

6、安裝antd

7、安裝prop-types和mock

8、編寫頁面邏輯

9、總結

一、react-cli建立應用

  先解除安裝老版本腳手架,然後安裝最新版本的,然後建立我們的應用,指令在下邊了。npx是npm附帶安裝的,可以執行二進位制檔案。建立好專案,我們就可以開啟專案,看一下效果了。

 

npm uninstall -g create-react-app
npm install -g create-react-app npx create-react-app react-cli17

 

 

 

二、安裝less、完善目錄結構

  然後安裝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

 

 

 

 

 

五、安裝axios和redux三件套

  安裝狀態管理和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

 

 

 

 

 

七、安裝prop-types和mock

  封裝可複用元件,型別檢查是必須的,因為我沒有使用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專案框架的一個搭建說明。記錄一下這個框架是怎麼一步步搭建起來的。當中涉及的知識點很多,畢竟是一個專案的骨架,所以主要講怎麼做,至於每個模組程式碼怎麼用,那寫起來篇幅就太大了。不過這也是一條很好的學習之路,順著這套搭建流程,將這些技術點一個個攻克還是很有必要的。

  希望這篇文章能對你有所幫助!

相關文章