# 4/27 (三)

:::warning
- iOS: MVC -> MVVM
- web: HTML+CSS -> Redux 資料流概念 -> MVVM+Redux (playcraft 之前的架構) -> pure MVVM (playcraft 現在的架構)
- (iOS + Android) app Launch 進入點(app 開啟之後做了哪些事)
- 各平台的 layout system for each platform
- error handling (Kotlin + JS)
- ~~MVVM (android 教學)~~
- @Ralf & @Isaac 教學 `*` `&` (C++)
- @Ralf 說要研究 js 的 null & undefined & ??
- 版號使用
:::

## web

https://github.com/RalfHsiao/web-introduction-demo

- head 紀錄的比較是 metadata
- 這邊會寫一些 import 的 library（舊時代）
- 也可能會被混淆程式碼
- body 才會是我們在網頁上看到的畫面
- body 應該算是 MVC 的 View
- form, input... 都是 HTML5 提供的
- demon ???
- complile 解釋 js code，否則有些 js code 瀏覽器跑不起來
- typescript 也需要 complil 解譯成 javascript 後執行
- js 包裝後還是文字檔，只是可能把變數換成比較短的，例如 student -> a
- npm 是下載相關套件
- npx 是套件管理系統之一，相較 npm 他是一次性的（執行結束後套件相關檔案就不留在電腦上）
- 預設找 index.html 這個檔案
- yarn 一樣是套件管理，他是 base on npm
- `package.josn` -> `yarn.lock`, `package-lock.json`
- jsx 方言？！
- 瀏覽器有自己的排版，但都由上而下、由左至右
- ssr, server-side render (playcraft sample app)(saku)
- csr, client-side render
- class component 但現在都是 functional programming
- control component -> 元件狀態內改變後，去手動更新 model 內的 truth
- useEffect 這個 function 是 "react hook"
- useEffect 是用來處理 side effect 的事
- https://zh-hant.reactjs.org/docs/hooks-intro.html
- https://ithelp.ithome.com.tw/users/20103315/ironman/2668

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

### 下期預告
**React**
* 介紹 Class Component (?)
* 介紹 jsx

**React hooks**
- useState
- useEffect
- useRef
- useCallback
- useMemo

**Demo**
React - build 出來的 files，用 http-server 打開