Reat 開發程序 for MTNet2
為MTNet2與BOEOW二個專案延伸。以MTNet2為主。
授課主題與目標
主題
Demo 實力標的
以專案開發為目的設計。
不是手把手教學（這裡不是學校）。
後端：MVC5
前端：React (以此為主)
目標
讀碼
React + Redux 觀念與基礎知識
學習開發流程
入門：Counter (option)
入門：To Do List (option)
一、基本資料 CRUD
二、查詢作業
三、表單申請與審查
參考：React + Redux 入門
目的：語法練習
不適用於此專案，因為沒有用 Hooks。
前置條件(當時)
html5
CSS3
ES6/ES2016 JavaScript
React.v16
C# 8.0 (Visual Studio 2017)
.NET Framework 4.6.1
T-SQL (SQL 2012+)
開發環境準備(現在)
Visual Studio 2019 +
VisualSVN※ VS2022 可以 compile MVC5 但無法新增。
node.js v16.13.1 (過高版本不能用)
React.v16.3.2
.NET Framework v4.6.1 (正式環境 v4.8)
Chrome +
React Developer Tools,Redux DevTools
React + Redux 基本觀念
React.v16.3
bundle vs compile
1-way binding
Immutable
不可變
那如何設定新值？
props down events up
資料/訊息傳遞
React Componnet
State: 元件內部狀態值。
render函式：元件呈現。
Redux/Reducer Store
Store: 將數個元件狀態集中在一起。
Action: 行動封包。(受詞)
Dispatch: 發送行動封包。(動詞)
React + Redux
mapStateToProps: 將 store 轉換成 property。mapDispatchToProps: 將 dispatch 轉換成 property。
Redux Async Data Flow Diagram
開發前準備
原始碼管理: SVN
開發環境
IDE: Visual Studio 2017 或 Visual Stuido 2019
.NET Framework 4.6.1
npm + node.js
webpack
Chrome 插件
React Developer Tools
Redux DevTools
開發環境 (下載軟體專案)
自 SVN Server 把 IM 簽出。
斷掉 remote SVN。
改成簽入 local SVN。
開始練習。
註：先不做 DB Access 練習。
MTNET2 專案框架
前端與後端相對應
後端：/Areas/<Group>/<FuncID>Controller.cs
前端：/Scripts/React/<Group>/<FuncID>/app.js
開發階段一：建立後端 Razor Page
MVC5 模型
MVC： Controller(後) <--(Model)-->View(前)
當作 Web Api 使用。
MVC url routing
最精要的範例一：/Controller/Action/{id}
例：https://www.some-company.com/Home/Index
例：https://www.some-company.com/
最精要的範例二：/Area/Controller/Action/{id}
例：https://www.some-company.com/人事功能群/請假申請功能/Default
例：https://www.some-company.com/人事功能群/請假審查功能/Default/form04123
開發階段二之一：建立前端 React App
webpack 打包
功能：執行 bundle。
webpack 組態檔：webpack.config.tt → webpack.config.js
Create React App
//# 檢查環境
node --version
npm --version
//# 開發環境: 從npm安裝套件
npm install
或
npm install --legacy-peer-deps
//# 開發環境: debug
npm run start
// 或
npm run watch
//# 當 release 部署時
npm run build開發階段二之二：加入商業邏輯
webpack.v3 打包
功能：執行 bundle。
webpack 組態檔：webpack.config.tt → webpack.config.js
Demo
先讀碼再開始練習。
官網練習
labt0002:'./LABT/LABT0002/app.js',
labt0003:'./LABT/LABT0003/app.js',
labt0004:'./LABT/LABT0004/app.js',
im010101:'./IM01/IM010101/app.js',
simpleform:'./IM01/SimpleForm/app.js',
simsappform:'./IM01/SimsAppForm/app.js',
simsrpt:'./IM01/SimsRpt/app.js',Last updated