一、state 的概念與用途 在 React 中，state（狀態） 是用來存放會隨著使用者操作而改變的資料。 與一般變數不同的是： 當 state 改變時，R...
一、props 的概念與用途 props 是「父元件 → 子元件」傳遞資料的機制。 它是唯讀的（read-only），子元件不能直接修改它。 透過 props，...
接著要來認識React的條件判斷式，可以根據不條件，來給組件回傳不同的網頁內容而判斷式中有幾個常見的用法，首先是三元運算子(ternary operator)...
可以在JSX中放入陣列(listItems)不過以這樣的寫法console中會顯示錯誤訊息正確的寫法：陣列中的每一個元素都應該要有key屬性，key屬性的用途主...
每個組件只能回傳一個元素 (物件)，他不能同時回傳多個元素 說明： 代表一個元素，如果沒有用把三個元素包進一個元素裡，程式會報錯 ( javaScript本身的...
今天是鐵人賽的最後一天，剛好在昨天也介紹完了官方文件的 管理 State 篇章。後面還剩 逃脫出口 出口這個篇章沒介紹完，主要的內容會是對 React 以外的系...
30 天旅程回顧 終於來到了鐵人賽的最後一天！回顧這 30 天的挑戰，感觸良多。 我在軟體開發領域已經工作八年，從最初的後端工程師，到後來的全端工程師，再到區塊...
前言 歡迎來到倒數第二天！ 我們昨天完成了在分支上的 React 程式碼實作測驗，確認了我們目前的實作是能撐起本地的測試的，雖然因為安全性的考量我們決定不在這次...
延續昨天的介紹，Context 除了透過傳給 Provider 不同的 value 值之外，也可以透過傳入 state 後，用 state 的更新去改變裡面的值...
前情提要 在過去的 Day 24-28 中，我們完成了 Kyo System 前端的核心功能： Day 24: 建立 React + Vite + Type...
在前面的篇章：Day 25 - 在 Component 之間共享 State，有介紹 state 可以透過 props 傳下去給其他 Component 使用。...
前情提要 經過 Day 27 的即時通知系統建置,我們已經可以即時推送訊息給使用者。今天我們要實作 即時儀表板與資料視覺化系統,這是 SaaS 產品的核心功能之...
前言 歡迎來到 Day 27！在我們的 AI 面試官具備了評測純 JavaScript 的能力後，一個自然的延伸問題便是：我們能評測像 React 這樣的現代前...
隨著我們開發的程式碼規模變大，有時候在處理陣列的 state 的時候，所需要更新的邏輯也會越來越多，如果通通直接寫在 handler 裡面會讓我們 compon...
前情提要 經過 Day 26 的多因素認證建置,我們已經為 Kyo System 建立了企業級的帳號安全系統。今天我們要實作即時通知系統與 WebSocket...
還記得之前介紹 React 在生成畫面的時候，會照著 render trees 去呈現畫面。而當我們使用判斷式在不同條件下產生不同畫面，就會造成數的改動。這些改...
前情提要 經過 Day 25 的用戶認證系統建置，我們已經有了完整的登入/註冊機制。今天我們要為 Kyo System 增加企業級的多因素認證 (MFA) 與帳...
當我們在 Component 裡面寫 useState 的時候，這就會在 Component 裡面建立一個專屬該 component 的 state 資料，會記...
在昨天的篇章，介紹了詳細的 state 變化流程。今天則是要來介紹在使用 state 的時候，我們該如何選擇他的架構該長什麼樣子。昨天已經有先提到一些了，今天會...
今天要學習Component組件，組件的功能就像是一個容器，他可以把多個HTML元素裝在一起，也就是說可以把網頁拆成不同部分來寫，React會把這些組件結合在一...
我使用Vite作為前端框架的建構工具來創建React的專案，因為Vite是比較新的工具，未來也比較多人使用 首先用npm的指令，透過vite來創建前端的框架 接...
昨天介紹了在 React 開發的五個思考流程： 確認 component 不同的呈現狀態 識別哪些會觸發狀態改變 用 useState 記憶這些狀態進行操作...
終於把基礎的 state 更新介紹完，接下來的篇章會接著介紹如何管理與設計這些在 component 裡面使用到的 state。今天的文章則是會從 輸入表單（I...
前兩天介紹了如何更新 state 內的 object，今天則是要來介紹如何更新陣列（Array）。今天的文章參考官方文件的： https://zh-hant...
昨天介紹了如果是 object 型態的 state，在 React 會要怎麼更新。今天要來繼續延伸閱讀，來介紹 React 在他們官網推薦的 library I...
前情提要 經過前面 19 天的開發，我們已經建立了一個完整的現代化前端 SaaS 應用。今天是 30 天挑戰的 2/3 里程碑，讓我們來看這 20 天打造的 R...
今天繼續介紹 state 的運用，前面的文章的 state 更新都是用 數字 number、字串 string、布林值 boolean 等的單一型態（type）...
昨天在介紹 React 如何把畫面呈現在網站上的三個步驟，今天會再針對 state 更新後重新 render 更新畫面再做更多的延伸介紹。今天的文章參考官方文件...
前情提要 在 Day 16 我們實作了即時協作系統，今天我們將進行重要的架構升級：將 WebSocket 協作引擎獨立為專門的微服務。這個架構調整將帶來更好的可...
Render 是 React 在產生畫面在網頁前，所需要執行的動作，今天會介紹整個 render 的步驟，還有跟他息息相關的 commit。React 會在什麼...
iThome鐵人賽
看影片追技術
看更多
lihsuanh
Moscle.dev
windate3411