iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 0 留言 397 瀏覽

鐵人賽 Modern Web DAY 28

從比入門再往前一點開始，一直到深入React.js 系列第 28 篇

技術【Day.28】React進階 - 導入Redux，讓元件溝通更簡潔

當專案中的階層變複雜，state和props變的很多，資料在多層component之間的傳遞也越來越多。產生了一堆純粹用來傳遞用的props和父componen...

Andy Chang ‧ 2020-10-13

2 Like 0 留言 275 瀏覽

鐵人賽 Modern Web DAY 27

從比入門再往前一點開始，一直到深入React.js 系列第 27 篇

技術【Day.27】React進階 - 用useReducer定義state的更動原則

通常當我們要設定state時，都是透過setState(要指定的值)。但這樣做有兩個問題: 使用setState的元件可以任意指定值給state 當stat...

Andy Chang ‧ 2020-10-12

1 Like 0 留言 267 瀏覽

鐵人賽 Modern Web DAY 26

從比入門再往前一點開始，一直到深入React.js 系列第 26 篇

技術【Day.26】React進階 - useEffect v.s useLayoutEffect

如果你在撰寫React專案時，有試著在第一次渲染後，透過useEffect以state修改綁定給元件的資料，應該會發現一個特殊的現象: 嗯?為甚麼我的元件會閃...

Andy Chang ‧ 2020-10-11

1 Like 0 留言 263 瀏覽

鐵人賽 Modern Web DAY 25

從比入門再往前一點開始，一直到深入React.js 系列第 25 篇

技術【Day.25】React進階 - Custom hook | 把React component API模組化吧!

在一開始介紹React的時候，我們曾經說過以前React有個問題: 當要使用React的特有功能時，大部份的時候都要做一個元件出來。但有的時候我們並不是要創造...

Andy Chang ‧ 2020-10-10

1 Like 0 留言 286 瀏覽

鐵人賽 Modern Web DAY 22

從比入門再往前一點開始，一直到深入React.js 系列第 22 篇

技術【Day.22】React效能 - 如何處理useContext的效能問題

前面我們提過，Context api雖然方便，但是每一次context更新時都會迫使「有使用useContext取得該context」的元件更新。這在專案有規模...

Andy Chang ‧ 2020-10-07

1 Like 0 留言 198 瀏覽

鐵人賽 Modern Web DAY 21

從比入門再往前一點開始，一直到深入React.js 系列第 21 篇

技術【Day.21】React效能 - 用useMemo避免函式非必要的執行

但是有的時候我們只負責製作元件，並沒有辦法確認使用這個元件的人是不是在函式定義域內加工元件，這個時候該怎麼辦才能確保這個問題呢? 在Day.19，我們以元件...

Andy Chang ‧ 2020-10-06

1 Like 0 留言 229 瀏覽

鐵人賽 Modern Web DAY 20

從比入門再往前一點開始，一直到深入React.js 系列第 20 篇

技術【Day.20】React效能 - 用useCallback避免函式的重新定義

在前面，我們說在非必要的時候，不要在React function component內宣告函式。那什麼時候是「必要的時候」呢 ? 當我們有需要綁定和state...

Andy Chang ‧ 2020-10-05

1 Like 0 留言 256 瀏覽

鐵人賽 Modern Web DAY 19

從比入門再往前一點開始，一直到深入React.js 系列第 19 篇

技術【Day.19】React效能 - 用memo避免不必要的重複渲染

這一篇要討論的是function component的效能問題在上一篇中，我們發現即使MenuItem接收的props並沒有被改變，MenuItem的re...

Andy Chang ‧ 2020-10-04

2 Like 0 留言 198 瀏覽

鐵人賽 Modern Web DAY 18

從比入門再往前一點開始，一直到深入React.js 系列第 18 篇

技術【Day.18】開發者工具React Dev tool與useContext的效能問題

由於我們在執行React程式前，都要透過webpack和Babel打包編譯成瀏覽器看的懂的ES5，實際跑在瀏覽器的程式碼就會和本來React裡面長的樣子差很多，...

Andy Chang ‧ 2020-10-03

1 Like 0 留言 328 瀏覽

鐵人賽 Modern Web DAY 17

從比入門再往前一點開始，一直到深入React.js 系列第 17 篇

技術【Day.17】React入門 - 利用useContext進行多層component溝通

我們完成了分頁，完成了用React製作的一個Menu和MenuItem，看似一切都大功告成了。然而不幸的是，這個時候客戶打來了一通電話: 欸!我想讓Menu...

Andy Chang ‧ 2020-10-02

1 Like 0 留言 453 瀏覽

鐵人賽 Modern Web DAY 15

從比入門再往前一點開始，一直到深入React.js 系列第 15 篇

技術【Day.15】React入門 - 非控制組件與useRef

