前端學習
含有「前端學習」共 101 篇內容
全部內容
發佈日期由新至舊
React 透過 SyntheticEvent 系統封裝了瀏覽器的原生事件，提供跨瀏覽器一致的互動介面。它是網頁應用程式回應使用者操作（如點擊、輸入、送出表單）的核心機制。
條件渲染是指根據程式當前的狀態 (State) 或屬性 (Props)，動態決定要在網頁上顯示哪些 UI 元素，例如：切換登入與登出按鈕的顯示、在資料載入完成前顯示讀取中圖示。
useState 是一個 React Hook，當開發者透過它改變資料時，React 偵測到變動便會自動重新渲染畫面，確保使用者看到最新的資訊。
列表渲染是指利用 JavaScript 的陣列方法，將一組資料動態轉換為對應的 JSX 元素。用於處理重複性結構，例如：留言板、商品清單等，能大幅減少重複程式碼。
屬性 (Props) 是 React 元件之間傳遞資料的機制，由父元件傳給子元件，具有唯讀性。它是實現組件化開發的核心，確保介面能根據外部傳入的參數動態渲染不同內容。
元件 (Components) 是將使用者介面拆解成獨立、可重用的程式碼區塊，透過組合多個元件，開發者能像堆疊樂高積木一樣，快速建構出複雜且易於維護的網頁介面。
JSX 是一種 JavaScript 的語法擴充，允許開發者在程式碼中編寫類似 HTML 的標籤結構。幾乎所有的 React 函式元件都使用 JSX 來定義畫面佈局與內容。
React 是由 Facebook 開發的開源 JavaScript 前端函式庫，特色是把畫面切成一塊一塊的「元件」，就像積木一樣，可以重複使用、自由組合。當資料改變時，React 會自動幫你更新畫面，不需要手動操作。FB、IG 等網站都是用 React 打造的，也是現在最熱門的前端技術之一。
我曾經花了好幾天用 ChatGPT 做網站，結果最後發現——幾乎全部白忙。
明明 AI 已經幫我產出 80% 的內容，但我卻卡在最後那 20%，怎麼改都改不好，甚至越改越壞。
直到我上了六角學院的 Vibe Coding 課程，才發現問題根本不是 AI，而是我不會用。
問題
在一段文字後面需要接一個 SVG icon，例如「外部連結 icon」或「提示 icon」。
希望達到的效果是：
SVG 緊貼在最後一個字後面
文字換行時，icon 跟著最後一個字
icon 不會跑到下一行開頭
例如希望呈現：
這是一段很長的文
字 🔗
而不是：
這是一段
