Tất cả câu hỏi

Đáp án đúng: "import React from 'react'; import Button from 'react-bootstrap/Button'; function Demo() {

return ( <Button variant="primary">Primary Button</Button> );

} export default Demo;". Component Button phải được import từ react-bootstrap/Button rồi dùng đúng tên viết hoa Button, có thẻ mở và thẻ đóng bao lấy nội dung; khi đó prop variant="primary" được React-Bootstrap đổi thành lớp btn btn-primary và chữ Primary Button hiện trên nút màu xanh. Phương án chứa "<Button variant="primary">);" sai cú pháp JSX: thẻ mở Button không có thẻ đóng mà cũng không tự đóng, nên trình biên dịch báo lỗi ngay. Phương án chứa "

<button variant="primary"> Primary Button</button>

" dùng thẻ button HTML viết thường chứ không phải component đã import, nên variant chỉ là thuộc tính lạ và nút hiện ra không có kiểu Bootstrap. Phương án chứa "<button variant="primary"/> " vừa là thẻ HTML thường vừa tự đóng, không có chữ bên trong, nên chỉ ra một nút trống không kiểu dáng.

Đáp án đúng: "

<Container> <Row> <Col sm={
  12
}
md={
  4
}
>1 of 4</Col> <Col sm={
  12
}
md={
  4
}
>2 of 4</Col> <Col sm={
  12
}
md={
  4
}
>3 of 4</Col> </Row> </Container>

". Grid của React-Bootstrap theo mobile-first: sm={12} nghĩa là từ breakpoint sm (576px) mỗi cột chiếm đủ 12/12 phần nên ba cột xếp chồng dọc, còn md={4} nghĩa là từ md (768px) mỗi cột chiếm 4/12 nên ba cột nằm ngang trên một hàng; dưới 576px, Col không khai báo xs cũng rộng hết hàng. Như vậy ba cột xếp dọc trên màn nhỏ và thành ba cột trên màn vừa trở lên. Phải nói thẳng: phương án chứa "

<Col sm={
  4
}
>1 of 3</Col>

" cũng xếp dọc nếu màn nhỏ được hiểu là dưới 576px, nhưng nó cho ba cột nằm ngang ngay từ mốc sm nên không giữ được bố cục dọc ở màn sm mà câu hỏi nhắm tới. Phương án chứa "<Col>1 of 3</Col> " để Col tự chia đều, ba cột luôn nằm ngang ở mọi kích thước. Phương án chứa "

<Col md={
  12
}
>1 of 4</Col>

" cho mỗi cột rộng đủ hàng ở mọi kích thước nên luôn xếp dọc, kể cả màn lớn. Chữ 1 of 4 bên trong Col chỉ là nội dung hiển thị đánh số lệch, không ảnh hưởng bố cục.

Đáp án đúng: "Use the <Route> component with nested <Route> components". Trong React Router v6, tuyến lồng nhau được khai báo bằng cách đặt các Route con bên trong một Route cha; path của Route con được nối tiếp vào path của cha, và component của Route cha đặt Outlet ở chỗ muốn hiển thị nội dung của tuyến con đang khớp. "Utilize the <Switch> component to handle nested routes" sai vì Switch là component của React Router v5 và đã bị thay bằng Routes ở v6; hơn nữa Switch chỉ chọn tuyến đầu tiên khớp chứ không tự tạo cấu trúc lồng. "Implement a routing table using an array of route objects" chỉ đúng trong hoàn cảnh khác: v6 cho khai báo mảng đối tượng có thuộc tính children qua useRoutes hoặc createBrowserRouter, nhưng câu hỏi hỏi cách định nghĩa cấu trúc lồng bên trong component cha bằng JSX, và cách được dạy là Route lồng Route. "Direct routes using query parameters in URL path names" sai vì query string (phần sau dấu ?) chỉ mang dữ liệu đọc bằng useSearchParams, không tham gia khớp tuyến nên không tạo được cấu trúc lồng.