Component 與 render function | Lidemy 鋰學院

自動播放
自動完成

上一個單元 Complete and Continue

[FE301] React 基礎（Class component 版）

課前須知

課前須知

先別急著學 React

先用 jQuery 來寫一個 todo list 吧！ (22:03)
把 todo list 給存起來 (18:01)
todo list 的問題在哪？ (4:59)
來寫一個不一樣的 todo list！ (9:09)
其實這就是 React (4:38)

React 環境建置

建置 React 環境 (1:10)
前置作業：webpack (6:38)
前置作業：babel (5:12)
把 React 加進來 (6:33)
webpack dev server (6:31)
另一個選擇：create react app (5:39)

React 基礎

Component 與 render function (5:29)
JSX 語法 (8:03)
React 的事件機制 (3:24)
state 與改變 state (17:57)
props 與 state (11:03)
Component 間的溝通 (8:55)
如何加上 CSS？ (8:32)

React 的生命週期

constructor 的作用 (11:33)
shouldComponentUpdate (11:55)
componentDidMount 與 componentWillUnmount (6:08)
componentDidUpdate (9:01)
其他生命週期 (5:09)

把 Todo list 改寫成 React

基本功能：新增、刪除、標記完成與 filter (23:17)
加上 localStorage (5:18)

初探 React 背後的運作方式

JSX 的真面目 (2:59)
React 的渲染機制與 Virtual DOM (4:57)
Pure component 與 Immutable data

React 實戰：Form 報名表單

先從刻介面開始 (5:58)
controlled 與 un-controlled 的差異 (13:08)
幫其他元件加上 state (21:08)
進階練習：表單驗證功能 (1:03)
進階練習：表單還沒 submit 就驗證 (0:55)
魔王練習：自動暫存內容 (1:20)

Job Board 職缺報報

一樣先從介面開始 (3:11)
開始實作功能 (5:51)
進階練習：加入 filter (1:20)
進階練習：加入關注清單 (0:53)
魔王練習：實作搜尋功能 (1:01)

Teach online with

Component 與 render function

Complete and Continue

Discussion

0 comments