<   React測驗   >

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

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

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