# 🔥 Blazor Bootcamp

## 🟦 【Blazor 基礎入門 — 必讀】

### 1. Blazor 簡介

#### 什麼是 Blazor？
- 📖 [什麼是 Blazor？](https://learn.microsoft.com/zh-tw/training/modules/blazor-introduction/2-what-is-blazor)

#### Blazor 的運作方式
- 📖 [Blazor 的運作方式](https://learn.microsoft.com/zh-tw/training/modules/blazor-introduction/3-how-blazor-works)

#### 使用 Blazor 的時機
- 📖 [使用 Blazor 的時機](https://learn.microsoft.com/zh-tw/training/modules/blazor-introduction/4-when-to-use-blazor)

---

### 2. 建置 Blazor 專案（了解 Blazor Web App 結構）

#### 設定您的開發環境
- 🔧 [設定您的開發環境](https://learn.microsoft.com/zh-tw/training/modules/build-your-first-blazor-web-app/2-configure-environment)

#### Razor 元件（最核心概念）
- 🧩 [Razor 元件](https://learn.microsoft.com/zh-tw/training/modules/build-your-first-blazor-web-app/4-blazor-components)

#### 練習：新增元件
- 💻 [練習：新增元件](https://learn.microsoft.com/zh-tw/training/modules/build-your-first-blazor-web-app/5-exercise-add-component)

---

## 🟧 【Blazor UI 操作（前端最重要）】

### 3. Blazor 事件繫結與資料繫結（前端必學）

#### 資料繫結與事件
- 🔗 [資料繫結與事件](https://learn.microsoft.com/zh-tw/training/modules/build-blazor-todo-list/2-data-binding)

#### 練習：資料繫結與事件處理
- 💻 [練習：資料繫結與事件處理](https://learn.microsoft.com/zh-tw/training/modules/build-blazor-todo-list/3-exercise-data-binding)

---

### 4. 使用 Blazor 元件建立 UI（前端核心技能）

#### 使用 Blazor 元件建立使用者介面
- 🎨 [使用 Blazor 元件建立使用者介面](https://learn.microsoft.com/zh-tw/training/modules/interact-with-data-blazor-web-apps/2-create-user-interfaces-with-blazor-components)

#### 練習
- 💻 [練習](https://learn.microsoft.com/zh-tw/training/modules/interact-with-data-blazor-web-apps/3-exercise-create-user-interfaces-with-blazor-components)

---

## 🟩 【Blazor 與 API 通訊（前端會用到的）】

> 💡 **重要提醒**：接下來你們會需要呼叫後端API，所以挑以下幾篇：

### 5. 前端如何從 Blazor 呼叫 API（⭐ 重點）

#### 從 Blazor 元件存取資料（會用到 HttpClient）
- 🌐 [從 Blazor 元件存取資料](https://learn.microsoft.com/zh-tw/training/modules/interact-with-data-blazor-web-apps/4-access-data-from-blazor-components)

#### 練習：呼叫 API
- 💻 [練習：呼叫 API](https://learn.microsoft.com/zh-tw/training/modules/interact-with-data-blazor-web-apps/5-exercise-access-data-from-blazor-components)

---

### 6. 共用資料 / 狀態管理（多人頁面共享資料）

#### 在 Blazor 應用程式中共用資料
- 🔄 [在 Blazor 應用程式中共用資料](https://learn.microsoft.com/zh-tw/training/modules/interact-with-data-blazor-web-apps/6-share-data-in-blazor-applications)

---

## 🟪 【導航 / Routing（前端必學）】

### Blazor 路由器元件
- 🧭 [Blazor 路由器元件](https://learn.microsoft.com/zh-tw/training/modules/use-pages-routing-layouts-control-blazor-navigation/2-use-router-component-control-apps-navigation)

### @page 指示詞
- 📄 [@page 指示詞](https://learn.microsoft.com/zh-tw/training/modules/use-pages-routing-layouts-control-blazor-navigation/3-exercise-change-navigation-blazor-using-page-directive)

### 路由參數
- 🔗 [路由參數](https://learn.microsoft.com/zh-tw/training/modules/use-pages-routing-layouts-control-blazor-navigation/4-explore-route-parameters-effect-apps-routing)

---

## 🟫 【表單 / 驗證（前端必備）】

### 使用事件處理常式
- ⚡ [使用事件處理常式](https://learn.microsoft.com/zh-tw/training/modules/blazor-improve-how-forms-work/2-attach-csharp-code-dom-events-blazor-event-handlers)

### 練習：建立 onclick handler
- 💻 [練習：建立 onclick handler](https://learn.microsoft.com/zh-tw/training/modules/blazor-improve-how-forms-work/3-exercise-create-blazor-event-handler-onclick-events)

### 使用 Blazor 表單的強大功能（包含驗證）
- 📋 [使用 Blazor 表單的強大功能](https://learn.microsoft.com/zh-tw/training/modules/blazor-improve-how-forms-work/4-take-advantage-power-blazor-forms)

---

## 🟦 【Blazor 進階（選讀）】

### JavaScript 與 Blazor 的互通性（前端整合 JS Library 時會用到）
- 🔧 [JavaScript 與 Blazor 的互通性](https://learn.microsoft.com/zh-tw/training/modules/blazor-build-rich-interactive-components/2-create-user-interfaces-blazor-components)

### Blazor 元件生命週期（UI State 重要）
- 🔄 [Blazor 元件生命週期](https://learn.microsoft.com/zh-tw/training/modules/blazor-build-rich-interactive-components/4-improve-app-interactivity-lifecycle-events)

---

## 📚 學習順序建議

1. **第一階段**：🟦 Blazor 基礎入門 (必讀)
2. **第二階段**：🟧 UI 操作 + 🟪 導航/Routing
3. **第三階段**：🟫 表單/驗證
4. **第四階段**：🟩 API 通訊
5. **第五階段**：🟦 進階功能 (選讀)

> 💡 **小提醒**：建議依照順序學習，每個階段都有實作練習，記得跟著做！

---

*Last Updated: 2024-11-18 陳彥宇*