[React & .Net Core]專案結構說明

這篇主要是延續第一篇.NET 6+React的開發說明，範例程式碼可參考這裡。

說明在開發程式碼時的一些建議存放規範以及規則，讓開發人員可以方便快速開發。

此專案為全端專案，故要拆成兩個部分做說明，分別是前端(React)以及後端(WebAPI)

(1)前端(React)

首先將上次的專案打開，並且將clientapp/src的資料夾展開，如以下畫面

從上到下依序說明：

public:主要存放進靜態檔案，例如html,Image,icon,etc.

src:主要存放程式碼的地方，內部會切分許多資料夾來存放不同功用的程式碼

 components:存放開發好的React元件，讓多個地方可以共用。

 contexts:存放一些跨系統會使用的變數，最常使用的是登入資訊、樣式、 etc. 

 models:存放強型別的typescript結構，建議所有物件都須定義

 pages:頁面存放位置

 services:服務使用，通常使用在呼叫API或共用方法 

 stores:Redux的Store存放位置，這專案暫不使用Redux，先保留

 app.tsx:主要頁面，通常定義了路由以及頁面結構

 index.tsx:進入點，用來載入app.tsx，正常情況不會改

 react-app-env.d.ts:Typescript使用，主要讓一些檔案類型像照片可以Import而不會出現錯誤

 reportWebVitals.ts:效能測量方式，可拿來本機console或串接第三方套件做效能偵測

 setupProxy.js:設定代理伺服器位置，通常使用於多個不同位置API的設定

 setupTests.ts:測試用，可使用jest+enzyme搭配測試，會在有一篇測試的做說明

 .env:設定參數位置，現有設定是.NET6官方範本產生的，development版本有預設port=44410

 .gitgnore:用來管理檔案是否排除git版控(此檔案刪除會所有檔案都加入版控)

aspnetcore-https.js:.NET6官方範本產生，須搭配package.json內的prestart使用才會在Debug時對接到.NET SPAProxy

 aspnetcore-react.js:同前一個說明，實際差別於後續再補充，

 package.json:Webpack的config，用於管理套件、打包...等設定

 README.md:專案說明，結構是mockdown語法。

 tsconfig.json:Typescript的config，用於管理編譯屬性和設定。

 

(2)後端(WebAPI)

API是MVC結構，如下圖。

p.s.在小專案也可直接使用Minimal API，但此專案不使用和介紹。

從上到下依序說明(跳過前端資料夾)：

Properties:存放publish,launch設定。

Controllers:controller存放位置，正常會依照類別去做controller的命名，例如MemberController(會員相關),CouponController(優惠券),LoginController(登入相關),etc.

Models:結構定義存放位置。

Pages: Server頁面定義位置，可以定義類似錯誤頁或是API說明頁...等等。

Services:服務存放位置，通常用於定義共用方法以及介接資料層。

appsettings.json:專案參數的設定，通常定義資料庫連線、外部URL或加密設定...等等。

Program.cs:專案進入點，.NET 6 將Startup.cs整合進裡面，並使用Top-level statements簡化。

 

上述介紹了專案內各個檔案或資料夾的定義以及說明，下一篇會使用React搭配mui開發出一個可切頁的範例網站。