今天主要開始整理記帳 App 的程式碼。原本所有程式都放在 App.jsx，太多行讓人在修改與尋找時，造成了許多不便，所以這次我進行 Refactoring（重構），把不同功能拆成獨立的元件。
把大型元件拆分成小元件
我先將原本的 App.jsx 拆分成不同元件，例如：

一開始我其實不太知道「到底要怎麼分類」，所以問了 Gemini：
我問 Gemini：
「這些幾個你是怎麼分類的？其實我都不知道怎麼分類這些？」
AI 告訴我，可以按照畫面上的功能區塊和每個元件負責的事情來拆分，而不是單純按照程式碼長度來切。
我也開始理解元件拆分的概念：一個元件盡量負責一件主要的事情。
開始學著閱讀大型程式碼
除了請 AI 幫我拆元件，我也問了：
我問 Gemini：
「要怎麼從那一大堆程式碼看？我在找的時候還是感覺在大海撈針。」
AI 建議我可以把 React 程式大致分成幾個區域來看：
Import → 子元件 → State／主要邏輯 → JSX 畫面
這讓我再次複習怎麼比較有方向地去閱讀原本一千多行的 App.jsx，而不是從第一行一路看到最後一行。
main.jsx 是做什麼的？
重構之後我也發現自己其實不太清楚 main.jsx 的角色，所以又問了 Gemini。
我才知道 main.jsx 是 React 的 Entry Point（進入點），主要負責將 App.jsx 掛載到 HTML 裡的 root 節點。
簡單來說：
main.jsx → 載入 App.jsx → 掛載到 HTML 的 root → 顯示網頁
向去猜測。
在這邊也貼一下最後成果，今天主要是程式碼的分類，所以跟第十天的不會差太多
最後成果:

總結:
今天最大的收穫是學會程式碼重構和元件拆分，也開始知道如何從結構去閱讀一個大型 React 專案。