前面我們提過，Context api雖然方便，但是每一次context更新時都會迫使「有使用useContext取得該context」的元件更新。這在專案有規模...
昨天我們將 React 套件導入了專案中，並且完成了一頁完整網頁的結構。今天我們要嘗試將這個結構模組化，並且利用 React Router 來進行前端網頁的路...
在前面我們說，過去使用原生JS編寫有規模的專案時，因為要模組化，檔案越分越多，最後零散在各處。為了解決這個問題，後來工程師使用打包工具，把所有的JS檔綁成一個b...
React安裝環境 Visual Studio Code 安裝位置：https://visualstudio.microsoft.com/zh-hant/dow...
從這篇開始，程式碼的目錄結構會有很大的變化，在這之前我們都把 SSR 與我們自己的 blog 的程式碼混在一起，但這系列是要做出一個通用的 SSG ，所以之後會...
昨日基本上我們已經完成了大致的 Online Judge 系統，剩下基本上就是看你打算要怎麼設計你的 Online Judge 系統來決定該怎麼打造你前端網頁...
1.開新的檔案(npx是npm 5.2所附帶的套件執行器) npx create-react-app my-app 2.進入到目錄 cd my-app 3....
寫了多年的 js ，遇到不熟悉的使用情境大家肯定會先 console.log 一下 曾經在 onChange event handler 中印過 event 是...
本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。 接...
如果元件內有牽涉 HTTP requests ，我們通常需要在測試中 mock 它們。今天將學習如何測試元件的時候 mock 這些 HTTP requests。...
先來看一段簡單的 code <form onSubmit={handleSubmit}> ... <button onClick={h...
我想說的是 組件傳遞資料並不是只能傳遞數值，函式也可以傳遞 子組件不能直接操作父組件的資料，要通過父組件傳來的函數去變更父組件的資料 上一篇中我們把按摩服務...
React 條件 render 使用情境 在撰寫前端頁面時，常常需要根據不同的 props / state 資料顯示不同的 element。 舉例來說，使用者尚...
我想說的是 組件拆分的方法 在前面幾篇中，其實已經寫好了一個基本的按摩服務列表 但是從頭到尾只使用了一個組件 在小型專案中也許可以這麼做，但隨著專案大小 勢...
今天接續昨天繼續分享第一次貢獻開源專案的心得。 第二步：閱讀 CONTRIBUTING.md & 開發 通常一個完整的開源專案，都會提供一個文檔讓想貢獻...
JAVA SCRIPT 是不能接受變數中有html標籤如之類的。 而這個可以接受html標籤的功能叫JSX，就是可以將一般的內容加上HTML的標籤使用。 而這個...
鐵人賽剩下 5 天，接下來我想聚焦在一些經驗分享，畢竟除了學習技術以外，適時的採取一些實際行動更能夠快速吸收所學知識與進步。 身為軟體工程師， Github 自...
如果你在撰寫React專案時，有試著在第一次渲染後，透過useEffect以state修改綁定給元件的資料，應該會發現一個特殊的現象: 嗯?為甚麼我的元件會閃...
這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...
回顧 state 在上個章節中了解了 state 的概念，就讓我們來重新重溫一下。 State 代表 React component 的狀態，會是一個完全由創建...
這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...
本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。 編...
在前面，我們說在非必要的時候，不要在React function component內宣告函式。 那什麼時候是「必要的時候」呢 ? 當我們有需要綁定和state...
回顧 key 在上一篇中，我們介紹了 key 為何，以及如何在 React 中使用 key。 Key 可以想成是 React element list 中每個元...
回顧 Context 語法 在上一章節中，我們介紹了 Context 的使用簡介與語法。 React context 的使用環繞三個角色在運作： Contex...
React 元件的生命周期: 這是用console.log跑程式所出來的順序，數字是記錄而已。 1.constructor:初始化 4.render:在網頁上輸...
在過去幾天，我們都是用map來製造MenuItem。但如果你眼尖的話，應該會注意到在console噴出了這個東西 照字面翻的話就是React希望我們給Menu...
由於我們在執行React程式前，都要透過webpack和Babel打包編譯成瀏覽器看的懂的ES5，實際跑在瀏覽器的程式碼就會和本來React裡面長的樣子差很多，...
回顧 React form 與 controlled component 在前兩個章節：初探 Form & Controlled component 與...
目前為止我們已經了解該如何使用 React Testing Library 的 render 跟 debug 來 測試元件的狀態了。 今天我們將繼續探索如何測試...
Andy Chang
灆洢 a.k.a Maplewing
jbuduoo
DanSnow
maxam
Jasper
TWGD
Lemon
Henry Chang
莫力全 Kyle Mo
iT 邦幫忙鐵人賽