React測驗@測驗結果-彰化一整天測驗中心,考卷編號:895615

錯的答案(錯7題):

(3)

5.Tailwind CSS 中，p-4 代表什麼意思？ (13)

(1)

Padding 1rem (通常是 16px)

(2)

Percentage 4%

(3)

I don't know

(4)

Font size 4px

(5)

Position 4

詳解:

p 代表 Padding (內距)，數字 4 在 Tailwind 預設比例中代表 1rem (約 16px)。

(4)

7.Git 中，哪一個指令是用來將修改過的檔案加入「暫存區 (Staging Area)」？ (17)

(1)

I don't know

(2)

git add .

(3)

git commit

(4)

git push

(5)

git status

詳解:

git add 是第一步，將檔案變更加入暫存；commit 是存檔；push 是上傳；status 是檢查狀態。

(3)

8.在 React Router 中，若要建立一個不會造成整頁重新整理的超連結，應使用哪個元件？ (14)

(1)

(2)

(3)

I don't know

(4)

(5)

詳解:

<Link> 元件會攔截點擊事件，進行客戶端路由切換，避免瀏覽器重新發送請求導致頁面閃爍；<a> 標籤會導致頁面重整。

(2)

13.若希望 useEffect 在變數 count 改變時才執行，依賴陣列應如何設定？ (10)

(1)

useEffect 不支援此功能

(2)

I don't know

(3)

[]

(4)

null

(5)

[count]

詳解:

將變數放入依賴陣列 [count] 中，React 就會監聽該變數，一旦變動就執行 Effect。

(2)

14.若 const user = { name: 'React' }，如何正確使用解構賦值取出 name？ (3)

(1)

const name = user;

(2)

const [name] = user;

(3)

const { name } = user;

(4)

const name = user(name);

(5)

I don't know

詳解:

物件解構使用花括號 {}，且變數名稱需對應屬性名稱；陣列解構才使用方括號 []。

(4)

17.將 function add(a, b) { return a + b; } 改寫為箭頭函式簡寫，下列何者正確？ (2)

(1)

const add = a, b => a + b;

(2)

I don't know

(3)

const add = (a, b) => a + b;

(4)

const add = (a, b) => { a + b }

(5)

const add = (a, b) => return a + b;

詳解:

當箭頭函式只有一行且直接回傳時，可以省略 {} 和 return。選項 2 少了 return，選項 4 多參數時需要括號。

(4)

20.若出現 "useRoutes() may be used only in the context of a Router component" 錯誤，通常是忘了什麼？ (15)

(1)

在 main.jsx 用 <BrowserRouter> 包裹 <App />

(2)

在 App.jsx 匯入 Routes

(3)

忘記寫 <Route>

(4)

I don't know

(5)

安裝 react-router-dom

詳解:

這是最常見的錯誤，React Router 的功能必須在 Router Context 下才能運作，通常是在入口檔案設定。

考卷的結果:

(4)

1關於 Netlify 的 CI/CD 自動部署，下列敘述何者正確？ (19)

(1)

必須自己在終端機輸入 npm run build 才能更新

(2)

I don't know

(3)

每次都要手動拖拉資料夾上傳

(4)

只要連結 GitHub，執行 git push 後 Netlify 會自動更新網站

(5)

必須付費才能使用自動更新

詳解:

Netlify 連結 GitHub 後，會監聽你的 Repository，一旦有新的 Push，它會自動在雲端執行 Build 並發布。

(4)

2在現代 JavaScript 中，哪種宣告方式具有「區塊作用域 (Block Scope)」且宣告後不能重新賦值？ (1)

(1)

function

(2)

I don't know

(3)

var

(4)

const

(5)

let

詳解:

const 宣告常數，具有區塊作用域且不能被重新賦值；let 雖有區塊作用域但可重新賦值；var 則容易造成全域汙染。

(1)

3使用 .map() 產生列表時，React 會要求每個 <li> 必須加上什麼屬性？

(8)

(1)

key

(2)

I don't know

(3)

(4)

index

(5)

name

詳解:

key 屬性幫助 React 識別哪些項目改變、新增或刪除，對於效能優化至關重要。

(4)

4在 React 中要新增一個項目到陣列 state (如 todos)，且不破壞原陣列，應使用什麼語法？

(11)

(1)

setTodos(todos + newItem)

(2)

todos.add(newItem)

(3)

I don't know

(4)

setTodos([...todos, newItem])

(5)

todos.push(newItem)

詳解:

必須保持不可變性 (Immutability)，使用展開運算子 ... 複製舊陣列並加入新項目是標準做法。push 會修改原陣列。

(3)

5Tailwind CSS 中，p-4 代表什麼意思？ (13)

(1)

Padding 1rem (通常是 16px)

(2)

Percentage 4%

(3)

I don't know

(4)

Font size 4px

(5)

Position 4

詳解:

p 代表 Padding (內距)，數字 4 在 Tailwind 預設比例中代表 1rem (約 16px)。

(3)

6下列哪一行程式碼正確建立了 useState？ (6)

(1)

const [count, setCount] = useState = 0;

(2)

I don't know

(3)

const [count, setCount] = useState(0);

(4)

const count = useState(0);

(5)

const {count, setCount} = useState(0);

詳解:

useState 回傳一個陣列，第一項是數值，第二項是設定函式，因此使用陣列解構 []。

(4)

7Git 中，哪一個指令是用來將修改過的檔案加入「暫存區 (Staging Area)」？ (17)

(1)

I don't know

(2)

git add .

(3)

git commit

(4)

git push

(5)

git status

詳解:

git add 是第一步，將檔案變更加入暫存；commit 是存檔；push 是上傳；status 是檢查狀態。

