[React & .Net Core]專案開發教學(.Net 6 + React + TypeScript)

前言

此教學會從無到有建立一個SPA框架搭配API的架構，適合產品的快速開發。

事前準備：

(1)安裝Visual Studio 2022 (功能須選用[ASP.NET與網頁程式開發])

p.s. 此教學先以有GUI介面的方式實作，未來會有使用VSCODE+comand line的方式。

(2)安裝Node.js(範例是用18.12.1 LTS，可使用現有Recommended的下載即可)

(3)使用Chrome(後續會安裝React擴充功能，開發時比較方便)

教學開始：

打開VS，點選新增新專案

用React去搜尋範本類型，並選擇ASP.NET Core with React.js

填入專案名稱以及專案版本選擇.NET6.0(長期支援)，點選Create。

新增成功後會產生下圖所列的專案結構，可以F5試跑看看，會跑出Bootstrap樣式的網站。

但這原生的範本有幾個想要加強的部分

(1)使用TypeScript的強型別(原生是Javascript)

(2)樣式框架想用MUI，希望減少範本預安裝的一些套件(ex.bootstrap、reactstrap...etc)

p.s. 以上這些部分想要實現最簡單就是直接用語法新增一個Clientapp取代原本的ClienApp，因使用create-react-app語法，所以名稱限制不可使用駝峰式命名，故改成Clientapp。

首先將原先範本產生的ClientApp改名成ClientApp_Bak，後續會有部分程式碼須轉移。

在PowerShell(快捷鍵Ctrl+`)先CD到專案目錄後執行下列語法，就會產生一個clientapp的react範本

npx create-react-app clientapp --template typescript

實際上檔案結構都相同，只是所有JS都變成TS了!

再來要開啟專案.csproj檔案，並將sparoot位置改成clientapp

將ClientApp_Bak的package.json內的scripts區覆蓋到clientapp的package.json

原本clientapp的package.json

改完後的clientapp的package.json

將原本一些在ClientApp_Bak的檔案搬移到clientapp裡，如下列清單

(1)ClientApp_Bak/.env 

=>clientapp/.env

(2)ClientApp_Bak/aspnetcore-https.js

=>clientapp/aspnetcore-https.js

(3) ClientApp_Bak/aspnetcore-react.js

=>clientapp/aspnetcore-react.js

(4) ClientApp_Bak/src/setupProxy.js

=>clientapp/src/setupProxy.js

這樣就升級成TypeScript囉!可使用F5就可以看到專案已成功。

再來要安裝專案所須程式，一樣使用npm將套件載入

須先指定到clientapp資料夾再執行下面script

Ex. cd clientapp 

//安裝React基本元件(轉頁第三方套件)

npm install react-router react-router-dom 

//安裝React基本元件(TypeScript使用，裝在dev即可)

npm install @types/react-router @types/react-router-dom cross-env --dev

//安裝mui

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material 

執行完就可以開始開發程式了，如果上方步驟覺得複雜，可直接從GitHub下載即可使用~

下一篇會講解React基本語法，敬請期待~

參考連結：

https://www.nolanbradshaw.ca/net-react-typescript-template

https://mui.com/material-ui/getting-started/installation/