洛奇的邪惡組織手札

網址決定現在畫哪一頁。這一篇用 React Router 8，從 react-router 引入，預設是 BrowserRouter。你會把清單、詳情與表單接成選單，用查詢參數把 id 帶到表單，並為對不上的網址留下 404。官方說明在 reactrouter.com。

畫面畫完之後，才適合去讀檔、訂閱或對外部系統做一次性的動作。這一篇先看 effect 什麼時候跑、怎麼收尾，再把讀寫請求收成函式。接著讓多個元件共用一份狀態。Context、ref、reducer 與表單 Actions 放在選讀。換頁留到 React Router。

React 是在瀏覽器裡用函式描述畫面的函式庫。資料一變，同一個函式再跑一次，畫面跟著換。這一篇先看它是什麼、為什麼用它，再寫 JSX、元件、狀態、事件、列表與表單。

計時器、網路與讀檔都不會把整頁停住。這一篇先看程式實際的執行順序，再用 Promise 與 async／await 把等待寫成一直線。接著用 Fetch 讀寫 JSON，並把清單留在瀏覽器裡，重新整理後還在。

瀏覽器把這一頁收成物件之後，JavaScript 才碰得到畫面。這一篇從 window 與 document 開始，接著選取、改寫、建立節點，再把點擊、輸入與送出接上函式。最後用一份資料重畫清單。網路請求與瀏覽器儲存留到下一篇。

JavaScript 是瀏覽器內建、負責行為的程式語言：資料變了，接下來要算什麼。這一篇先不改畫面，只在 Console 把值算對：變數、型別、字串、判斷、迴圈、函式，再到陣列、物件、內建物件與錯誤處理。模組放在選讀。選取元素、重繪列表與 fetch 分在後面兩篇。

本篇內容收錄公式表供快速參考，類別名稱對照 Tailwind CSS v4 文件。以下按照功能分類整理，方便查找。

Tailwind CSS 把常用的 CSS 宣告做成一粒一粒的 class，稱為 utility（工具類）。名字多半是「屬性－值」：bg-teal-700 是背景色，p-4 是內距。你把這些 class 寫在標籤上，Vite 在開發時編成瀏覽器看得懂的 CSS。

CSS（Cascading Style Sheets，層疊樣式表）決定頁面長什麼樣子：顏色、字級、背景，以及盒子怎麼排。HTML 負責這一頁有什麼，CSS 負責那些東西怎麼呈現。

HTML 用元素描述結構與內容：它不算數、不處理點擊邏輯，也不決定顏色與間距。瀏覽器讀到標籤，就把每一塊畫成盒子，再依標籤的名字決定這塊是標題、段落、連結還是表單欄位。