Câu hỏi: FER202 Phát triển web Front-End với React – Bộ ôn tập cuối kỳ số 2

Đáp án đúng: "function App() {

return (<div><Header /><MainContent /><Footer /></div>);

}". Composition (kết hợp) nghĩa là dựng component lớn bằng cách ghép các component nhỏ làm con của nó; bố cục trang thông thường đọc từ trên xuống nên App phải render Header trước, rồi MainContent ở giữa, cuối cùng là Footer, và JSX hiển thị các con đúng theo thứ tự chúng được viết trong thẻ div. Cả bốn đoạn mã đều hợp lệ về cú pháp và đều là composition, chỉ khác nhau ở thứ tự: đoạn chứa "

<Header />
<Footer />
<MainContent />

" đặt chân trang lên trước nội dung chính; đoạn chứa "

<div>
  <MainContent />
  <Header />

" đẩy nội dung chính lên trên cả đầu trang; đoạn chứa "

<div>
  <Footer />
  <Header />

" đưa chân trang lên vị trí đầu tiên. Ba bố cục đó vẫn chạy được nhưng sai yêu cầu đầu trang, nội dung chính rồi chân trang.

Đáp án đúng: "You must always wrap JSX in a single root element". Mỗi biểu thức JSX được biên dịch thành một lời gọi hàm tạo phần tử, mà một hàm hay câu return chỉ trả về được một giá trị, nên các phần tử cùng cấp phải nằm trong một phần tử gốc; khi không muốn thêm thẻ div thừa vào DOM thì dùng Fragment, viết gọn là <> và </>. "You can use multiple root elements without any wrapping" sai vì đó chính là điều JSX không cho phép, trả về hai thẻ liền nhau mà không bọc sẽ báo lỗi biên dịch. "JSX tags can be self-closing only for non-void elements" sai vì trong JSX mọi thẻ đều có thể tự đóng, và các thẻ rỗng (void element) như img, br, input còn bắt buộc phải tự đóng, ví dụ <img />. "JSX does not support attributes like className" sai vì className chính là thuộc tính JSX dùng thay cho class của HTML, do class là từ khoá dành riêng trong JavaScript.

Đáp án đúng: "

<Container> <Row> <Col xs={
  6
}
>2 of 3 (wider)</Col> </Row> </Container>

". Lưới của React-Bootstrap đi theo đúng thứ bậc của Bootstrap: Container ngoài cùng tạo khung căn lề và padding, Row bên trong tạo hàng flex và bù lề âm, rồi Col là ô cột nằm trong Row, chia hàng thành 12 phần; Col xs={6} chiếm sáu phần tức nửa hàng từ màn nhỏ nhất trở lên. Đoạn mã đúng giữ trọn thứ tự Container, Row, Col. Phương án có mảnh "(wider)</Col> </Container>" đảo ngược hai tầng ngoài, đặt Container trong Row nên cột không còn là con trực tiếp của hàng và lưới vỡ bố cục. Phương án "

<Row>
  <Container>
    <Column>1 of 3</Column>
  </Container>
</Row>

" vừa đảo tầng vừa dùng Column, một component không tồn tại trong React-Bootstrap (tên đúng là Col). Phương án có mảnh "

<Row xs={
  6
}
>2 of 3 (wider)</Row>

" đặt Row bên trong Column, sai cả tên component lẫn thứ bậc, và xs trên Row chỉ quy định số cột mỗi hàng chứ không đặt độ rộng ô như xs của Col.