KD's Tech Blog

Hi, 我是 KD Chang 凱迪，我在這書寫我的軟體開發/程式設計技術筆記 | KD 技術部落格

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

前言Hooks 是在 React 16.8 版本中加入的新功能。Hooks 讓你可以在「函式元件（function components）」中使用狀態（state）以及其他 React 功能。因此，自從有了 Hooks 之後，類別元件（class components）通常就不再是必要的了。 儘管 Hooks 幾乎取代了類別元件的使用方式，但 React 團隊目前並沒有打算移除 class ......

Posted by kdchang on 2024-01-16

在 React 中使用 Sass 進行樣式設計教學 | w3schools 學習筆記

前言在現代前端開發中，維護與管理 CSS 樣式是一項重要任務，尤其當應用程式日益龐大、元件複雜時，單純使用原生 CSS 經常會遇到樣式難以重用、命名衝突等問題。這時候，Sass（Syntactically Awesome Stylesheets）這類 CSS 預處理器便顯得格外實用。Sass 提供變數、巢狀語法、Mixin 等強大功能，有助於讓樣式更具模組化與可維護性。 本篇教學將說明如何在......

Posted by kdchang on 2024-01-15

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

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

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

FRIENDS