iT邦幫忙

front-end相關文章
共有 486 則文章
鐵人賽 Modern Web DAY 30

技術 Day 30 - 用 React 的方式去思考

今天是鐵人賽的最後一天,剛好在昨天也介紹完了官方文件的 管理 State 篇章。後面還剩 逃脫出口 出口這個篇章沒介紹完,主要的內容會是對 React 以外的系...

鐵人賽 Modern Web DAY 29

技術 Day 29 - 使用 Reducer 跟 Context 進行擴展

延續昨天的介紹,Context 除了透過傳給 Provider 不同的 value 值之外,也可以透過傳入 state 後,用 state 的更新去改變裡面的值...

鐵人賽 Modern Web DAY 28

技術 Day 29 - 使用 Context 深度傳遞資料

在前面的篇章:Day 25 - 在 Component 之間共享 State,有介紹 state 可以透過 props 傳下去給其他 Component 使用。...

鐵人賽 Modern Web DAY 27

技術 Day 27 - 將 State 邏輯提取到 Reducer

隨著我們開發的程式碼規模變大,有時候在處理陣列的 state 的時候,所需要更新的邏輯也會越來越多,如果通通直接寫在 handler 裡面會讓我們 compon...

鐵人賽 Modern Web DAY 26

技術 Day 26 - 保留和重置 State

還記得之前介紹 React 在生成畫面的時候,會照著 render trees 去呈現畫面。而當我們使用判斷式在不同條件下產生不同畫面,就會造成數的改動。這些改...

鐵人賽 Modern Web DAY 25

技術 Day 25 - 在 Component 之間共享 State

當我們在 Component 裡面寫 useState 的時候,這就會在 Component 裡面建立一個專屬該 component 的 state 資料,會記...

鐵人賽 Modern Web DAY 24

技術 Day 24 - 選擇 State 架構

在昨天的篇章,介紹了詳細的 state 變化流程。今天則是要來介紹在使用 state 的時候,我們該如何選擇他的架構該長什麼樣子。昨天已經有先提到一些了,今天會...

鐵人賽 Modern Web DAY 23

技術 Day 23 - 用宣告式思考 UI

昨天介紹了在 React 開發的五個思考流程: 確認 component 不同的呈現狀態 識別哪些會觸發狀態改變 用 useState 記憶這些狀態進行操作...

鐵人賽 Modern Web DAY 22

技術 Day 22 - 使用 Input Form 介紹 React State 概念

