KD's Tech Blog

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

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

React Render HTML 入門教學 | w3schools 學習筆記

前言React 是一個專門用於構建使用者介面（UI）的 JavaScript 函式庫，其主要目標就是將 HTML 呈現在網頁中。透過 React 的核心函式 createRoot() 和方法 render()，開發者可以將 UI 元件渲染到指定的 HTML 元素中。本文將介紹 React 如何在網頁上渲染 HTML，包括核心函式與方法的用途、應用位置與語法示範，並介紹與 JSX 語法的結合使......

Posted by kdchang on 2024-01-03

React 與 ES6 語法教學入門 | w3schools 學習筆記

前言ES6（ECMAScript 2015）是 JavaScript 的第六版，於 2015 年發布，為 JavaScript 帶來了重大語法革新。React 作為現今最受歡迎的前端框架和函式庫之一，其核心設計與語法極度依賴 ES6 的各項功能。因此，學習 React 前，理解 ES6 的語法特性將大幅提升開發效率與理解深度。 本文將說明 React 常用的 ES6 特性，並透過簡明範例幫助......

Posted by kdchang on 2024-01-02

React 入門教學 | w3schools 學習筆記

前言在當代的前端開發中，React 是最具代表性的 JavaScript 函式庫之一。由 Facebook 軟體工程師 Jordan Walke 所開發，React 被廣泛應用於建構動態使用者介面，尤其適用於大型單頁應用（SPA, Single Page Application）。本篇文章將帶你認識 React 的核心概念、其背後的工作原理、使用前的基礎知識與發展歷史，並透過實例進行初步實作......

Posted by kdchang on 2024-01-01

React 前端整合 JWT（含 Refresh Token）入門教學筆記 | 學習筆記

前言當你要將 JWT 驗證整合至 React 前端，並搭配 Refresh Token 或整合 OAuth（如 Google 登入）流程，你需要考慮前端的存儲方式、token 的更新機制，以及第三方登入的流程銜接。 以下將分成三個部分講解： 一、React 前端整合 JWT（含 Refresh Token）流程總覽： 使用者輸入帳密登入，發送 /login 請求。 伺服器簽發兩種 tok......

Posted by kdchang on 2023-12-21

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

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

FRIENDS