reference，中文翻譯是「參考」。聽起來好像有點奇怪，但他在程式中一般是指「變數指向的記憶體位置上對應到的值」。超級複雜的啦。簡單來說可以想像成是...

Andy Chang ‧ 2020-09-30

1 Like 0 留言 407 瀏覽

鐵人賽 Modern Web DAY 13

從比入門再往前一點開始，一直到深入React.js 系列第 13 篇

技術【Day.13】React入門 - useEffect(生命週期)

在前面的文章中，我們曾經說過這句話: ...如果有仔細看剛剛範例中的程式碼，你會發現Menu開關的功能並沒有被加進去。這是因為在React元件中，以內部控制元...

Andy Chang ‧ 2020-09-28

1 Like 0 留言 397 瀏覽

鐵人賽 Modern Web DAY 12

從比入門再往前一點開始，一直到深入React.js 系列第 12 篇

技術【Day.12】React入門 - useState與解構賦值後的props

還記得在Day.04我們實作的觀察者模式嗎? 由於這種「當某個JS變數改變時，有很多DOM元素需要被改變」的功能很常被使用，React將其拉了出來做成獨立的AP...

Andy Chang ‧ 2020-09-27

0 Like 0 留言 425 瀏覽

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

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

Stein 斯坦 ‧ 2020-05-22

0 Like 0 留言 904 瀏覽

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

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

Andy Chang ‧ 2020-05-07

2 Like 0 留言 2142 瀏覽

鐵人賽 Modern Web DAY 28

從 Hooks 開始，讓你的網頁 React 起來系列第 28 篇

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

感謝 iT 邦幫忙與博碩文化，本系列文章已出版成書「從 Hooks 開始，讓你的網頁 React 起來」，首刷版稅將全額贊助 iT 邦幫忙鐵人賽，歡迎前往購書...

pjchender ‧ 2019-10-14 ‧團隊Wow Doge!

2 Like 0 留言 3024 瀏覽

鐵人賽 Modern Web DAY 27

從 Hooks 開始，讓你的網頁 React 起來系列第 27 篇

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

感謝 iT 邦幫忙與博碩文化，本系列文章已出版成書「從 Hooks 開始，讓你的網頁 React 起來」，首刷版稅將全額贊助 iT 邦幫忙鐵人賽，歡迎前往購書...

pjchender ‧ 2019-10-13 ‧團隊Wow Doge!

2 Like 1 留言 1904 瀏覽

鐵人賽 Modern Web DAY 25

從 Hooks 開始，讓你的網頁 React 起來系列第 25 篇

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

感謝 iT 邦幫忙與博碩文化，本系列文章已出版成書「從 Hooks 開始，讓你的網頁 React 起來」，首刷版稅將全額贊助 iT 邦幫忙鐵人賽，歡迎前往購書...

pjchender ‧ 2019-10-11 ‧團隊Wow Doge!

3 Like 0 留言 2048 瀏覽

鐵人賽 Modern Web DAY 24

從 Hooks 開始，讓你的網頁 React 起來系列第 24 篇

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

感謝 iT 邦幫忙與博碩文化，本系列文章已出版成書「從 Hooks 開始，讓你的網頁 React 起來」，首刷版稅將全額贊助 iT 邦幫忙鐵人賽，歡迎前往購書...

pjchender ‧ 2019-10-10 ‧團隊Wow Doge!

2 Like 0 留言 1708 瀏覽

鐵人賽 Modern Web DAY 23

從 Hooks 開始，讓你的網頁 React 起來系列第 23 篇

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

感謝 iT 邦幫忙與博碩文化，本系列文章已出版成書「從 Hooks 開始，讓你的網頁 React 起來」，首刷版稅將全額贊助 iT 邦幫忙鐵人賽，歡迎前往購書...

pjchender ‧ 2019-10-09 ‧團隊Wow Doge!

2 Like 1 留言 1990 瀏覽

鐵人賽 Modern Web DAY 22

從 Hooks 開始，讓你的網頁 React 起來系列第 22 篇

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

感謝 iT 邦幫忙與博碩文化，本系列文章已出版成書「從 Hooks 開始，讓你的網頁 React 起來」，首刷版稅將全額贊助 iT 邦幫忙鐵人賽，歡迎前往購書...

pjchender ‧ 2019-10-08 ‧團隊Wow Doge!

4 Like 1 留言 3079 瀏覽

鐵人賽 Modern Web DAY 21

從 Hooks 開始，讓你的網頁 React 起來系列第 21 篇

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

感謝 iT 邦幫忙與博碩文化，本系列文章已出版成書「從 Hooks 開始，讓你的網頁 React 起來」，首刷版稅將全額贊助 iT 邦幫忙鐵人賽，歡迎前往購書...

pjchender ‧ 2019-10-07 ‧團隊Wow Doge!

5 Like 0 留言 6099 瀏覽

鐵人賽 Modern Web DAY 20

