KD's Tech Blog

Hi, 我是 KD Chang 凱迪，紀錄關於軟體開發/程式設計/工程思維的技術筆記 | KD 技術部落格

React 中使用 CSS 的三種方式教學 | w3schools 學習筆記

前言在開發 React 應用程式時，樣式的管理與設計是一項不可忽視的重要部分。雖然 React 是一個 JavaScript 函式庫，主要用於建構使用者介面，但它本身並不限制開發者如何為元件加上樣式。React 提供多種整合 CSS 的方法，這篇文章將會深入介紹三種最常見的樣式處理方式：行內樣式（Inline Styling）、CSS 樣式表（Stylesheet）以及CSS 模組（CSS ......

Posted by kdchang on 2024-01-14

提升效能的利器：React.memo 使用入門教學 | w3schools 學習筆記

前言在 React 中，當元件的父元件重新渲染時，預設情況下其所有子元件也會一併重新渲染，即便傳入的 props 完全沒變動。這種「不必要的重新渲染」若發生在大型應用中，會導致效能下降，尤其是當某些元件非常複雜、包含大量計算或 DOM 操作時。 為了避免這種情況，React 提供了一個高階元件函式：React.memo。這個函式能讓你記憶元件的輸出結果，當傳入的 props 沒有變更時，Re......

Posted by kdchang on 2024-01-13

使用 React Router 實現多頁面導覽功能教學（React Router v6）入門教學 | w3schools 學習筆記

前言React 是一個強大的 JavaScript 函式庫，專門用於建立使用者介面。不過，React 本身並未內建「頁面路由」功能。如果你想要為你的 React 專案加入多個頁面，例如首頁、部落格、聯絡我們頁面等等，就必須引入額外的工具。而在眾多路由解決方案中，React Router 是最受歡迎且廣泛使用的選擇。 本文將帶你從零開始，教你如何在使用 Create React App 建立的......

Posted by kdchang on 2024-01-12

React 表單入門教學 | w3schools 學習筆記

前言在網頁開發中，表單（Forms）是使用者與網站互動最常見的方式之一。透過表單，我們可以讓使用者輸入資料、提交查詢、填寫訂單等。而在 React 中，表單不再只是簡單的 HTML 元素堆疊，而是成為受控元件（controlled components）的一部分，由 React 元件的 state 負責管理輸入值與提交行為。 本篇教學將帶你一步一步掌握如何在 React 中建立表單、處理輸入......

Posted by kdchang on 2024-01-11

React List 入門教學 | w3schools 學習筆記

前言React 是一個用於建立 UI 組件的 JavaScript 函式庫，而 JSX 則是 React 中的重要語法擴充。前一章我們已學會如何使用 JSX 編寫 React 介面，本文將進一步說明 React 元件（Components）、props、事件處理（Events）、條件渲染（Conditional Rendering）與列表渲染（Lists）的基本觀念與應用，協助讀者掌握建立互......

Posted by kdchang on 2024-01-09

React 條件渲染入門教學 | w3schools 學習筆記

前言React 是一個用於建立 UI 組件的 JavaScript 函式庫，而 JSX 則是 React 中的重要語法擴充。前一章我們已學會如何使用 JSX 編寫 React 介面，本文將進一步說明 React 元件（Components）、props 與事件（Events）的基本觀念與應用，並介紹如何透過函式元件建立互動性的使用者介面，進而引入條件渲染的方式，讓介面能根據資料狀態動態改變內......

Posted by kdchang on 2024-01-08

React Events 入門教學 | w3schools 學習筆記

前言React 是一個用於建立 UI 組件的 JavaScript 函式庫，而 JSX 則是 React 中的重要語法擴充。前一章我們已學會如何使用 JSX 編寫 React 介面，本文將進一步說明 React 元件（Components）、props 與事件處理的基本觀念與應用，並介紹如何透過函式元件傳遞資料及觸發動作，建立更互動且靈活的 UI 架構。 重點摘要 React 元件就像函式，......

Posted by kdchang on 2024-01-07

React Props 入門教學 | w3schools 學習筆記

前言React 是一個用於建立 UI 組件的 JavaScript 函式庫，而 JSX 則是 React 中的重要語法擴充。前一章我們已學會如何使用 JSX 編寫 React 介面，本文將進一步說明 React 元件（Components）與 props 的基本觀念與應用，並介紹如何透過函式元件傳遞資料，建立更靈活的 UI 架構。 重點摘要 React 元件就像函式，會回傳 HTML 元素 ......

Posted by kdchang on 2024-01-06

React Components 入門教學 | w3schools 學習筆記

前言React 是一個用於建立 UI 組件的 JavaScript 函式庫，而 JSX 則是 React 中的重要語法擴充。前一章我們已學會如何使用 JSX 編寫 React 介面，本文將進一步說明 React 元件（Components）的基本觀念與應用，並介紹如何透過函式元件（Function Components）與類別元件（Class Components）撰寫可重用的 UI 模組。......

Posted by kdchang on 2024-01-05

React JSX 入門教學 | w3schools 學習筆記

前言React 是一個用於建立 UI 元件的 JavaScript 函式庫，而 JSX 則是屬於 React 中的一個元件模板語法糖。這篇文章將簡要介紹 JSX 是什麼，如何撰寫、條件式使用以及特殊對應，幫助初學者或 React 開發者進一步瞭解 JSX 的基礎應用。 重點摘要 JSX 是 JavaScript XML 的縮寫 允許在 JavaScript 代碼中直接寫 HTML JSX 會......

Posted by kdchang on 2024-01-04

ABOUT ME
KD's Tech Blog 技術部落格 | KD Chang 張凱迪

KD Chang 張凱迪（@kdchang），台灣大學，主修經濟學，臺大資管所畢業。是一個軟體工程師，也是一位 PM 產品/專案經理和教育工作者。曾服務過上市網路軟體公司、上市科技電子公司、台灣 AI 人工智慧新創獨角獸公司，也曾參與數個新創組織的創辦和多個網路產品服務的開發。A Software Engineer, Product/Project Manager & Educator.:)

FRIENDS