這一篇整篇是選讀，不佔上課時間。切版（上一篇）做完就是課程的結業專案；想把它接上真正的雲端資料，才照這一篇做：課堂還有餘裕時，可以請 AI 代理（例如 Claude Code）對照本文一步步幫你做，否則就留到回家自己完成。
切版做完之後，這一章把同一份洛奇旅行的行程與報名接到雲端。前台用 Google 登入報名，並查詢自己的訂單。後台使用 Firebase Authentication 的 email 與密碼。資料放在 Cloud Firestore。下面的路徑寫 07-project-final。人還在自己的 06-project-init 裡時，資料夾名稱換成那一份，檔案相對位置相同。
這一章做洛奇旅行的切版：把 React、MUI 與 Tailwind 收成一個多頁網站。先建好專案與樣式，接著用佔位頁搭起路由，再組出外框（頁首、主導覽、頁尾）：外框先放標記，再逐一換成真正的元件；之後各頁換成真正的畫面，假資料跟著補齊。切版最後會打包並用 Live Server 預覽產物；網站要怎麼接住內頁的重新整理，留到選讀的下一篇部署時再寫。
網址決定現在畫哪一頁。這一篇先說明路由是什麼、React Router 的宣告式、資料、框架三種模式怎麼選（專案用資料模式），再把 03-react 複製成 04-react-router 接上路由器，改成練習筆記網站：路由表與共用版型、Link 與 NavLink、路徑參數與查詢參數、找不到的頁面，接著用 loader、action、Form、redirect 與 errorElement 讀取並送出資料，並以 useFetcher 與 useNavigation 處理不換頁的送出與讀取中狀態。選讀有宣告式與框架模式、useLocation，以及部署到 GitHub Pages。
畫面畫完之後，才適合去讀檔、訂閱或對外部系統做一次性的動作，這就是 effect 的工作。這一篇先看 useEffect 什麼時候執行、怎麼用依賴陣列控制重跑、用清除函式收尾，再用它完成載入中、失敗與沒有資料三種畫面的資料讀取模式。接著處理多個元件要共用資料的情況：把狀態提升到父層，兄弟元件透過 props 互相溝通。選讀的部分包含用 API 模組做遠端寫入、避免不必要的 effect、自訂 Hook、Context、React Compiler 與手動記憶化（useMemo、memo、useCallback）、useRef、useReducer，以及表單 Actions（useActionState、useOptimistic）。最後的專案會改用路由的 loader 讀取資料（第 11 篇）。
React 是用函式描述畫面的 JavaScript 函式庫：資料一變，同一個函式再跑一次，畫面跟著更新。這一篇先說明為何使用框架、為何選 React，再用 Vite 建立啟用 React Compiler 的專案，接著依序學 JSX、單向資料流、元件與 props、用 useState 保存的狀態與不可變更新、事件、列表與 key，以及受控表單；選讀補充 ESLint 與 Prettier 工具鏈、ES Module 的匯出與匯入，以及 useId。
JavaScript 同一時間只做一件事，計時器、網路與讀檔卻都要等。這一篇從同步與非同步的差別談起，經過回呼與 try／catch／throw 的基本錯誤處理，再用 Promise 與 async／await 把等待寫成一直線。接著認識 JSON，用 fetch 讀寫資料並畫出載入中、成功、失敗三種畫面，最後用 Web Storage 讓清單重新整理後還在。選讀補充事件迴圈、race／any、計時器包成 Promise、取消與逾時、CORS、Cookie 與 session／token。
瀏覽器把分頁與這一份 HTML 都收成物件，JavaScript 才碰得到畫面。這一篇先分清 BOM 與 DOM，並決定 script 何時執行；接著選取、改寫與建立節點，再用事件與表單接上使用者的操作，最後讓清單由一份狀態重畫出來。選讀補充瀏覽紀錄、視窗尺寸、剪貼簿與列印、navigator、requestAnimationFrame、事件的捕獲與冒泡，以及打地鼠小遊戲。網路請求與瀏覽器儲存留到下一篇。
JavaScript 是瀏覽器內建、負責行為的程式語言：資料變了，接下來要算什麼。這一篇先不改畫面，只在 Console 把值算對：變數、型別、字串、判斷、迴圈、函式，再到陣列、物件與解構展開。Math、Date、錯誤處理與模組放在選讀。選取元素、重繪列表與非同步請求分在後面兩篇。
這是選讀的查詢附錄，上課不會講。內容收錄公式表供快速參考，類別名稱對照 Tailwind CSS v4 文件，內容已對照 Tailwind CSS 4.3 整理，每個類別都用 4.3 編譯器驗證過；之後的小版本若新增了類別，以官方文件為準。以下按照功能分類整理，方便查找。
Tailwind CSS 把常用的 CSS 宣告做成一粒一粒的 class，稱為 utility（工具類）。名字多半是「屬性－值」：bg-teal-700 是背景色，p-4 是內距。這一篇先在一台乾淨的電腦裝好 Node 工具鏈與 Vite（環境只建立一次），再從 utility-first 的基本讀法，一路學到 hover、focus 等狀態變體、跟著系統的深色模式、手機優先的 RWD 與容器查詢，最後用 @theme 加上自己的顏色、間距與字型。Preflight、Play CDN、group 與 peer、導覽列、手動深色切換，以及 @layer 與 @utility 是選讀。