先用一句話理解
用網站與電商案例理解 UI、UX、HTML、CSS、JavaScript、TypeScript、React、Vue、Next.js、Vite、Responsive。
不要只記縮寫。要能回答：這個技術是什麼類型、負責什麼、與哪些工具相依、出問題時要查哪一層。
前端與介面：基礎名詞與具體例子
| 名詞 | 白話解釋 | 使用情境 |
|---|---|---|
| UI | 畫面上的可操作元素，包括按鈕、表單與清單。 | 下單按鈕的尺寸、顏色及位置。 |
| UX | 使用者從進站到完成目標的過程。 | 結帳流程減少不必要步驟。 |
| HTML | 定義網頁語意結構。 | h1 標題、表單與商品卡片。 |
| CSS | 控制版面與視覺樣式。 | 手機版單欄、桌機版多欄。 |
| JavaScript | 瀏覽器的主要互動程式語言。 | 點擊加入購物車後即時更新數量。 |
| TypeScript | JavaScript 加上靜態型別系統。 | 訂單金額應為數值而非任意字串。 |
| React | 以元件建立互動式 UI 的函式庫。 | 重用商品卡片與搜尋元件。 |
| Next.js | 以 React 為核心的全端 Web 框架。 | 提供路由、伺服器渲染與後端處理能力。 |
| Vue | 另一個常見的前端框架。 | 使用 Vue 建立互動後台。 |
| Vite | 提供開發伺服器和前端建置能力的工具。 | 建立快速啟動的 React 專案。 |
| Responsive Design | 讓畫面依裝置尺寸調整。 | 手機一欄，桌機三欄。 |
常見混淆：它們究竟差在哪？
HTML vs CSS vs JavaScript
HTML 是結構，CSS 是樣式，JavaScript 是行為。
React vs Next.js
React 可獨立搭配 Vite；Next.js 在 React 上提供更多應用功能。
UI vs UX
介面漂亮不等於使用者能有效完成任務。
實作時的三個檢查點
- 先用線框圖定義畫面和使用者流程。
- 定義哪些資料只在畫面上暫存，哪些資料必須由後端管理。
- 測試手機排版、鍵盤操作、載入速度與表單錯誤狀態。
常見問題 FAQ
學 React 前需要懂 JavaScript 嗎？
理解 JavaScript 基礎有助於讀懂 React 元件、狀態與非同步處理。
Next.js 是否只有前端？
不是，Next.js 同時提供伺服器端路由與處理功能，適合建立全端應用。