1. React 是什麼？

React 是一個用於建構網頁使用者介面的 JavaScript 函式庫。
在實作中，整體的系統架構可劃分為前後端的合作：

┌─────────────────────────┐
│    **React Frontend**   │
│                         │
│  Security Events        │
│  Risk Level             │
│  MITRE ATT&CK           │
│  AI Analysis            │
└────────────┬────────────┘
             │
          REST API
             │
             ↓
┌─────────────────────────┐
│   **FastAPI Backend**   │
│                         │
│ Event Processing        │
│ Database                │
│ LLM                     │
└─────────────────────────┘

React 負責處理前端的使用者介面與視覺呈現，而 FastAPI 則負責背後的邏輯與資料處理。

實作

用 Vite 建立 React

npm create vite@latest frontend -- --template react

Vite + React 預設畫面

把預設 React 改成 SOC Dashboard

nano src/App.jsx

加入 CSS 進行版面佈局與視覺調整，使其具備 Dashboard 的視覺介面

nano src/App.css

Vite 預設的 src/index.css 樣式可能會對整體畫面配置造成影響，將nano src/index.cs內容全數刪除，保持留空狀態。

再次啟動 React查看AI SOC Dashboard

React 的資料動態渲染機制

在網頁開發中，傳統的 HTML 與 CSS 屬於靜態呈現方式；而透過 React，畫面可以根據資料進行動態生成。

{events.map((event) => (
  // 產生對應的表格列
))}

若資料源僅有 2 筆，畫面即呈現 2 列；當未來 FastAPI 回傳 100 筆 Security Events 時，系統便會自動生成 100 筆資料，不須手動撰寫重複的 <tr> 標籤。

Day 8 小結

目前介面中的Total Events 128、High Risk 5、Medium Risk 23皆使用模擬資料，前後端的資料串接將作為後續整合的目標。這些數字是直接寫在

<p>128</p>

裡面。