<   React測驗   >

免費免註冊，彰化一整天線上測驗：http://exam.bestdaylong.com/test8709.htm

	(		)	1.	使用 .map() 產生列表時，React 會要求每個 <li> 必須加上什麼屬性？(1)name (2)key (3)id (4)index
	(		)	2.	在 React Router 中，若要建立一個不會造成整頁重新整理的超連結，應使用哪個元件？(1)<a href="..."> (2)<Redirect to="..."> (3)<Route path="..."> (4)<Link to="...">
	(		)	3.	在 React 中，父元件傳遞資料給子元件，是透過什麼機制？(1)Event (2)State (3)Props (4)API
	(		)	4.	關於 React 的 JSX 語法，下列敘述何者錯誤？(1)只能有一個根元素 (Parent Element) (2)可以直接使用 if-else 語句在 {} 裡面 (3)class 屬性必須寫成 className (4)標籤必須有閉合 (如 <input />)
	(		)	5.	在 React 中要新增一個項目到陣列 state (如 todos)，且不破壞原陣列，應使用什麼語法？(1)todos.push(newItem) (2)setTodos(todos + newItem) (3)todos.add(newItem) (4)setTodos([...todos, newItem])
	(		)	6.	在 React 中，若要修改 state 的數值 (例如 count)，必須怎麼做？(1)修改 DOM 元素 document.getElementById (2)直接寫 count = count + 1 (3)直接寫 count++ (4)使用 setCount(count + 1)
	(		)	7.	關於 Netlify 的 CI/CD 自動部署，下列敘述何者正確？(1)必須自己在終端機輸入 npm run build 才能更新 (2)每次都要手動拖拉資料夾上傳 (3)只要連結 GitHub，執行 git push 後 Netlify 會自動更新網站 (4)必須付費才能使用自動更新
	(		)	8.	Git 中，哪一個指令是用來將修改過的檔案加入「暫存區 (Staging Area)」？(1)git push (2)git status (3)git add . (4)git commit
	(		)	9.	若要將本地端的 Git 存檔推送到 GitHub 遠端倉庫，應使用什麼指令？(1)git fetch (2)git remote (3)git push (4)git pull
	(		)	10.	使用 Tailwind CSS 時，若要設定文字為紅色且字體加粗，應寫在哪個屬性？(1)class="text-red-500 font-bold" (2)css="text-red-500 font-bold" (3)style="text-red-500 font-bold" (4)className="text-red-500 font-bold"
	(		)	11.	在現代 JavaScript 中，哪種宣告方式具有「區塊作用域 (Block Scope)」且宣告後不能重新賦值？(1)var (2)const (3)let (4)function
	(		)	12.	若 const user = { name: 'React' }，如何正確使用解構賦值取出 name？(1)const name = user(name); (2)const name = user; (3)const [name] = user; (4)const { name } = user;
	(		)	13.	將 function add(a, b) { return a + b; } 改寫為箭頭函式簡寫，下列何者正確？(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;
	(		)	14.	下列哪一行程式碼正確建立了 useState？(1)const [count, setCount] = useState(0); (2)const count = useState(0); (3)const {count, setCount} = useState(0); (4)const [count, setCount] = useState = 0;
	(		)	15.	使用 fetch 串接 API 時，通常會搭配哪個 React Hook 來在畫面載入時觸發請求？(1)useContext (2)useState (3)useRef (4)useEffect
	(		)	16.	若出現 "useRoutes() may be used only in the context of a Router component" 錯誤，通常是忘了什麼？(1)在 main.jsx 用 <BrowserRouter> 包裹 <App /> (2)在 App.jsx 匯入 Routes (3)忘記寫 <Route> (4)安裝 react-router-dom
	(		)	17.	Tailwind CSS 中，p-4 代表什麼意思？(1)Padding 1rem (通常是 16px) (2)Percentage 4% (3)Font size 4px (4)Position 4
	(		)	18.	若希望 useEffect 在變數 count 改變時才執行，依賴陣列應如何設定？(1)[] (2)null (3)[count] (4)useEffect 不支援此功能
	(		)	19.	在 React 專案中，npm run build 指令的主要用途是什麼？(1)啟動開發伺服器 (2)安裝所有套件 (3)打包並壓縮程式碼，產生 dist 資料夾以供正式上線 (4)刪除專案
	(		)	20.	關於 useEffect(() => { ... }, [])，當依賴陣列 (Dependency Array) 為空陣列 [] 時，Effect 何時執行？(1)只在元件第一次渲染 (Mount) 後執行一次 (2)當任何 state 改變時 (3)永遠不會執行 (4)每次畫面更新時

詳解:
1.key 屬性幫助 React 識別哪些項目改變、新增或刪除，對於效能優化至關重要。
2.<Link> 元件會攔截點擊事件，進行客戶端路由切換，避免瀏覽器重新發送請求導致頁面閃爍；<a> 標籤會導致頁面重整。
3.Props (Properties) 是 React 中父元件單向傳遞資料給子元件的標準方式。
4.JSX 的 {} 內只能放表達式 (Expression)，不能放 if-else 語句，通常使用三元運算子 ? : 代替。
5.必須保持不可變性 (Immutability)，使用展開運算子 ... 複製舊陣列並加入新項目是標準做法。push 會修改原陣列。
6.React 遵循單向資料流與不可變性，直接修改變數不會觸發畫面更新，必須使用 set 函式。
7.Netlify 連結 GitHub 後，會監聽你的 Repository，一旦有新的 Push，它會自動在雲端執行 Build 並發布。
8.git add 是第一步，將檔案變更加入暫存；commit 是存檔；push 是上傳；status 是檢查狀態。
9.push (推) 是將本地提交上傳到遠端；pull (拉) 是從遠端下載更新。
10.React 中使用 className 來指定 CSS 類別，Tailwind 的樣式即是透過類別名稱套用。
11.const 宣告常數，具有區塊作用域且不能被重新賦值；let 雖有區塊作用域但可重新賦值；var 則容易造成全域汙染。
12.物件解構使用花括號 {}，且變數名稱需對應屬性名稱；陣列解構才使用方括號 []。
13.當箭頭函式只有一行且直接回傳時，可以省略 {} 和 return。選項 2 少了 return，選項 4 多參數時需要括號。
14.useState 回傳一個陣列，第一項是數值，第二項是設定函式，因此使用陣列解構 []。
15.useEffect 適合處理「副作用」，例如發送網路請求、訂閱事件或手動修改 DOM。
16.這是最常見的錯誤，React Router 的功能必須在 Router Context 下才能運作，通常是在入口檔案設定。
17.p 代表 Padding (內距)，數字 4 在 Tailwind 預設比例中代表 1rem (約 16px)。
18.將變數放入依賴陣列 [count] 中，React 就會監聽該變數，一旦變動就執行 Effect。
19.npm run dev 是開發用；npm run build 是為了生產環境 (Production) 做最佳化打包。
20.空陣列 [] 代表沒有依賴任何變數，因此只會在元件掛載 (Mount) 時執行一次，常用於 API 呼叫。