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 篇文章 | 201 人訂閱 訂閱系列文 RSS系列文 團隊Wow Doge!
DAY 11

[Day 11 - 網速轉換器] 那個...資料可以分享給我嗎 - 將資料傳入組件

昨天的網速單位轉換器仍然還是半成品,因為 <CardFooter /> 組件的樣式雖然可以透過我們手動修改 inputValue 的值而有變化,但...

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

[Day 12] 快速了解各組件的資料狀態 - React DevTools

現在我們已經用 React 完成了兩個簡單的網頁程式,分別是計數器和網速單位轉換器。你會漸漸感受到每個 React 組件內部都可以保有自己的資料狀態,以帶有多個...

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

[Day 13 - 即時天氣] 建立一個即時天氣 App - 前置準備

到目前為止鐵人賽已經接近一半,前面我們提到了在 React 中一定會使用到的 JavaScript 語法、JSX 的建立、條件渲染和迴圈在 JSX 中的使用、談...

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

[Day 14 - 即時天氣] 把 CSS 寫在 JavaScript 中!? - CSS in JS 的使用

[Day 14 - 即時天氣] 把 CSS 寫在 JavaScript 中!? - CSS in JS 的使用 傳統的網頁開發上,我們會把所有的 CSS 樣式寫...

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

[Day 15 - 即時天氣] 就是這個畫面 - 使用 Emotion 為組件增添 CSS 樣式

老實說這幾天在寫鐵人賽時,發現花最多時間的常常是在找自己喜歡的設計畫面,因為喜歡好看的作品,但卻又不會設計,同時也不想要只是用簡陋的畫面說明程式語法...。好吧...

2019-10-01 ‧ 由 pjchender 分享
DAY 16

[Day 16 - 即時天氣] 定義並請求組件會使用到的資料 - useState 的更多使用

昨天完成了整個即時天氣 App 的畫面後,現在我們就可以開始來串接資料了。首先從我們的版面來看,目前會需要的資料包括「城市名稱」、「天氣描述」、「當時溫度」、「...

2019-10-02 ‧ 由 pjchender 分享
DAY 17

[Day 17 - 即時天氣] 頁面載入時就去請求資料 - useEffect 的基本使用

昨天我們已經可以透過讓使用者點擊按鈕後來更新天氣資訊,今天就讓我們來看看怎麼樣可以在使用者一載入頁面的時候,就去取得最新的資料回來顯示。 要一載入頁面時就去執行...

2019-10-03 ‧ 由 pjchender 分享
DAY 18

[Day 18 - 即時天氣] 拉取並呈現來自多道 API 的資料

到目前為止我們的即時天氣 App 已經可以在載入時自動拉取資料,也可以在使用者點選「重新整理」時重新拉取資料,但是所需的資料還不完整,其中還沒有取得「天氣描述」...

2019-10-04 ‧ 由 pjchender 分享
DAY 19

[Day 19 - 即時天氣] 在 useEffect 中定義並使用 async 函式

昨天的我們已經可以專案中同時呼叫兩道不同的 API 來取得我們需要的資料,眼尖的朋友可能會發現,當我們試圖更新一次資料時,實際上 React 組件實際上被呼叫了...

2019-10-05 ‧ 由 pjchender 分享
DAY 20

[Day 20 - 即時天氣] 在 useEffect 中使用呼叫需被覆用的函式 - useCallback 的使用

keywords: useEffect, useCallback 在昨天的內容中,我們透過 async function 搭配 Promise.all 的使用,...

2019-10-06 ‧ 由 pjchender 分享