從 Hooks 開始，讓你的網頁 React 起來系列第 20 篇

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

感謝 iT 邦幫忙與博碩文化，本系列文章已出版成書「從 Hooks 開始，讓你的網頁 React 起來」，首刷版稅將全額贊助 iT 邦幫忙鐵人賽，歡迎前往購書...

pjchender ‧ 2019-10-06 ‧團隊Wow Doge!

1 Like 0 留言 1594 瀏覽

鐵人賽 Modern Web DAY 25

給初入JS框架新手的React.js入門系列第 25 篇

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

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

Andy Chang ‧ 2019-10-06

3 Like 0 留言 4046 瀏覽

鐵人賽 Modern Web DAY 19

從 Hooks 開始，讓你的網頁 React 起來系列第 19 篇

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

感謝 iT 邦幫忙與博碩文化，本系列文章已出版成書「從 Hooks 開始，讓你的網頁 React 起來」，首刷版稅將全額贊助 iT 邦幫忙鐵人賽，歡迎前往購書...

pjchender ‧ 2019-10-05 ‧團隊Wow Doge!

1 Like 0 留言 2479 瀏覽

鐵人賽 Modern Web DAY 24

給初入JS框架新手的React.js入門系列第 24 篇

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

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

Andy Chang ‧ 2019-10-05

3 Like 1 留言 5660 瀏覽

鐵人賽 Modern Web DAY 18

從 Hooks 開始，讓你的網頁 React 起來系列第 18 篇

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

感謝 iT 邦幫忙與博碩文化，本系列文章已出版成書「從 Hooks 開始，讓你的網頁 React 起來」，首刷版稅將全額贊助 iT 邦幫忙鐵人賽，歡迎前往購書...

pjchender ‧ 2019-10-04 ‧團隊Wow Doge!

1 Like 0 留言 1432 瀏覽

鐵人賽 Modern Web DAY 23

給初入JS框架新手的React.js入門系列第 23 篇

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

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

Andy Chang ‧ 2019-10-04

7 Like 1 留言 4969 瀏覽

鐵人賽 Modern Web DAY 17

從 Hooks 開始，讓你的網頁 React 起來系列第 17 篇

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

感謝 iT 邦幫忙與博碩文化，本系列文章已出版成書「從 Hooks 開始，讓你的網頁 React 起來」，首刷版稅將全額贊助 iT 邦幫忙鐵人賽，歡迎前往購書...

pjchender ‧ 2019-10-03 ‧團隊Wow Doge!

4 Like 1 留言 3496 瀏覽

鐵人賽 Modern Web DAY 16

從 Hooks 開始，讓你的網頁 React 起來系列第 16 篇

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

感謝 iT 邦幫忙與博碩文化，本系列文章已出版成書「從 Hooks 開始，讓你的網頁 React 起來」，首刷版稅將全額贊助 iT 邦幫忙鐵人賽，歡迎前往購書...

pjchender ‧ 2019-10-02 ‧團隊Wow Doge!

技術 【Day.28】React進階 - 導入Redux，讓元件溝通更簡潔

技術 【Day.27】React進階 - 用useReducer定義state的更動原則

技術 【Day.26】React進階 - useEffect v.s useLayoutEffect

技術 【Day.25】React進階 - Custom hook | 把React component API模組化吧!

技術 【Day.22】React效能 - 如何處理useContext的效能問題

技術 【Day.21】React效能 - 用useMemo避免函式非必要的執行

技術 【Day.20】React效能 - 用useCallback避免函式的重新定義

技術 【Day.19】React效能 - 用memo避免不必要的重複渲染

技術 【Day.18】開發者工具React Dev tool與useContext的效能問題

技術 【Day.17】React入門 - 利用useContext進行多層component溝通

技術 【Day.15】React入門 - 非控制組件與useRef

技術 【Day.13】React入門 - useEffect(生命週期)

技術 【Day.12】React入門 - useState與解構賦值後的props

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

At

技術【Day.28】React進階 - 導入Redux，讓元件溝通更簡潔

技術【Day.27】React進階 - 用useReducer定義state的更動原則

技術【Day.26】React進階 - useEffect v.s useLayoutEffect

技術【Day.25】React進階 - Custom hook | 把React component API模組化吧!

技術【Day.22】React效能 - 如何處理useContext的效能問題

技術【Day.21】React效能 - 用useMemo避免函式非必要的執行

技術【Day.20】React效能 - 用useCallback避免函式的重新定義

技術【Day.19】React效能 - 用memo避免不必要的重複渲染

技術【Day.18】開發者工具React Dev tool與useContext的效能問題

技術【Day.17】React入門 - 利用useContext進行多層component溝通

技術【Day.15】React入門 - 非控制組件與useRef

技術【Day.13】React入門 - useEffect(生命週期)

技術【Day.12】React入門 - useState與解構賦值後的props

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

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

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

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

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