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

1 Like 0 留言 159 瀏覽

鐵人賽 Modern Web DAY 28

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

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

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

Andy Chang ‧ 2020-10-13

2 Like 0 留言 139 瀏覽

鐵人賽 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 留言 104 瀏覽

鐵人賽 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 留言 135 瀏覽

鐵人賽 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 留言 117 瀏覽

鐵人賽 Modern Web DAY 22

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

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

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

Andy Chang ‧ 2020-10-07

1 Like 0 留言 87 瀏覽

鐵人賽 Modern Web DAY 21

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

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

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

Andy Chang ‧ 2020-10-06

1 Like 0 留言 109 瀏覽

鐵人賽 Modern Web DAY 20

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

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

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

Andy Chang ‧ 2020-10-05

1 Like 0 留言 120 瀏覽

鐵人賽 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 留言 97 瀏覽

鐵人賽 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 留言 188 瀏覽

鐵人賽 Modern Web DAY 17

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

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

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

Andy Chang ‧ 2020-10-02

1 Like 0 留言 207 瀏覽

鐵人賽 Modern Web DAY 15

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

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

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

Andy Chang ‧ 2020-09-30

0 Like 0 留言 77 瀏覽

鐵人賽 Modern Web DAY 14

用 react-spring 來寫 Web 前端動畫吧！～UI動畫、動態圖形～系列第 14 篇

技術 Day14 ー用 react-spring 做一個假 3D 電子鐘吧！

［假 3D 電子鐘］轉轉轉～！時間的顯示，也是 Web 前端常常會要處理到的事情之一，做時鐘對初心者來說也是一個很好的練習題材唷。那就 Demo...

Juri ‧ 2020-09-29

0 Like 0 留言 193 瀏覽

鐵人賽 Modern Web DAY 13

用 react-spring 來寫 Web 前端動畫吧！～UI動畫、動態圖形～系列第 13 篇

技術 Day13 ー用 react-spring 刻帶有 Blob 特效的 SVG 圓形進度條（Circular Progress Bar）吧！

［ SVG Circular Progress Bar ］帶有 Blob 特效的圓形進度條～而且是 SVG 動畫！是的，react-spring 也可以...

Juri ‧ 2020-09-28

1 Like 0 留言 211 瀏覽

鐵人賽 Modern Web DAY 13

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

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

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

Andy Chang ‧ 2020-09-28

0 Like 0 留言 178 瀏覽

鐵人賽 Modern Web DAY 12

用 react-spring 來寫 Web 前端動畫吧！～UI動畫、動態圖形～系列第 12 篇

技術 Day12 ー用 react-spring 漂亮的 Show 出商品吧！

［漂亮的 Show 出商品］不只商品，只要是需要大量展示在頁面上的東西都可以用的唷：Ｄ應用實作到現在，感覺其實最難的就是要構想動畫如何「演出」了～...

Juri ‧ 2020-09-27

1 Like 0 留言 217 瀏覽

鐵人賽 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 留言 159 瀏覽

鐵人賽 Modern Web DAY 11

用 react-spring 來寫 Web 前端動畫吧！～UI動畫、動態圖形～系列第 11 篇

技術 Day11 ー用 react-spring 做 Search Bar 吧！

［ Search Bar ］搜尋 Bar ～！ Search Bar 也是 Web 前端的必修課題之一呢！尤其是處理 RWD 時 Search Bar 要...

Juri ‧ 2020-09-26

0 Like 0 留言 165 瀏覽

鐵人賽 Modern Web DAY 10

用 react-spring 來寫 Web 前端動畫吧！～UI動畫、動態圖形～系列第 10 篇

技術 Day10 ー用 react-spring 做有趣的字母漸變吧！

［字母漸變］いろはにほへと、ちりぬるを～♪ 其實也不清楚這類特效的正式名稱或目的是什麼（?），或許單純讓人感覺很酷炫用的吧（欸＃） Demo Time...

Juri ‧ 2020-09-25

0 Like 0 留言 164 瀏覽

鐵人賽 Modern Web DAY 9

用 react-spring 來寫 Web 前端動畫吧！～UI動畫、動態圖形～系列第 9 篇

技術 Day09 ー用 react-spring 客製一個 Checkbox 吧！

［ Checkbox ］切手指打勾勾，騙人的話，要吞 1000 隻針～（不是這個打勾勾 ry 前兩天挑戰的 UI 都偏向放著讓動畫自己跑的類型，今天總算要...

Juri ‧ 2020-09-24

0 Like 0 留言 161 瀏覽

鐵人賽 Modern Web DAY 7

