前端網頁程式設計入門
26公開內容
11私密內容
本課程將帶你從 HTML、CSS、JavaScript 的基礎開始，學習如何構建現代化、響應式的網頁設計！我們還將介紹 React 與 Redux，讓你學會如何使用這些業界主流的前端函式庫來開發高效能的單頁應用（SPA）。你將了解元件化設計、狀態管理、等核心概念，提升你的開發技能，為進一步深入學習前端開發做好準備！
全部內容
免費與付費
最新發佈優先
在 React 中，狀態管理是構建複雜應用的重要一環，其中 useContext 與 Redux 都提供了解決方案，但它們各有優缺點和適用場景。
有鑑於Redux以英文教學為主，網上中文的教學不多，初學者會遇到一些困難，所以本章節希望以一篇文章帶領你快速入門Redux，透過實作的方式上手這個技能!
在 React 中，useContext() 是一個 Hook，用來讓你在函式元件中輕鬆地存取 context 資料，避免繁瑣的 props 傳遞。以下是一步步的教學與示例程式碼。
透過本章學習，你將掌握 如何在 React 應用中運用 useContext() 管理全域狀態，提升開發效率!
付費限定
在本章，我們將使用 React Hooks（useState、useEffect、useRef）來 開發一個碼錶 (Stopwatch) 應用。
付費限定
透過本章學習，你將掌握 useRef() 的核心概念與最佳應用方式，提高 React 應用的效能與靈活性！
付費限定
useEffect 是 React 的一個 Hook，它告訴 React 在以下情況下執行某些代碼。
透過本章的學習，你將能夠 熟練使用 useEffect() 處理 React 副作用，並掌握 最佳實務，確保 React 應用運行順暢、效能最佳！
付費限定
在本章，我們將會實做Todo-List專案，讓你對React開發有更深刻的了解與認識，同時增加 React 的應用經驗。
在本章節，我們將學習如何使用 React useState 來管理 陣列 (Arrays) 和物件 (Objects) 的狀態，這是開發 動態應用 時的重要技術。內涵大量必須知道的應用範例，幫助讀者學習。
React 的 state 是一個元件用於儲存動態資料的機制，當 state 變更時，React 會重新渲染元件。本文說明如何在函式元件和類別元件中使用 state，包含 useState hook 的用法，以及如何處理批次更新以避免 state 更新不一致的問題，並提供三個實例讓大家實際操作上手。
在本章節，我們將深入探討 React onClick 事件，這是 React 中最常見的 事件處理機制，允許我們在使用者點擊元素時執行特定的動作。
在本章節，我們將探討 如何在 React JSX 中處理陣列 (Arrays)，這是開發動態介面時必須掌握的關鍵技術。透過陣列，我們可以輕鬆地渲染動態清單 (Lists)，例如待辦事項列表、產品清單或使用者資訊等。
在 React 中，我們可以利用 JavaScript 的條件運算特性，在 JSX 中根據狀態或 props 的不同，渲染不同內容。本章節會帶你快速入門這項知識並實際使用。
在本章節，我們將探討 React Props，這是 React 組件間 傳遞數據 的核心機制。Props (Properties) 允許父組件將數據傳遞給子組件，使組件變得更具動態性與重用性。
本章將透過 實際範例，讓你深入理解 React Props 的運作方式。
在 React 中，有三種主要方式可以套用 CSS 來設計和美化應用的外觀。每種方式都有不同的適用場景，本文都有詳細介紹：
React（也稱為React.js或ReactJS）是一個自由及開放原始碼的前端JavaScript工具庫，用於基於UI組件構建使用者介面。本章節會帶你初步建立環境並教導如何做使用。
本章節你將了解 日期物件，包括處理日期的方法以及如何設定日期格式，切入要點的示範所有常見的使用方法範例與應用。
付費限定
表單驗證是一個在用戶輸入資料時確保其正確性、完整性及格式符合要求的重要功能，它可以在用戶提交表單之前進行檢查，防止錯誤資料的傳輸。本章節將帶你初步了解其原理與使用。
付費限定
本篇文章深入淺出地介紹 JavaScript 正規表達式，從基本語法、常用符號、方法應用到進階的捕獲群組、斷言等，並搭配豐富的範例程式碼，幫助讀者快速掌握正規表達式的使用技巧。
了解常見的錯誤消息將幫助您更有效的調試程式碼，本章將介紹 JavaScript 錯誤處理機制 (Error Handling)，學習如何有效地偵測、處理與預防錯誤，提高程式的穩定性與可維護性。
付費限定
透過本章的學習，你將了解 JavaScript 事件冒泡 (Event Bubbling) 與事件委託 (Event Delegation)，這是前端開發中處理 DOM 事件的重要概念。
本篇文章介紹 JS 中DOM的基本操作，包含節點類型、節點關係、以及常見的 DOM API 使用方法。文中也說明 `innerText` 與 `textContent` 的差異，並示範了 `addEventListener()` 的其他事件類型。是一篇實作類型的教學文章，意在幫你輕鬆入門這項技術。
