React 入門 & 使用Typescript開發(Lion教育訓練回顧)

2020-0306 Lion教育訓練,之前寫到一半,遲遲沒有publish,因為上半年專案與需求一個接一個。現在剛好正是時候重新整理與大家分享。

▲React入門教育訓練

前言

專案與環境設置

▲專案啟動後的畫面

課程學習目標

課程大綱

1. React 小試身手

Props

State

2. TypeScript語法

3. React應用與常見地雷

3–1. React 生命週期

▲React 生命週期
▲React 生命週期流程圖

3–2. 常見地雷區- PropsAsState

▲把Props直接當成State傳

3–3. 巢狀State該如何維護?

▲巢狀State
▲深層巢狀State

3–3 SOL 1. 土炮法:

▲傳統式寫法(土炮)

3–3 SOL 2. 洋蔥式寫法(用prevState 一層一層剝開state)

▲prevState洋蔥式寫法
▲欣傳媒會員頁面的其中一部分

3–3 SOL3. 用OBJ拷貝State

▲Object.assign
▲使用lodash _.cloneDeep

4. Context 處理資料流

何謂Context?

▲一層接一層的state傳遞
▲Context讓溝通無距離
▲感謝大家聆聽
▲Silicon Valley(圖片來源)

參考資料:

Web Develop X Investor X Traveller 經濟系畢業。誤打誤撞開始從事網頁開發,熱愛分享學習知識及生活啟發。 關於我:https://chun-wei.com 聯絡信箱:jinwei@chun-wei.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store