| (2) | 1.在現代 JavaScript 中，哪種宣告方式具有「區塊作用域 (Block Scope)」且宣告後不能重新賦值？ (1) |
| (1) | var |
| (2) | const |
| (3) | let |
| (4) | function |
| | |
| 詳解: | const 宣告常數，具有區塊作用域且不能被重新賦值；let 雖有區塊作用域但可重新賦值；var 則容易造成全域汙染。 |
| (1) | 2.將 function add(a, b) { return a + b; } 改寫為箭頭函式簡寫，下列何者正確？ (2) |
| (1) | const add = (a, b) => a + b; |
| (2) | const add = (a, b) => { a + b } |
| (3) | const add = (a, b) => return a + b; |
| (4) | const add = a, b => a + b; |
| | |
| 詳解: | 當箭頭函式只有一行且直接回傳時，可以省略 {} 和 return。選項 2 少了 return，選項 4 多參數時需要括號。 |
| (3) | 3.若 const user = { name: 'React' }，如何正確使用解構賦值取出 name？ (3) |
| (1) | const name = user; |
| (2) | const [name] = user; |
| (3) | const { name } = user; |
| (4) | const name = user(name); |
| | |
| 詳解: | 物件解構使用花括號 {}，且變數名稱需對應屬性名稱；陣列解構才使用方括號 []。 |
| (4) | 4.關於 React 的 JSX 語法，下列敘述何者錯誤？ (4) |
| (1) | class 屬性必須寫成 className |
| (2) | 標籤必須有閉合 (如 <input />) |
| (3) | 只能有一個根元素 (Parent Element) |
| (4) | 可以直接使用 if-else 語句在 {} 裡面 |
| | |
| 詳解: | JSX 的 {} 內只能放表達式 (Expression)，不能放 if-else 語句，通常使用三元運算子 ? : 代替。 |
| (2) | 5.在 React 中，父元件傳遞資料給子元件，是透過什麼機制？ (5) |
| (1) | State |
| (2) | Props |
| (3) | API |
| (4) | Event |
| | |
| 詳解: | Props (Properties) 是 React 中父元件單向傳遞資料給子元件的標準方式。 |
| (1) | 6.下列哪一行程式碼正確建立了 useState？ (6) |
| (1) | const [count, setCount] = useState(0); |
| (2) | const count = useState(0); |
| (3) | const {count, setCount} = useState(0); |
| (4) | const [count, setCount] = useState = 0; |
| | |
| 詳解: | useState 回傳一個陣列，第一項是數值，第二項是設定函式，因此使用陣列解構 []。 |
| (3) | 7.在 React 中，若要修改 state 的數值 (例如 count)，必須怎麼做？ (7) |
| (1) | 直接寫 count = count + 1 |
| (2) | 直接寫 count++ |
| (3) | 使用 setCount(count + 1) |
| (4) | 修改 DOM 元素 document.getElementById |
| | |
| 詳解: | React 遵循單向資料流與不可變性，直接修改變數不會觸發畫面更新，必須使用 set 函式。 |
| (4) | 8.使用 .map() 產生列表時，React 會要求每個 <li> 必須加上什麼屬性？ (8) |
| (1) | id |
| (2) | index |
| (3) | name |
| (4) | key |
| | |
| 詳解: | key 屬性幫助 React 識別哪些項目改變、新增或刪除，對於效能優化至關重要。 |
| (2) | 9.關於 useEffect(() => { ... }, [])，當依賴陣列 (Dependency Array) 為空陣列 [] 時，Effect 何時執行？ (9) |
| (1) | 每次畫面更新時 |
| (2) | 只在元件第一次渲染 (Mount) 後執行一次 |
| (3) | 當任何 state 改變時 |
| (4) | 永遠不會執行 |
| | |
| 詳解: | 空陣列 [] 代表沒有依賴任何變數，因此只會在元件掛載 (Mount) 時執行一次，常用於 API 呼叫。 |
| (3) | 10.若希望 useEffect 在變數 count 改變時才執行，依賴陣列應如何設定？ (10) |
| (1) | [] |
| (2) | null |
| (3) | [count] |
| (4) | useEffect 不支援此功能 |
| | |
| 詳解: | 將變數放入依賴陣列 [count] 中，React 就會監聽該變數，一旦變動就執行 Effect。 |
| (1) | 11.在 React 中要新增一個項目到陣列 state (如 todos)，且不破壞原陣列，應使用什麼語法？ (11) |
| (1) | setTodos([...todos, newItem]) |
| (2) | todos.push(newItem) |
| (3) | setTodos(todos + newItem) |
| (4) | todos.add(newItem) |
| | |
| 詳解: | 必須保持不可變性 (Immutability)，使用展開運算子 ... 複製舊陣列並加入新項目是標準做法。push 會修改原陣列。 |
| (2) | 12.使用 Tailwind CSS 時，若要設定文字為紅色且字體加粗，應寫在哪個屬性？ (12) |
| (1) | style="text-red-500 font-bold" |
| (2) | className="text-red-500 font-bold" |
| (3) | class="text-red-500 font-bold" |
| (4) | css="text-red-500 font-bold" |
| | |
| 詳解: | React 中使用 className 來指定 CSS 類別，Tailwind 的樣式即是透過類別名稱套用。 |
| (3) | 13.Tailwind CSS 中，p-4 代表什麼意思？ (13) |
| (1) | Font size 4px |
| (2) | Position 4 |
| (3) | Padding 1rem (通常是 16px) |
| (4) | Percentage 4% |
| | |
| 詳解: | p 代表 Padding (內距)，數字 4 在 Tailwind 預設比例中代表 1rem (約 16px)。 |
| (1) | 14.在 React Router 中，若要建立一個不會造成整頁重新整理的超連結，應使用哪個元件？ (14) |
| (1) | <Link to="..."> |
| (2) | <a href="..."> |
| (3) | <Redirect to="..."> |
| (4) | <Route path="..."> |
| | |
| 詳解: | <Link> 元件會攔截點擊事件，進行客戶端路由切換，避免瀏覽器重新發送請求導致頁面閃爍；<a> 標籤會導致頁面重整。 |
| (2) | 15.若出現 "useRoutes() may be used only in the context of a Router component" 錯誤，通常是忘了什麼？ (15) |
| (1) | 安裝 react-router-dom |
| (2) | 在 main.jsx 用 <BrowserRouter> 包裹 <App /> |
| (3) | 在 App.jsx 匯入 Routes |
| (4) | 忘記寫 <Route> |
| | |
| 詳解: | 這是最常見的錯誤，React Router 的功能必須在 Router Context 下才能運作，通常是在入口檔案設定。 |
| (3) | 16.使用 fetch 串接 API 時，通常會搭配哪個 React Hook 來在畫面載入時觸發請求？ (16) |
| (1) | useState |
| (2) | useRef |
| (3) | useEffect |
| (4) | useContext |
| | |
| 詳解: | useEffect 適合處理「副作用」，例如發送網路請求、訂閱事件或手動修改 DOM。 |
| (1) | 17.Git 中，哪一個指令是用來將修改過的檔案加入「暫存區 (Staging Area)」？ (17) |
| (1) | git add . |
| (2) | git commit |
| (3) | git push |
| (4) | git status |
| | |
| 詳解: | git add 是第一步，將檔案變更加入暫存；commit 是存檔；push 是上傳；status 是檢查狀態。 |
| (4) | 18.若要將本地端的 Git 存檔推送到 GitHub 遠端倉庫，應使用什麼指令？ (18) |
| (1) | git pull |
| (2) | git fetch |
| (3) | git remote |
| (4) | git push |
| | |
| 詳解: | push (推) 是將本地提交上傳到遠端；pull (拉) 是從遠端下載更新。 |
| (2) | 19.關於 Netlify 的 CI/CD 自動部署，下列敘述何者正確？ (19) |
| (1) | 每次都要手動拖拉資料夾上傳 |
| (2) | 只要連結 GitHub，執行 git push 後 Netlify 會自動更新網站 |
| (3) | 必須付費才能使用自動更新 |
| (4) | 必須自己在終端機輸入 npm run build 才能更新 |
| | |
| 詳解: | Netlify 連結 GitHub 後，會監聽你的 Repository，一旦有新的 Push，它會自動在雲端執行 Build 並發布。 |
| (3) | 20.在 React 專案中，npm run build 指令的主要用途是什麼？ (20) |
| (1) | 啟動開發伺服器 |
| (2) | 安裝所有套件 |
| (3) | 打包並壓縮程式碼，產生 dist 資料夾以供正式上線 |
| (4) | 刪除專案 |
| | |
| 詳解: | npm run dev 是開發用；npm run build 是為了生產環境 (Production) 做最佳化打包。 |