終於把基礎的 state 更新介紹完,接下來的篇章會接著介紹如何管理與設計這些在 component 裡面使用到的 state。今天的文章則是會從 輸入表單(I...

鐵人賽 Modern Web DAY 21

技術 Day 21 - 更新 State 內的 Array

前兩天介紹了如何更新 state 內的 object,今天則是要來介紹如何更新陣列(Array)。今天的文章參考官方文件的: https://zh-hant...

鐵人賽 Modern Web DAY 20

技術 Day 20 - 更新 State 內的 Object Part 2

昨天介紹了如果是 object 型態的 state,在 React 會要怎麼更新。今天要來繼續延伸閱讀,來介紹 React 在他們官網推薦的 library I...

鐵人賽 Modern Web DAY 19

技術 Day 19 - 更新 State 內的 Object Part 1

今天繼續介紹 state 的運用,前面的文章的 state 更新都是用 數字 number、字串 string、布林值 boolean 等的單一型態(type)...

鐵人賽 Modern Web DAY 17

技術 Day 17 - State 當作快照(Snapshot)

昨天在介紹 React 如何把畫面呈現在網站上的三個步驟,今天會再針對 state 更新後重新 render 更新畫面再做更多的延伸介紹。今天的文章參考官方文件...

鐵人賽 Modern Web DAY 16

技術 Day 16 - Render 和 Commit

Render 是 React 在產生畫面在網頁前,所需要執行的動作,今天會介紹整個 render 的步驟,還有跟他息息相關的 commit。React 會在什麼...

鐵人賽 Modern Web DAY 15

技術 Day 15 - 更多關於 useState

昨天對 State 有了初步介紹,之後的官方文件其實也有對 State 直接有一個大 章節,會留在後面的篇章。今天想講更多 useState 相關的內容,跟一些...

鐵人賽 Modern Web DAY 14

技術 Day 14 - State: Component 的記憶

今天的主題是 React 裡的 State,他會用在我們跟 Component 進行互動時,像是輸入資料(Input)、點擊顯示與隱藏按鈕(Click)或是選取...

鐵人賽 Modern Web DAY 13

技術 Day 13 - 事件傳遞(冒泡與捕捉)

今天的文章接下來繼續介紹最後提到的事件的傳遞,這邊的傳遞通常是指假設我們在 Component 裡,觸發的事件可能會根據 Parent 跟 Child 的不同而...

鐵人賽 Modern Web DAY 12

技術 Day 12 - 回應 Event

前面幾天的內容,都比較偏向靜態的 JSX 生成,接下來的幾個篇章,會開始介紹怎麼在 React 上增加網站的互動性(像是點擊按鈕,選取選單,輸入資料等),讓我們...

鐵人賽 Modern Web DAY 11

技術 Day 11 - 把 UI 想成 Tree

樹(Tree)是一個時常用在處理 UI 與其中的項目關係的一個資料結構。像是在瀏覽器生成 HTML 架構,以及使用 CSS 來完成外觀更動時,都會運用到相對應的...

鐵人賽 Modern Web DAY 10

技術 Day 10 - 保持 Component 的 Pure

今天要來介紹一個我們在寫 React Component 很重要的觀念,就是讓 Component 保持純淨(Pure)。前面的文章就有提到在寫 Compone...

鐵人賽 Modern Web DAY 9

技術 Day 09 - Rendering 列表

之前我們在前面的篇章知道了如何使用 大括號 {} 來幫助我們顯示變數資料。而有時候我們會想顯示不只一項資料,而是從擁有數個 值 得 陣列(Array) 中,顯示...

鐵人賽 Modern Web DAY 8

技術 Day 08 - 條件式 Rendering

今天要來介紹也是在寫 React 的時候非常容易用到的功能,那就是 條件式渲染(Conditional Rendering)。這邊的渲染(Render),就是在...

鐵人賽 Modern Web DAY 7

技術 Day 07 - 傳遞 Prop 到 Comonent - part 2

處理多個 props 傳入 繼續補充昨天的內容,昨天知道了如何把 props 傳入 Component 裡面並且在 Component 裡面使用他們。但有時候...

鐵人賽 Modern Web DAY 6

技術 Day 06 - 傳遞 Prop 到 Comonent - part 1

昨天的文章介紹了在 JSX 上面使用參數,而我們也可以在我們客制化的 Component 傳入參數或數值使用。而這些傳遞的東西在 React 就會叫做 prop...

鐵人賽 Modern Web DAY 5

技術 Day 05 - 在 JSX 中使用 JavaScript 的大括號

在昨天的文章中介紹了 JSX 的基本用法,並且知道了 React Component 是會把架構、外觀、互動結合在一起使用 JavaScript 來完成的地方。...

鐵人賽 Modern Web DAY 4

技術 Day 04 - Writing Markup with JSX

在 Day 02 有提到 React Component 會是一個 function 並且回傳 JSX 格式,今天就會來介紹什麼是 JSX,並且他跟一般的 Ht...

鐵人賽 Modern Web DAY 3

技術 Day 3 - Importing 和 Exporting Component

昨天簡單了介紹一下 React,跟之後會使用到的線上測試環境。今天會接下來介紹 React 裡的 import 跟 export。然後我後來發現 快速開始 裡的...

鐵人賽 Modern Web DAY 2

技術 Day 02 - 快速開始

今天主要閱讀的內容,會是 React 官網裡的 快速開始 (Quick Start) 頁。但在開始閱讀之前,會想簡單介紹一下我所知道的 React。 React...

鐵人賽 Modern Web DAY 0

技術 套件管理器選擇指南:npm、yarn、pnpm、bun

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 3預計閱讀時間: 10 分鐘難度等級: ⭐⭐⭐☆☆ 🎯 今日目標 在前一篇文章中,我們...

鐵人賽 Vue.js DAY 1

技術 Day 0|起心動念與系列規劃

一、起心動念 三大框架都碰過,但 Vue.js 以 簡潔語法與輕量特性 讓我著迷。 曾喜愛過小眾框架 Riot.js,它的雙向綁定和 template 語法糖也...