KD's Tech Blog

軟體工程和產品專案管理現場觀察：關於軟體開發/程式設計/工程思維的技術部落格

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

Vue.js 3 官方入門語法教學筆記 [13] - Slots 插槽 | 學習筆記

Slots 插槽除了透過 Props 傳遞資料外，父元件還可以透過插槽將模板片段傳遞給子元件： <template> <ChildComp> 這是一些插槽內容！ </ChildComp></template> 在子元件中，可以使用 <slot> 元素作為插槽來渲染父元件傳遞的內容： <template> &......

Posted by kdchang on 2021-02-13

Vue.js 3 官方入門語法教學筆記 [12] - Emits 事件傳遞 | 學習筆記

Emits 事件傳遞除了接收 Props 之外，子元件也可以向父元件觸發事件： <script setup>// 宣告要觸發的事件const emit = defineEmits(['response'])// 觸發事件並傳遞參數emit('response', 'hello from child')</scrip......

Posted by kdchang on 2021-02-11

Vue.js 3 官方入門語法教學筆記 [11] - Props 屬性 | 學習筆記

Props 屬性子元件可以透過 Props 接收來自父元件的輸入。首先，子元件需要宣告它所接收的 Props： <!-- ChildComp.vue --><script setup>const props = defineProps({ msg: String})</script> 注意，defineProps() 是一個編譯時的......

Posted by kdchang on 2021-02-10

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

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

FRIENDS