(3)

8在 React Router 中，若要建立一個不會造成整頁重新整理的超連結，應使用哪個元件？ (14)

(1)

(2)

(3)

I don't know

(4)

(5)

詳解:

<Link> 元件會攔截點擊事件，進行客戶端路由切換，避免瀏覽器重新發送請求導致頁面閃爍；<a> 標籤會導致頁面重整。

(3)

9在 React 專案中，npm run build 指令的主要用途是什麼？ (20)

(1)

啟動開發伺服器

(2)

安裝所有套件

(3)

打包並壓縮程式碼，產生 dist 資料夾以供正式上線

(4)

刪除專案

(5)

I don't know

詳解:

npm run dev 是開發用；npm run build 是為了生產環境 (Production) 做最佳化打包。

(5)

10關於 useEffect(() => { ... }, [])，當依賴陣列 (Dependency Array) 為空陣列 [] 時，Effect 何時執行？ (9)

(1)

當任何 state 改變時

(2)

永遠不會執行

(3)

I don't know

(4)

每次畫面更新時

(5)

只在元件第一次渲染 (Mount) 後執行一次

詳解:

空陣列 [] 代表沒有依賴任何變數，因此只會在元件掛載 (Mount) 時執行一次，常用於 API 呼叫。

(1)

11關於 React 的 JSX 語法，下列敘述何者錯誤？ (4)

(1)

可以直接使用 if-else 語句在 {} 裡面

(2)

I don't know

(3)

class 屬性必須寫成 className

(4)

標籤必須有閉合 (如 <input />)

(5)

只能有一個根元素 (Parent Element)

詳解:

JSX 的 {} 內只能放表達式 (Expression)，不能放 if-else 語句，通常使用三元運算子 ? : 代替。

(2)

12若要將本地端的 Git 存檔推送到 GitHub 遠端倉庫，應使用什麼指令？ (18)

(1)

git remote

(2)

git push

(3)

I don't know

(4)

git pull

(5)

git fetch

詳解:

push (推) 是將本地提交上傳到遠端；pull (拉) 是從遠端下載更新。

(2)

13若希望 useEffect 在變數 count 改變時才執行，依賴陣列應如何設定？ (10)

(1)

useEffect 不支援此功能

(2)

I don't know

(3)

[]

(4)

null

(5)

[count]

詳解:

將變數放入依賴陣列 [count] 中，React 就會監聽該變數，一旦變動就執行 Effect。

(2)

14若 const user = { name: 'React' }，如何正確使用解構賦值取出 name？ (3)

(1)

const name = user;

(2)

const [name] = user;

(3)

const { name } = user;

(4)

const name = user(name);

(5)

I don't know

詳解:

物件解構使用花括號 {}，且變數名稱需對應屬性名稱；陣列解構才使用方括號 []。

(5)

15使用 fetch 串接 API 時，通常會搭配哪個 React Hook 來在畫面載入時觸發請求？ (16)

(1)

useContext

(2)

I don't know

(3)

useState

(4)

useRef

(5)

useEffect

詳解:

useEffect 適合處理「副作用」，例如發送網路請求、訂閱事件或手動修改 DOM。

(5)

16使用 Tailwind CSS 時，若要設定文字為紅色且字體加粗，應寫在哪個屬性？

(12)

(1)

class="text-red-500 font-bold"

(2)

css="text-red-500 font-bold"

(3)

I don't know

(4)

style="text-red-500 font-bold"

(5)

className="text-red-500 font-bold"

詳解:

React 中使用 className 來指定 CSS 類別，Tailwind 的樣式即是透過類別名稱套用。

(4)

17將 function add(a, b) { return a + b; } 改寫為箭頭函式簡寫，下列何者正確？ (2)

(1)

const add = a, b => a + b;

(2)

I don't know

(3)

const add = (a, b) => a + b;

(4)

const add = (a, b) => { a + b }

(5)

const add = (a, b) => return a + b;

詳解:

當箭頭函式只有一行且直接回傳時，可以省略 {} 和 return。選項 2 少了 return，選項 4 多參數時需要括號。

(2)

18在 React 中，若要修改 state 的數值 (例如 count)，必須怎麼做？ (7)

(1)

直接寫 count++

(2)

使用 setCount(count + 1)

(3)

修改 DOM 元素 document.getElementById

(4)

I don't know

(5)

直接寫 count = count + 1

詳解:

React 遵循單向資料流與不可變性，直接修改變數不會觸發畫面更新，必須使用 set 函式。

(2)

19在 React 中，父元件傳遞資料給子元件，是透過什麼機制？ (5)

(1)

State

(2)

Props

(3)

API

(4)

Event

(5)

I don't know

詳解:

Props (Properties) 是 React 中父元件單向傳遞資料給子元件的標準方式。

(4)

20若出現 "useRoutes() may be used only in the context of a Router component" 錯誤，通常是忘了什麼？ (15)

(1)

在 main.jsx 用 <BrowserRouter> 包裹 <App />

(2)

在 App.jsx 匯入 Routes

(3)

忘記寫 <Route>

(4)

I don't know

(5)

安裝 react-router-dom

詳解:

這是最常見的錯誤，React Router 的功能必須在 Router Context 下才能運作，通常是在入口檔案設定。

勤學智慧小語:【13.善友很重要，遇到困難時相互安慰、砥礪、提升，而不是停留在吐苦水而已。】
1小時內上線人數：484 人

錯的答案(錯7題):

考卷的結果:

您有要使用NordVPN嗎?可以透過https://joymall.co/3FKHS?uid1=exam&uid2=txt&uid3=url 連結去購買會有分潤支持網站營運