Tất cả câu hỏi

Đá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: "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: "const MyComponent = () => { const dispatch = useDispatch(); return <div>My Component</div>; };". useDispatch là hook của React Redux, phải GỌI nó ở cấp cao nhất của function component để nhận về hàm dispatch của store, sau đó dùng dispatch(action) trong các hàm xử lý sự kiện để gửi action tới reducer. Phương án viết "dispatch = useDispatch;" thiếu cặp ngoặc gọi hàm, nên biến dispatch chỉ giữ chính hàm hook chứ không phải hàm dispatch của store, gọi dispatch(action) về sau là gọi hook sai chỗ. Phương án viết "const dispatch = dispatch()" gọi một biến ngay trong câu khai báo chính nó; hằng const còn ở vùng chết tạm thời (temporal dead zone) nên ném ReferenceError, và cũng không hề dùng useDispatch. Phương án hiển thị "My Component with {dispatch}" lấy được dispatch đúng cách nhưng lại nhúng một hàm vào JSX làm nội dung con; React không render được hàm và sẽ cảnh báo, nên đó không phải cách dùng useDispatch đúng.

Đáp án đúng: "<Route> ". Trong React Router v6, mỗi thẻ Route khai báo một tuyến (route) gồm path là đường dẫn cần khớp và element là component hiển thị khi khớp, các Route được đặt trong Routes để thư viện chọn ra tuyến phù hợp. "<Router> " là bộ định tuyến bao ngoài cung cấp ngữ cảnh lịch sử điều hướng (BrowserRouter, HashRouter là các biến thể của nó); nó cần có nhưng không khai báo tuyến cụ thể nào. "<Link> " tạo liên kết điều hướng tới một đường dẫn mà không tải lại trang; nó dẫn người dùng tới một route chứ không định nghĩa route. "<Navigation> " không phải component của React Router; thư viện có Navigate để chuyển hướng bằng mã và NavLink cho liên kết có trạng thái đang chọn.

Đáp án đúng: "<Route path="/users/:id" element={ <User /> } />". Trong React Router v6, một đoạn đường dẫn bắt đầu bằng dấu hai chấm là tham số động (dynamic segment): đường dẫn /users/123 khớp với mẫu này và giá trị 123 được gán cho tham số id; bên trong component User, ta lấy nó bằng hook useParams, nhận object có id là chuỗi "123". "<Route path="/users?id" element={ <User /> } />" sai vì phần sau dấu hỏi là query string, React Router không dùng nó để so khớp đường dẫn, nên mẫu này không bắt được /users/123. "<Route path="/users/{id}" element={ <User /> } />" sai vì cặp ngoặc nhọn là cú pháp tham số của framework khác như ASP.NET, còn React Router coi đây là chữ thường cần khớp nguyên văn. "<Route path="/users/#id" element={ <User /> } />" sai vì dấu thăng mở đầu phần hash của URL, không phải ký hiệu tham số trong path.