用 react-spring 來寫 Web 前端動畫吧！～UI動畫、動態圖形～系列第 7 篇

技術 Day07 ー用 react-spring 做一個 Gooey Loader 吧！

［ Gooey Loader ］黏黏球 Loader 終於進到了開始應用實作的階段了，就用 Loader 來打頭陣吧～！身為一個 Web 前端（Web F...

Juri ‧ 2020-09-22

0 Like 0 留言 160 瀏覽

鐵人賽 Modern Web DAY 6

用 react-spring 來寫 Web 前端動畫吧！～UI動畫、動態圖形～系列第 6 篇

技術 Day06 ー react-spring 的 Hooks API 其之 ⑤ ～useChain～

［本日 MVP：useChain ］讓一切的一切都串起來的關鍵人物～！（？）就如同它的名稱一樣，這是一個可以將前面幾天介紹過的不同種類的 Hook 鍊...

Juri ‧ 2020-09-21

0 Like 0 留言 168 瀏覽

鐵人賽 Modern Web DAY 5

用 react-spring 來寫 Web 前端動畫吧！～UI動畫、動態圖形～系列第 5 篇

技術 Day05 ー react-spring 的 Hooks API 其之 ④ ～useTransition～

［本日巨星：useTransition ］ Component 切換（Mount、Unmount）時用的 Hook，也可以在 Component Updat...

Juri ‧ 2020-09-20

0 Like 0 留言 173 瀏覽

鐵人賽 Modern Web DAY 4

用 react-spring 來寫 Web 前端動畫吧！～UI動畫、動態圖形～系列第 4 篇

技術 Day04 ー react-spring 的 Hooks API 其之 ③ ～useTrail～

［本日嘉賓：useTrail ］這邊的 Trial 是「蹤跡」的意思唷～！不是指小徑。想要元素們依序跟隨前一個元素做一樣的動作，就是要用這個 Hook...

Juri ‧ 2020-09-19

0 Like 0 留言 183 瀏覽

鐵人賽 Modern Web DAY 3

用 react-spring 來寫 Web 前端動畫吧！～UI動畫、動態圖形～系列第 3 篇

技術 Day03 ー react-spring 的 Hooks API 其之 ② ～useSprings～

［今天要介紹的是：useSprings ］啊怎麼好像跟昨天一樣！（不不不，今天這個是詞尾有加 s 的，昨天的迷 U）當我們有好幾個不同的元素（例如 l...

Juri ‧ 2020-09-18

0 Like 0 留言 180 瀏覽

鐵人賽 Modern Web DAY 2

用 react-spring 來寫 Web 前端動畫吧！～UI動畫、動態圖形～系列第 2 篇

技術 Day02 ー react-spring 的 Hooks API 其之 ① ～useSpring～

［本日的主角：useSpring ］最基本款的 Hook，通常若沒什麼特別需求，選用這個就可以了好的～！我不會鋪陳（也不知道要鋪陳什麼 ry），use...

Juri ‧ 2020-09-17

0 Like 0 留言 242 瀏覽

鐵人賽 Modern Web DAY 1

用 react-spring 來寫 Web 前端動畫吧！～UI動畫、動態圖形～系列第 1 篇

技術 Day01 ー react-spring 是什麼？～開場、目錄～

［首先，簡單自介 & 開場 (灬ºωº灬) ］由於自己的經歷跟別人很不一樣，覺得有必要自介一下這樣～淡水某私立大學日文系畢業，女生。日文程度...

Juri ‧ 2020-09-16

0 Like 0 留言 364 瀏覽

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

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

Stein 斯坦 ‧ 2020-05-22

0 Like 0 留言 609 瀏覽

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

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

Andy Chang ‧ 2020-05-07

2 Like 0 留言 1654 瀏覽

鐵人賽 Modern Web DAY 28

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

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

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

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

2 Like 0 留言 2064 瀏覽

鐵人賽 Modern Web DAY 27

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

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

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

pjchender ‧ 2019-10-13 ‧團隊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

技術 Day14 ー 用 react-spring 做一個假 3D 電子鐘吧！

技術 Day13 ー 用 react-spring 刻帶有 Blob 特效的 SVG 圓形進度條（Circular Progress Bar）吧！

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

技術 Day12 ー 用 react-spring 漂亮的 Show 出商品吧！

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

技術 Day11 ー 用 react-spring 做 Search Bar 吧！

技術 Day10 ー 用 react-spring 做有趣的字母漸變吧！

技術 Day09 ー 用 react-spring 客製一個 Checkbox 吧！

技術 Day07 ー 用 react-spring 做一個 Gooey Loader 吧！