Node.js 串接 MongoDB 會在下一篇教學，滿意的朋友請記得關注，未來預計每週2篇技術文章 國外朋友常提到網頁工程師必備 MERN，那MERN究竟...
接續自己的文章 【React.js入門 - 21】 各階層Component的溝通 在React中常常會遇到需要在多層component的之間溝通的情形。在沒有...
useEffect, localStorage 昨天完成了讓使用者設定地區的表單頁面後，今天就讓我們來實作設定地區這個功能。最終的目標是當使用者按下儲存後，根據...
keywords: useRef, controlled components, uncontrolled components, form 昨天已經建立好了天...
keywords: Custom Hook 不知道這幾天在修改即時天氣 App 時，特別針對 WeatherApp.js 這支檔案，你有沒有覺得內容好像多到找個...
keywords: useState, Emotion, theme, emotion-theming 昨天在設計師的誠心建議之下，我們加入了「載入中」的狀態，...
keywords: useState, css-in-js, Emotion.js 昨天下班前，公司的設計師看了終於表示滿意：「沒錯，白天就是要是用太陽，晚上就...
keywords: useMemo 昨天終於處理掉了即時天氣 App 中最軟的那塊，也就是天氣圖示的部分，就再鬆了一口氣的時候，腦中突然浮出公司設計師發出的聲音...
昨天學到了 useCallback 能讓 React 組件內所定義的函式在 dependencies 不變的情況被「保存」下來，如此便可以把希望被覆用的函式放到...
keywords: useEffect, useCallback 在昨天的內容中，我們透過 async function 搭配 Promise.all 的使用，...
在React.js專案中，「監控瀏覽器長寬」是很常寫到的功能，我們來試著用React hook實現，並以Custom hook把這個功能模組化。 這一篇主要是給...
昨天的我們已經可以專案中同時呼叫兩道不同的 API 來取得我們需要的資料，眼尖的朋友可能會發現，當我們試圖更新一次資料時，實際上 React 組件實際上被呼叫了...
(標題致敬JSDC工作坊的主題XD) 前面在講為什麼今年這麼多人推薦React hook時，我只有提說它讓簡單的元件可以不用class component的方式...
到目前為止我們的即時天氣 App 已經可以在載入時自動拉取資料，也可以在使用者點選「重新整理」時重新拉取資料，但是所需的資料還不完整，其中還沒有取得「天氣描述」...
在這篇，我們要以function component製作和【React.js入門 - 22】 元件練習(上) - 在class利用遞迴+state實作動畫相同的...
昨天我們已經可以透過讓使用者點擊按鈕後來更新天氣資訊，今天就讓我們來看看怎麼樣可以在使用者一載入頁面的時候，就去取得最新的資料回來顯示。 要一載入頁面時就去執行...
昨天完成了整個即時天氣 App 的畫面後，現在我們就可以開始來串接資料了。首先從我們的版面來看，目前會需要的資料包括「城市名稱」、「天氣描述」、「當時溫度」、「...
花了那麼多時間講生命週期，那麼function component的生命週期也是直接宣告componentDidMount那些嗎? 呃，不是。跟state一...
現在我們已經用 React 完成了兩個簡單的網頁程式，分別是計數器和網速單位轉換器。你會漸漸感受到每個 React 組件內部都可以保有自己的資料狀態，以帶有多個...
昨天的網速單位轉換器仍然還是半成品，因為 <CardFooter /> 組件的樣式雖然可以透過我們手動修改 inputValue 的值而有變化，但...
昨天我們已經把版哥提供的網速轉換器 HTML 樣板，搬移到 JavaScript 中改成在 React 中用 JSX 來呈現，但是還沒加上任何實際的功能。 今天...
看了好多天的計數器，今天將讓我們換個主題吧！在開始之前，先來討論一下什麼是網速吧！ Mbps 是用來計算網路頻寬最常見的單位，自從大家升級到 4G 的行動網路...
今天會學到的內容 將事件處理器建立成實名函數 在事件處理器中帶入參數 透過 JSX 重複渲染某一的組件 ⚠️ 警告：密集恐懼症者慎入本篇內容。如果你連 i...
我也想要在function component中使用state，可是function不能夠用extend繼承，怎麼辦? 在以前，你就只能乖乖的用class...
假設現在我們想要幫計數器設定最大值和最小值，其中計數器最大只能到 10，最小只能到 0 ，而且預設起始值是 5 的話，可以怎麼做呢？ 其中一種做法是當數字 &g...
今天要介紹另一個 hooks - useReducer。 光看第一行有些讀者可能就會有一些疑問了，udeReducer？看起來跟 redux 的 reducer...
昨天我們已經把計數器的 HTML 放到 JavaScript 中，並且用 JSX 的方式來呈現，但是目前只有畫面還沒有實際的功能。今天我們將會使用第一個 Rea...
在 Day 4 - 把 HTML 寫在 JavaScript 中有什麼好處？ 中，已經知道怎麼把 HTML 放入 JSX 中呈現出來，今天我們要把 Day 03...
本日關鍵字：ReactDOM.render()、JSX 昨天我們完成了一個簡單的計時器頁面，感覺用原生的 JavaScript 來寫計數器並不會太過複雜，我們只...
pjchender
Andy Chang
老莫 Kyle