React專案實踐系列一

2021-09-13 17:04:37 字數 1865 閱讀 9105

專案建立於2023年1月底,到現在已經接近半年,在此寫下半年來專案的實踐過程以及自己對前端的學習與體悟。
技術選型

框架:react

路由:react-router 4

狀態管理:redux

ui元件庫:ant design

搭建工程

首先我們並不打算將reactwebpack打包,而使用第三方的cdn,直接在html檔案以script標籤引入。在此我們選用用友的tinper公共靜態資源庫。

改動webpack配置檔案

externals:
而若引入第三方cdn,需要分引入為生產環境還是開發環境的**。

如在生產環境下要引入

而在開發環境引入

選用ejs-compiled-loader,這樣另我們可以在html檔案使用ejs模板引擎。

繼續改動webpack配置檔案

new htmlwebpackplugin(),
html使用模板引擎

最後,設定webpack的別名,讓後續引用的地方減少路徑的複雜度。

alias: ,
如在src資料夾下有兩個資料夾ab,倘若b下的m.js需要引用a下的n.js,需要import x from 『../a/n.js』,設定別名後可寫為root/a/n.js

前後端分離

在知乎上面找了張,前後端分離,簡單的說,就是前端負責頁面互動,顯示後台提供的資料,而後端負責資料的處理,提供給前台資料。

可以看出前後端是有很強的耦合關係,後端需要依賴前端請求,前端需要依賴後端響應。不過此處後端是可以輕鬆模擬前端請求,如postman等。剩下的解決要點為如何給前端模擬資料。因此,我們在設計介面約定資料後構建另乙個簡單的server,這個server會簡單的響應前端請求,根據約定返回模擬的資料。我們將這個server成為mock server

其中mock server可分成本地及遠端。

本地的mock server需要每個前端在自己電腦上部署伺服器,且若後台改動api,後台無法同步維護mock serverreal server

因此打算建立遠端的mock server(其實還有個關鍵是我使用用友配的電腦開發,在本地部署的話電腦配置。。。)不過此步驟我們也可以省略了,用友的大前端技術團隊提供了mock平台。

他的功能十分齊全,具備許可權管理,mock server,資料匯入等等的功能。

React 實踐專案 (四)

react在github上已經有接近70000的 star 數了,是目前最熱門的前端框架。而我學習react也有一段時間了,現在就開始用 react redux 進行實戰!上回說到使用redux saga 管理 redux 應用非同步操作,應用還是只有乙個首頁.現在開始構建乙個新的投稿頁面並使用 r...

React 實踐專案 (四)

react在github上已經有接近70000的 star 數了,是目前最熱門的前端框架。而我學習react也有一段時間了,現在就開始用 react redux 進行實戰!上回說到使用redux saga 管理 redux 應用非同步操作,應用還是只有乙個首頁.現在開始構建乙個新的投稿頁面並使用 r...

react專案實踐 (4)依賴安裝與配置

1.修改package.json,新增需要安裝的包 keywords author license isc devdependencies dependencies 2.執行 npm i 安裝。3.修改webpack.config.js const path require path const h...