iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
影片教學

150 分鐘學 React 系列

這陣子工作之餘一直在學習 React ,所以一方面希望透過參賽強迫自己輸出,另一方面也因為自己在學習時比較喜歡透過影片,所以也同樣想使用影片,幫助跟我有一樣學習習慣的人。
就跟我一起連續三十天、每天五分鐘,朝向了解 React 之路前進吧!(不過預錄到目前為止,每天都離五分鐘有點小差距,究竟最後會不會變成 300 分鐘學 React 呢?就讓我們拭目以待...)

參賽天數 11 天 | 共 31 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文
DAY 11

第 10 天 [ Lifecycle 和 Class Component ]

今天的重點摘錄 元件像人一樣有生有死,而生命週期幫助我們能在「特定階段」,做「只有該階段會做的事情」 constructor :初始化與建構物件 render...

2022-09-24 ‧ 由 我是圈圈 分享
DAY 11

第 11 天 [ Lifecycle 和 useEffect ]

今天的重點摘錄 useEffect 含有兩個參數,第一個放要執行的箭頭函式,第二個放要監聽的值,會放在陣列當中 對應到 componentDidMount:第...

2022-09-26 ‧ 由 我是圈圈 分享
DAY 11

第 12 天 [ Hook ]

今天的重點摘錄 Hook 是 React 先寫好的東西,方便我們不用從頭造輪子、可以直接開發,之前提過的 useState useEffect 都是 Hook...

2022-09-26 ‧ 由 我是圈圈 分享
DAY 11

第 13 天 [ 建立 JSON Server 用 useEffect 模擬抓取、送出與刪除資料 ]

今天主要是練習實作,我在影片中使用的圖片來自 unsplash , json-server 這個套件的指令為: npx json-server --watch...

2022-09-27 ‧ 由 我是圈圈 分享
DAY 11

第 14 天 [ 客製化 Hook ]

今天的重點摘錄 重用 stateful 邏輯幫助我們能製作客製化 Hook 撰寫時記得思考,怎樣可以增加重用性?(例如使用通用性高的命名、把可能不一樣的東西抽...

2022-09-28 ‧ 由 我是圈圈 分享
DAY 11

第 15 天 [ React Router 、 HashRouter 與 BrowserRouter ]

今天的重點摘錄 使用 npm install react-router-dom@5 下載 React Router 架構為: BrowserRouter 是...

2022-09-29 ‧ 由 我是圈圈 分享
DAY 11

第 16 天 [ useParams 與動態路徑參數、 useHistory 與重新導向和 404 頁面 ]

今天的重點摘錄 useParams 這個 Hook 可幫助我們取得網址後面的 id ,藉此完成商品內頁 useHistory 這個 Hook 可幫助我們達到前...

2022-09-30 ‧ 由 我是圈圈 分享
DAY 11

第 17 天 [ 引入 CSS ( inline-style):使用與限制 ]

今天的重點摘錄 規則: 外層包大括號+大括號 屬性有 dash 的改小駝峰寫法 以數字或字串傳遞值 搭配三元運算子判斷條件,再套用樣式 樣式物件也能抽出單獨...

2022-10-01 ‧ 由 我是圈圈 分享
DAY 11

第 18 天 [ 引入 CSS (外部引入):使用與限制 ]

今天的重點摘錄 規則: 用習慣的方式撰寫 CSS 屬性不用改小駝峰寫法 可以實現 hover 、 media-query 在要用的元件 import ,並搭...

2022-10-02 ‧ 由 我是圈圈 分享
DAY 11

第 19 天 [ 引入 CSS ( Styled Components ):使用與限制 ]

今天的重點摘錄 安裝: npm install --save styled-components Emmet :下載 vscode-styled-compon...

2022-10-03 ‧ 由 我是圈圈 分享