Reat 開發程序 for MTNet2

為MTNet2與BOEOW二個專案延伸。以MTNet2為主。

授課主題與目標

主題

• Demo 實力標的

  • IM: http://localhost:19001/im01/simpleform

• 以專案開發為目的設計。

• 不是手把手教學（這裡不是學校）。

• 後端：MVC5

• 前端：React (以此為主)

目標

• 讀碼

• React + Redux 觀念與基礎知識

• 學習開發流程

  • 入門：Counter (option)

  • 入門：To Do List (option)

  • 一、基本資料 CRUD

  • 二、查詢作業

  • 三、表單申請與審查

參考：React + Redux 入門

• 目的：語法練習

• 不適用於此專案，因為沒有用 Hooks。

Getting Started with React Redux | React Reduxreact-redux.js.org

前置條件(當時)

• html5

• CSS3

• ES6/ES2016 JavaScript

  • React.v16

• C# 8.0 (Visual Studio 2017)

• .NET Framework 4.6.1

• T-SQL (SQL 2012+)

開發環境準備(現在)

1. Visual Studio 2019 + VisualSVN

   1. ※ VS2022 可以 compile MVC5 但無法新增。

2. node.js v16.13.1 (過高版本不能用)

3. React.v16.3.2

4. .NET Framework v4.6.1 (正式環境 v4.8)

5. 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函式：元件呈現。

React Component 模型

Redux/Reducer Store

• Store: 將數個元件狀態集中在一起。

• Action: 行動封包。(受詞)

• Dispatch: 發送行動封包。(動詞)

Redux Store 模型

React + Redux

• mapStateToProps: 將 store 轉換成 property。

• mapDispatchToProps: 將 dispatch 轉換成 property。

React + Redux 模型

Redux Async Data Flow Diagram

ReduxAsyncDataFlowDiagram

Redux Essentials, Part 5: Async Logic and Data Fetching | Reduxredux.js.org

---

開發前準備

原始碼管理: SVN

開發環境

IDE: Visual Studio 2017 或 Visual Stuido 2019

.NET Framework 4.6.1

npm + node.js

webpack

Chrome 插件

React Developer Tools

Redux DevTools

開發環境 (下載軟體專案)

1. 自 SVN Server 把 IM 簽出。

2. 斷掉 remote SVN。

3. 改成簽入 local SVN。

4. 開始練習。

註：先不做 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

先讀碼再開始練習。

官網練習

https://zh-hant.reactjs.org/

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',