iT邦幫忙

react-hooks相關文章
共有 29 則文章

技術 斯坦的實戰學院 MongoDB, Express, React, Node.js (MERN) - MongoDB建置

Node.js 串接 MongoDB 會在下一篇教學,滿意的朋友請記得關注,未來預計每週2篇技術文章 國外朋友常提到網頁工程師必備 MERN,那MERN究竟...

技術 【React.js 筆記】- 使用useContext和useReducer進行多層子父元件溝通

接續自己的文章 【React.js入門 - 21】 各階層Component的溝通 在React中常常會遇到需要在多層component的之間溝通的情形。在沒有...

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 25

技術 【React.js入門 - 25】 監控瀏覽器長寬 - 以React hook實現

在React.js專案中,「監控瀏覽器長寬」是很常寫到的功能,我們來試著用React hook實現,並以Custom hook把這個功能模組化。 這一篇主要是給...

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 24

技術 【React.js入門 - 24】 Custom hook - 給我另一個超推React hook的理由

(標題致敬JSDC工作坊的主題XD) 前面在講為什麼今年這麼多人推薦React hook時,我只有提說它讓簡單的元件可以不用class component的方式...

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 23

技術 【React.js入門 - 23】 元件練習(下) - 在function利用useEffect遞迴+useState實作動畫

在這篇,我們要以function component製作和【React.js入門 - 22】 元件練習(上) - 在class利用遞迴+state實作動畫相同的...

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 Modern Web DAY 20

技術 【React.js入門 - 20】 useEffect - 在function component用生命週期

花了那麼多時間講生命週期,那麼function component的生命週期也是直接宣告componentDidMount那些嗎? 呃,不是。跟state一...

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 10

技術 [Day 10 - 網速換算器] 換算起來吧 - 資料綁定與組件拆分

昨天我們已經把版哥提供的網速轉換器 HTML 樣板,搬移到 JavaScript 中改成在 React 中用 JSX 來呈現,但是還沒加上任何實際的功能。 今天...

鐵人賽 Modern Web DAY 9

技術 [Day 09 - 網速換算器] 網速傻傻分不清楚 Mbps? Mb/s? 來寫個單位換算器吧

看了好多天的計數器,今天將讓我們換個主題吧!在開始之前,先來討論一下什麼是網速吧! Mbps 是用來計算網路頻寬最常見的單位,自從大家升級到 4G 的行動網路...

鐵人賽 Modern Web DAY 8

技術 [Day 08 - 計數器] 一個不夠,給我一次來十個 - JSX 中迴圈的使用

今天會學到的內容 將事件處理器建立成實名函數 在事件處理器中帶入參數 透過 JSX 重複渲染某一的組件 ⚠️ 警告:密集恐懼症者慎入本篇內容。如果你連 i...

鐵人賽 Modern Web DAY 13

技術 【React.js入門 - 13】 useState - 在function component用state

我也想要在function component中使用state,可是function不能夠用extend繼承,怎麼辦? 在以前,你就只能乖乖的用class...

鐵人賽 Modern Web DAY 7

技術 [Day 07 - 計數器] 幫計數器設個最大最小值吧 - JSX 中條件渲染的使用

假設現在我們想要幫計數器設定最大值和最小值,其中計數器最大只能到 10,最小只能到 0 ,而且預設起始值是 5 的話,可以怎麼做呢? 其中一種做法是當數字 &g...

鐵人賽 Modern Web DAY 19

技術 【Day 19】可能不需要 redux - useReducer

今天要介紹另一個 hooks - useReducer。 光看第一行有些讀者可能就會有一些疑問了,udeReducer?看起來跟 redux 的 reducer...

鐵人賽 Modern Web DAY 6

技術 [Day 06 - 計數器] 醒醒啊!為什麼一動也不動 - useState 的基本使用

昨天我們已經把計數器的 HTML 放到 JavaScript 中,並且用 JSX 的方式來呈現,但是目前只有畫面還沒有實際的功能。今天我們將會使用第一個 Rea...

鐵人賽 Modern Web DAY 5

技術 [Day 05 - 計數器] 將計數器頁面改成用 JSX 來寫

在 Day 4 - 把 HTML 寫在 JavaScript 中有什麼好處? 中,已經知道怎麼把 HTML 放入 JSX 中呈現出來,今天我們要把 Day 03...

鐵人賽 Modern Web DAY 4

技術 [Day 04 - 計數器] 把 HTML 寫在 JavaScript 中!? - JSX 的使用

本日關鍵字:ReactDOM.render()、JSX 昨天我們完成了一個簡單的計時器頁面,感覺用原生的 JavaScript 來寫計數器並不會太過複雜,我們只...