今天是鐵人賽的最後一天,剛好在昨天也介紹完了官方文件的 管理 State 篇章。後面還剩 逃脫出口 出口這個篇章沒介紹完,主要的內容會是對 React 以外的系...
延續昨天的介紹,Context 除了透過傳給 Provider 不同的 value 值之外,也可以透過傳入 state 後,用 state 的更新去改變裡面的值...
在前面的篇章:Day 25 - 在 Component 之間共享 State,有介紹 state 可以透過 props 傳下去給其他 Component 使用。...
隨著我們開發的程式碼規模變大,有時候在處理陣列的 state 的時候,所需要更新的邏輯也會越來越多,如果通通直接寫在 handler 裡面會讓我們 compon...
還記得之前介紹 React 在生成畫面的時候,會照著 render trees 去呈現畫面。而當我們使用判斷式在不同條件下產生不同畫面,就會造成數的改動。這些改...
當我們在 Component 裡面寫 useState 的時候,這就會在 Component 裡面建立一個專屬該 component 的 state 資料,會記...
在昨天的篇章,介紹了詳細的 state 變化流程。今天則是要來介紹在使用 state 的時候,我們該如何選擇他的架構該長什麼樣子。昨天已經有先提到一些了,今天會...
昨天介紹了在 React 開發的五個思考流程: 確認 component 不同的呈現狀態 識別哪些會觸發狀態改變 用 useState 記憶這些狀態進行操作...
終於把基礎的 state 更新介紹完,接下來的篇章會接著介紹如何管理與設計這些在 component 裡面使用到的 state。今天的文章則是會從 輸入表單(I...
前兩天介紹了如何更新 state 內的 object,今天則是要來介紹如何更新陣列(Array)。今天的文章參考官方文件的: https://zh-hant...
昨天介紹了如果是 object 型態的 state,在 React 會要怎麼更新。今天要來繼續延伸閱讀,來介紹 React 在他們官網推薦的 library I...
今天繼續介紹 state 的運用,前面的文章的 state 更新都是用 數字 number、字串 string、布林值 boolean 等的單一型態(type)...
昨天在介紹 React 如何把畫面呈現在網站上的三個步驟,今天會再針對 state 更新後重新 render 更新畫面再做更多的延伸介紹。今天的文章參考官方文件...
Render 是 React 在產生畫面在網頁前,所需要執行的動作,今天會介紹整個 render 的步驟,還有跟他息息相關的 commit。React 會在什麼...
昨天對 State 有了初步介紹,之後的官方文件其實也有對 State 直接有一個大 章節,會留在後面的篇章。今天想講更多 useState 相關的內容,跟一些...
今天的主題是 React 裡的 State,他會用在我們跟 Component 進行互動時,像是輸入資料(Input)、點擊顯示與隱藏按鈕(Click)或是選取...
今天的文章接下來繼續介紹最後提到的事件的傳遞,這邊的傳遞通常是指假設我們在 Component 裡,觸發的事件可能會根據 Parent 跟 Child 的不同而...
前面幾天的內容,都比較偏向靜態的 JSX 生成,接下來的幾個篇章,會開始介紹怎麼在 React 上增加網站的互動性(像是點擊按鈕,選取選單,輸入資料等),讓我們...
樹(Tree)是一個時常用在處理 UI 與其中的項目關係的一個資料結構。像是在瀏覽器生成 HTML 架構,以及使用 CSS 來完成外觀更動時,都會運用到相對應的...
今天要來介紹一個我們在寫 React Component 很重要的觀念,就是讓 Component 保持純淨(Pure)。前面的文章就有提到在寫 Compone...
之前我們在前面的篇章知道了如何使用 大括號 {} 來幫助我們顯示變數資料。而有時候我們會想顯示不只一項資料,而是從擁有數個 值 得 陣列(Array) 中,顯示...
今天要來介紹也是在寫 React 的時候非常容易用到的功能,那就是 條件式渲染(Conditional Rendering)。這邊的渲染(Render),就是在...
處理多個 props 傳入 繼續補充昨天的內容,昨天知道了如何把 props 傳入 Component 裡面並且在 Component 裡面使用他們。但有時候...
昨天的文章介紹了在 JSX 上面使用參數,而我們也可以在我們客制化的 Component 傳入參數或數值使用。而這些傳遞的東西在 React 就會叫做 prop...
在昨天的文章中介紹了 JSX 的基本用法,並且知道了 React Component 是會把架構、外觀、互動結合在一起使用 JavaScript 來完成的地方。...
在 Day 02 有提到 React Component 會是一個 function 並且回傳 JSX 格式,今天就會來介紹什麼是 JSX,並且他跟一般的 Ht...
昨天簡單了介紹一下 React,跟之後會使用到的線上測試環境。今天會接下來介紹 React 裡的 import 跟 export。然後我後來發現 快速開始 裡的...
今天主要閱讀的內容,會是 React 官網裡的 快速開始 (Quick Start) 頁。但在開始閱讀之前,會想簡單介紹一下我所知道的 React。 React...
系列文章: 前端工程師的 Modern Web 實踐之道 - Day 3預計閱讀時間: 10 分鐘難度等級: ⭐⭐⭐☆☆ 🎯 今日目標 在前一篇文章中,我們...
一、起心動念 三大框架都碰過,但 Vue.js 以 簡潔語法與輕量特性 讓我著迷。 曾喜愛過小眾框架 Riot.js,它的雙向綁定和 template 語法糖也...