iT邦幫忙

鐵人檔案

第 11 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

從 Hooks 開始,讓你的網頁 React 起來 系列

過去 React 的學習途徑不外乎從 class 開始,透過 class 語法建立一個又一個的 component,然而在 React Hooks 的加持之下,Modern React Web App 有了不一樣的氣象,對於新入手的開發者來說,可以從最熟悉的 function 開始學起 React;對於熟悉 React 的開發者而言,則可以練習不受舊有思維的影響,感受 Hooks 帶來的簡潔與便利性。

現在,不論你是有經驗的 React 開發者,或是初入前端想要開始學習接觸前端框架的有志之士,就讓我們從 Hooks 開始,讓你的網頁 React 起來吧!

鐵人鍊成 | 共 30 篇文章 | 202 人訂閱 訂閱系列文 RSS系列文 團隊Wow Doge!
DAY 21

[Day 21 - 即時天氣] 處理天氣圖示以及 useMemo 的使用

昨天學到了 useCallback 能讓 React 組件內所定義的函式在 dependencies 不變的情況被「保存」下來,如此便可以把希望被覆用的函式放到...

2019-10-07 ‧ 由 pjchender 分享
DAY 22

[Day 22 - 即時天氣] 讓白天和晚上使用不同天氣圖示

keywords: useMemo 昨天終於處理掉了即時天氣 App 中最軟的那塊,也就是天氣圖示的部分,就再鬆了一口氣的時候,腦中突然浮出公司設計師發出的聲音...

2019-10-08 ‧ 由 pjchender 分享
DAY 23

[Day 23 - 即時天氣] 實作資料載入中的提示狀態

keywords: useState, css-in-js, Emotion.js 昨天下班前,公司的設計師看了終於表示滿意:「沒錯,白天就是要是用太陽,晚上就...

2019-10-09 ‧ 由 pjchender 分享
DAY 24

[Day 24 - 即時天氣] 跟風一下,在 React 中透過 Emotion 實作深色主題!

keywords: useState, Emotion, theme, emotion-theming 昨天在設計師的誠心建議之下,我們加入了「載入中」的狀態,...

2019-10-10 ‧ 由 pjchender 分享
DAY 25

[Day 25 - 即時天氣] 自己的鉤子自己做 - 建立 Custom Hook

keywords: Custom Hook 不知道這幾天在修改即時天氣 App 時,特別針對 WeatherApp.js 這支檔案,你有沒有覺得內容好像多到找個...

2019-10-11 ‧ 由 pjchender 分享
DAY 26

[Day 26 - 即時天氣] 切換顯示不同頁面 - 子層組件修改父層組件資料狀態的方式

今天設計師又氣噗噗的打電話來,跟我說這幾天她回家參加朋友婚禮,想說來看一下天氣資訊,沒想到即時天氣 App 的地點卻仍停留在「台北」,竟然找不到切換地點的地方,...

2019-10-12 ‧ 由 pjchender 分享
DAY 27

[Day 27 - 即時天氣] React 中的表單處理(Controlled vs Uncontrolled)以及 useRef 的使用

keywords: useRef, controlled components, uncontrolled components, form 昨天已經建立好了天...

2019-10-13 ‧ 由 pjchender 分享
DAY 28

[Day 28 - 即時天氣] 保存與更新使用者設定的地區資訊 - localStorage 與 useEffect 的搭配使用

useEffect, localStorage 昨天完成了讓使用者設定地區的表單頁面後,今天就讓我們來實作設定地區這個功能。最終的目標是當使用者按下儲存後,根據...

2019-10-14 ‧ 由 pjchender 分享
DAY 29

[Day 29 - 即時天氣] 寫網頁就是要炫耀啊,不然要幹麻?發布上 Github Pages 吧!

keywords: create-react-app, github pages, progressive web app, PWA, deployment 昨...

2019-10-15 ‧ 由 pjchender 分享
DAY 30

[Day 30 - 臺灣好天氣] 發布上 Github Pages 不夠,還要變成手機 App!還有那些重要但故意先不告訴你的內容

昨天我們已經把「即時天氣 App」發佈到 Github Pages 上了並且正名為「臺灣好天氣」。 但是這類型的天氣 App 如果可以安裝到手機上的話有多好呢?...

2019-10-16 ‧ 由 pjchender 分享