Tất cả câu hỏi
Ngân hàng câu hỏi trắc nghiệm có giải thích chi tiết.
3.100/18.817 câuCòn 15.717
3081How would you use the “useState” hook to toggle the value of a boolean variable “isActive”?4 lựa chọn
Aconst [isActive, setIsActive] = useState(false); setIsActive(!isActive);
Bconst isActive = useState(false); isActive = !isActive;
Cconst isActive = false; setIsActive(!isActive);
Dconst [isActive] = useState(!false);
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "const [isActive, setIsActive] = useState(false); setIsActive(!isActive);". useState trả về một mảng hai phần tử, giá trị state hiện tại và hàm set để đổi nó, và destructuring mảng đặt tên cho cả hai. Gọi setIsActive(!isActive) báo React lưu giá trị mới rồi render lại component, lúc đó isActive mang giá trị đã đảo; khi đảo nhiều lần liên tiếp nên dùng dạng cập nhật theo giá trị trước setIsActive(prev => !prev). "const isActive = useState(false); isActive = !isActive;" sai hai lần: isActive lúc này là cả mảng chứ không phải boolean, và gán lại một hằng const sẽ ném TypeError; hơn nữa sửa biến trực tiếp không khiến React render lại. "const isActive = false; setIsActive(!isActive);" sai vì isActive chỉ là biến thường, còn setIsActive chưa từng được khai báo nên báo ReferenceError. "const [isActive] = useState(!false);" chỉ khởi tạo isActive bằng true và bỏ mất hàm set, nên không có cách nào đảo giá trị về sau.
3082[Using Bootstrap] How does the for attribute in the <label> element work, and why is it important in forms?
(4 lựa chọncó code
<label for="exampleFormControlInput1" class="form-label">Email address</label>)
AIt styles the label based on form control types
BIt links the label to the form control via the control's id, improving accessibility
CIt is used for adding inline form validation
DIt triggers JavaScript events when the form is submitted
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "It links the label to the form control via the control's id, improving accessibility". Thuộc tính for của thẻ label nhận đúng giá trị id của ô nhập, ở đây là exampleFormControlInput1; trình duyệt nối hai phần tử nên bấm vào nhãn thì con trỏ nhảy vào ô, và trình đọc màn hình đọc nhãn khi người dùng vào ô, tăng khả năng tiếp cận (accessibility). Trong JSX của React thuộc tính này viết là htmlFor vì for là từ khoá của JavaScript. "It styles the label based on form control types" sai vì kiểu chữ của nhãn do lớp form-label của Bootstrap đảm nhiệm. "It is used for adding inline form validation" nhầm: kiểm tra dữ liệu dùng required, pattern hoặc lớp is-invalid với invalid-feedback. "It triggers JavaScript events when the form is submitted" sai vì sự kiện gửi form được bắt bằng onSubmit trên thẻ form, không qua thuộc tính của nhãn.
3083What is a React component?4 lựa chọn
AA JavaScript class or function that returns a React element.
BA function that handles HTTP requests in a web application.
CA backend server that serves data to a frontend application.
DA UI library for building mobile applications.
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "A JavaScript class or function that returns a React element.". Component là đơn vị xây dựng giao diện của React: hoặc là hàm JavaScript nhận props và trả về JSX, tức React element mô tả thứ cần hiện, hoặc là class kế thừa React.Component có phương thức render trả về element; React gọi chúng để dựng cây giao diện, và nhiều component ghép lại thành cả trang. Phương án "A function that handles HTTP requests in a web application." mô tả hàm xử lý request ở phía máy chủ như route handler của Express. Phương án "A backend server that serves data to a frontend application." là vai trò của server API, nằm ngoài React. Phương án "A UI library for building mobile applications." nói về cả một thư viện, gần với React Native, trong khi component chỉ là một mảnh nhỏ bên trong ứng dụng.
AThe Grid component allows you to define a flexible grid system with rows and columns that automatically adjusts based on the screen size.
BThe Grid component provides pre-built responsive layouts that you can directly use in your application.
CThe Grid component automatically resizes and repositions the elements based on the available space.
DThe Grid component helps in aligning the elements vertically and horizontally on the page.
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "The Grid component allows you to define a flexible grid system with rows and columns that automatically adjusts based on the screen size.". Hệ lưới của React-Bootstrap mô phỏng hệ lưới 12 cột của Bootstrap: khung ngoài (phiên bản cũ gọi là Grid, phiên bản mới là Container) chứa các hàng Row, mỗi hàng chia thành các cột Col; ta khai báo số cột chiếm ở từng điểm ngắt như xs, md, lg, nên cùng một bố cục có thể xếp chồng trên điện thoại và nằm ngang trên màn hình rộng. Phát biểu "provides pre-built responsive layouts that you can directly use" sai vì lưới không đưa ra bố cục làm sẵn; ta tự sắp hàng và cột. Phát biểu "automatically resizes and repositions the elements based on the available space" sai vì lưới không tự quyết vị trí; phần tử chỉ đổi chỗ theo đúng quy tắc cột ta đã khai báo cho từng điểm ngắt. Phát biểu "helps in aligning the elements vertically and horizontally on the page" chỉ là phần phụ: căn chỉnh có thể làm qua lưới hoặc các lớp tiện ích flex, nhưng mục đích chính của lưới là chia cột đáp ứng theo cỡ màn hình.
3085Which of the following JSX statements is correct?4 lựa chọn
AYou can return multiple JSX elements without a wrapper
BJSX expressions must be enclosed in double quotes ""
CYou must use “className” instead of “class” in JSX
DYou cannot embed JavaScript expressions in JSX
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "You must use “className” instead of “class” in JSX". JSX được biên dịch thành JavaScript, mà class là từ khoá dành riêng để khai báo lớp, nên thuộc tính lớp CSS trên thẻ phải viết là className, tương ứng với thuộc tính className của DOM; tương tự for trên label được viết là htmlFor. "You can return multiple JSX elements without a wrapper" sai vì mỗi biểu thức JSX trả về một giá trị, nhiều phần tử cùng cấp phải được bọc trong một phần tử cha hoặc Fragment. "JSX expressions must be enclosed in double quotes """ sai vì biểu thức JavaScript trong JSX được đặt trong ngoặc nhọn, ví dụ {user.name}; nháy kép chỉ dùng cho giá trị thuộc tính là chuỗi cố định. "You cannot embed JavaScript expressions in JSX" sai vì nhúng biểu thức qua ngoặc nhọn chính là tính năng cốt lõi của JSX, từ biến, phép tính tới lời gọi hàm và toán tử ba ngôi.
AIt immediately executes the next function
BIt pauses the execution until the Promise resolves or rejects
CIt logs the result to the console
DIt converts a string into a Promise
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "It pauses the execution until the Promise resolves or rejects". Bên trong hàm async, await tạm dừng phần còn lại của chính hàm đó cho tới khi Promise đứng sau nó ổn định: fulfilled thì biểu thức await trả về giá trị, rejected thì ném lỗi để try/catch bắt; trong lúc chờ, luồng chính không bị chặn mà vẫn xử lý sự kiện và việc khác. "It immediately executes the next function" ngược với await, chạy tiếp ngay mà không chờ là hành vi khi không dùng await. "It logs the result to the console" sai, ghi ra console là việc của console.log, await không in gì. "It converts a string into a Promise" sai về mục đích: await một giá trị không phải Promise thì nó chỉ bọc giá trị đó bằng Promise.resolve rồi trả lại đúng giá trị ấy, không nhằm chuyển chuỗi thành Promise.
A2 + 2
B[2 + 2]
C{2 + 2}
D(2 + 2)
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "{2 + 2}". JSX cho phép nhúng bất kỳ biểu thức JavaScript nào bằng cách đặt nó trong cặp ngoặc nhọn; viết biểu thức đó giữa thẻ h1 mở và đóng thì React tính rồi hiển thị số 4. Ngoặc nhọn là tín hiệu duy nhất để JSX chuyển từ chế độ văn bản sang chế độ JavaScript. "2 + 2" viết trần giữa hai thẻ chỉ là văn bản, màn hình hiện nguyên chuỗi 2 + 2 chứ không tính ra 4. "[2 + 2]" cũng là văn bản thường trong JSX, hiện cả dấu ngoặc vuông; ngoặc vuông chỉ tạo mảng khi đã nằm trong ngoặc nhọn. "(2 + 2)" tương tự hiện nguyên văn kèm ngoặc tròn; ngoặc tròn chỉ nhóm biểu thức trong JavaScript, không phải cú pháp nhúng của JSX.
AIt reduces the overall bundle size of an application by removing unused code.
BIt enhances the user experience by providing a visual fallback while components are being loaded.
CIt simplifies the process of fetching data from an API.
DIt improves initial load performance by deferring non-critical component loading.
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "It improves initial load performance by deferring non-critical component loading.". React.lazy kết hợp lệnh import() động khiến bundler tách component thành một tệp (chunk) riêng chỉ tải khi component đó được render lần đầu, nhờ vậy gói JavaScript ban đầu nhỏ hơn và trang hiện nhanh hơn. "It reduces the overall bundle size of an application by removing unused code." gần nhưng sai cơ chế: lazy không loại bỏ mã thừa, đó là việc của tree shaking; mã vẫn còn nguyên, chỉ dời sang tải sau, nên tổng kích thước ứng dụng không giảm. "It enhances the user experience by providing a visual fallback while components are being loaded." mô tả việc của Suspense qua prop fallback, không phải lợi ích của bản thân lazy. "It simplifies the process of fetching data from an API." không liên quan, vì lazy chỉ nạp mã component chứ không gọi API lấy dữ liệu.
ATo make code easier to debug
BTo allow reusing the same code across multiple components
CTo increase the performance of the app
DTo handle state management in a centralized manner
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "To allow reusing the same code across multiple components". Component tái sử dụng (reusable component) là component được viết tổng quát, nhận dữ liệu khác nhau qua props, như một Button hay Card dùng ở nhiều trang; lợi ích chính là viết logic và giao diện một lần rồi dùng lại ở nhiều nơi, giảm lặp mã, và sửa một chỗ thì mọi nơi dùng nó đều đổi theo. Phương án "To make code easier to debug" là lợi ích phụ có thật khi mã gọn và ít lặp, nhưng không phải mục đích chính của việc tách component dùng lại. Phương án "To increase the performance of the app" sai vì tái sử dụng không tự làm ứng dụng nhanh hơn; hiệu năng phụ thuộc số lần render và các kỹ thuật như memo. Phương án "To handle state management in a centralized manner" là việc của Redux hay Context, không phải của component tái sử dụng.
3090Which two recent additions to React allow the complete integration of code splitting into applications?4 lựa chọn
AuseState() and useEffect()
BReact.memo() and useCallback()
Clazy() API and Suspense components
DReactDOM.createRoot() and BrowserRouter.
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "lazy() API and Suspense components". Code splitting (tách mã) là chia bundle thành nhiều phần để chỉ tải phần cần dùng; React hỗ trợ điều này trực tiếp bằng hàm lazy, nhận một hàm gọi import động và trả về component chỉ tải mã khi được render lần đầu, cùng component Suspense hiển thị giao diện fallback trong lúc phần mã đó đang tải, nhờ vậy việc tách mã được tích hợp trọn vào cây component. "useState() and useEffect()" sai vì hai hook này quản lý state và side effect, không liên quan đến việc tải mã theo yêu cầu. "React.memo() and useCallback()" sai vì đây là công cụ tối ưu hiệu năng render, giúp bỏ qua lần render lại hoặc giữ nguyên tham chiếu hàm, không chia nhỏ bundle. "ReactDOM.createRoot() and BrowserRouter." sai vì createRoot là API khởi tạo gốc ứng dụng của React 18 còn BrowserRouter là component của React Router; dù hay dùng chung với lazy theo từng route, chúng không tự tách mã.
3091How do you wrap a lazy component with Suspense in React?4 lựa chọn
AUsing the wrap prop of the Suspense component
BUsing the fallback prop of the Suspense component
CUsing the lazy prop of the Suspense component
DUsing the component prop of the Suspense component
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "Using the fallback prop of the Suspense component". Component tạo bằng React.lazy cần được đặt bên trong Suspense; trong lúc gói mã của nó còn đang tải, React hiển thị thứ được truyền qua prop fallback (thường là chữ đang tải hay một spinner), tải xong thì thay bằng component thật. Ví dụ ngắn: <Suspense fallback={ <Spinner /> }> bao quanh component lười. "Using the wrap prop of the Suspense component" sai vì Suspense không có prop wrap; việc bọc chính là đặt component lười làm con của Suspense. "Using the lazy prop of the Suspense component" sai vì lazy là hàm của React dùng để khai báo component lười, không phải prop của Suspense. "Using the component prop of the Suspense component" sai vì Suspense không nhận component qua prop; component lười được truyền dưới dạng children.
3092How do you create a modal in Bootstrap?4 lựa chọn
ABy using the <modal> HTML element.
BBy applying the .modal class to the container element.
CBy using the .modal class along with the data-bs-toggle="modal" attribute.
DBy using JavaScript to dynamically create and show modal elements.
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "By using the .modal class along with the data-bs-toggle="modal" attribute.". Modal trong Bootstrap 5 là một khối div mang lớp .modal, bên trong có .modal-dialog, .modal-content, .modal-header, .modal-body, và được mở bằng plugin JavaScript có sẵn: nút kích hoạt mang thuộc tính data-bs-toggle với giá trị modal cùng data-bs-target trỏ tới id của modal, Bootstrap tự gắn sự kiện, hiện lớp phủ nền và quản lý tiêu điểm. "By using the <modal> HTML element." sai vì HTML không có thẻ modal; thẻ gốc gần nhất là dialog nhưng Bootstrap không dựa vào nó. "By applying the .modal class to the container element." chưa đủ, chỉ có lớp mà không có thuộc tính kích hoạt hay lời gọi JavaScript thì modal vẫn ẩn mãi. "By using JavaScript to dynamically create and show modal elements." là cách tự dựng tay; Bootstrap cho mở modal bằng lời gọi bootstrap.Modal rồi show, nhưng cách tạo modal tiêu chuẩn vẫn là cấu trúc .modal kèm data-bs-toggle.
3093What would happen if you didn’t include the4 lựa chọncó code
class="form-control" in your <input> element?AThe input would not be submitted with the form
BThe input would fail client-side validation
CThe input field would revert to the browser's default styles
DThe input field would become non-responsive
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "The input field would revert to the browser's default styles". form-control là lớp CSS của Bootstrap, chỉ lo phần trình bày: cho ô nhập rộng 100%, có đệm, viền bo góc, cỡ chữ đồng bộ và viền sáng khi focus; trong JSX thuộc tính này viết là className. Bỏ lớp đi thì thẻ input vẫn hoạt động y nguyên, chỉ mang kiểu mặc định của trình duyệt. "The input would not be submitted with the form" sai vì việc gửi theo form phụ thuộc thuộc tính name và việc nằm trong thẻ form, không phụ thuộc lớp CSS. "The input would fail client-side validation" sai vì kiểm tra hợp lệ phía client dựa trên các thuộc tính như required, type, pattern. "The input field would become non-responsive" sai vì ô vẫn nhận nhập liệu bình thường, nó chỉ không còn tự giãn hết chiều rộng như khi có form-control.
ATo display static text content
BTo provide a complex form validation mechanism
CTo extend the Collapse plugin for toggling visibility of content sections
DTo manage application-wide routing
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "To extend the Collapse plugin for toggling visibility of content sections". Accordion trong Bootstrap được dựng trên plugin Collapse: mỗi mục có một nút tiêu đề, bấm vào thì phần thân mở ra hoặc thu lại, và khi các mục gắn data-bs-parent vào cùng một khung thì mở mục này sẽ tự đóng mục khác, giúp gom nhiều khối nội dung vào ít chỗ. "To display static text content" sai vì Accordion là thành phần tương tác ẩn hiện nội dung, không phải để hiển thị văn bản tĩnh. "To provide a complex form validation mechanism" nhầm sang kiểm tra form, việc mà Bootstrap làm bằng lớp was-validated, is-invalid và invalid-feedback. "To manage application-wide routing" không liên quan, vì điều hướng trang trong ứng dụng là việc của thư viện định tuyến như React Router.
3095According to the "Render and Commit" process, what are the three steps involved in displaying a component on screen?4 lựa chọn
AInitializing state, updating props, and re-rendering.
BTriggering a render, rendering the component, and committing to the DOM.
CCreating JSX, adding styles, and responding to events
DDefining a component, mounting, and unmounting.
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "Triggering a render, rendering the component, and committing to the DOM.". Tài liệu React mô tả quá trình đưa giao diện lên màn hình gồm ba bước: kích hoạt (trigger) một lần render, xảy ra lần đầu khi gọi root.render hoặc khi state của component hay của tổ tiên được cập nhật; render, tức React gọi hàm component để tính xem giao diện nên trông thế nào; và commit, tức React áp các thay đổi vào DOM, lần đầu thì gắn toàn bộ nút bằng appendChild, các lần sau chỉ sửa chỗ khác biệt. Sau commit trình duyệt mới vẽ lại màn hình. Phương án "Initializing state, updating props, and re-rendering." chỉ liệt kê vài sự kiện trong vòng đời, không phải ba bước của quy trình. Phương án "Creating JSX, adding styles, and responding to events" là các việc lập trình viên làm khi viết component. Phương án "Defining a component, mounting, and unmounting." trộn việc định nghĩa component với hai mốc vòng đời gắn và gỡ, không nói gì tới render và commit.
3096How does state behave when it is set in a React component, as described by "State as a snapshot"?4 lựa chọn
AIt immediately changes the state variable you already have.
BIt only changes the state after the component unmounts
CSetting it does not change the state variable you already have, but instead triggers a re-render
DIt directly modifies the DOM without triggering a re-render
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "Setting it does not change the state variable you already have, but instead triggers a re-render". Theo mô hình state as a snapshot (state là ảnh chụp) trong tài liệu React, mỗi lần render, component nhận giá trị state cố định của lần render đó; gọi hàm đặt state không sửa biến đang có mà yêu cầu React render lại, và chỉ ở lần render kế tiếp useState mới trả về giá trị mới, nên nếu ghi log biến ngay sau khi đặt state thì vẫn thấy giá trị cũ. "It immediately changes the state variable you already have." sai vì biến trong lần render hiện tại là hằng của ảnh chụp đó, không bị đổi ngay. "It only changes the state after the component unmounts" sai vì sau khi component bị gỡ thì không còn render nữa; state mới có hiệu lực ngay ở lần render tiếp theo khi component vẫn đang hiển thị. "It directly modifies the DOM without triggering a re-render" sai vì đặt state không chạm trực tiếp vào DOM; React render lại, so sánh qua Virtual DOM rồi mới cập nhật DOM thật.
3097Why use React-Bootstrap?4 lựa chọn
AIt easier to manage the state as updates are made using React’s state.
BIt is faster and more efficient than other UI libraries.
CIt is compatible with all browsers and devices.
DIt is developed by Facebook and has a large community support.
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "It easier to manage the state as updates are made using React’s state.". React-Bootstrap viết lại các component của Bootstrap thành component React thuần, không dùng jQuery hay mã JavaScript của Bootstrap thao tác DOM trực tiếp; việc mở Modal, thu gọn Collapse hay chọn Tab được điều khiển bằng prop như show và một biến state của React, nên trạng thái giao diện nằm cùng chỗ với state của ứng dụng và không bị hai bên giành nhau sửa DOM. "It is faster and more efficient than other UI libraries." sai vì không có bảo đảm nào như vậy, hiệu năng tuỳ cách dùng chứ không phải lý do để chọn thư viện này. "It is compatible with all browsers and devices." sai vì Bootstrap chỉ hỗ trợ các trình duyệt hiện đại, không phải mọi trình duyệt cũ. "It is developed by Facebook and has a large community support." sai vì React do Facebook (nay là Meta) phát triển, còn Bootstrap ra đời ở Twitter và React-Bootstrap do cộng đồng duy trì.
3098Which component would you use to display grouped content such as a title, body text, and an image in React-Bootstrap?4 lựa chọn
A<Container>
B<Form>
C<Card>
D<Alert>
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "<Card> ". Trong React-Bootstrap, Card là hộp nội dung có viền, gồm các phần con như Card.Img cho ảnh, Card.Body làm thân, Card.Title cho tiêu đề và Card.Text cho đoạn văn, nên rất hợp để gom tiêu đề, nội dung và hình ảnh của một mục thành một khối, ví dụ thẻ sản phẩm hay thẻ bài viết. "<Container> " là khung bố cục ngoài cùng của hệ lưới, canh lề và giới hạn bề ngang trang, không mang sẵn cấu trúc tiêu đề, thân, ảnh. "<Form> " dùng để dựng biểu mẫu nhập liệu cùng Form.Group, Form.Control. "<Alert> " hiển thị thông báo phản hồi ngắn như thành công, cảnh báo, lỗi, không phải hộp trình bày nội dung theo nhóm.
3099Fill in the blank in this ES6 code to correctly use destructuring assignment for extracting 'name' and 'age' from an object:4 lựa chọncó code
const person = { name: 'John', age: 30 };
const { _______ } = person;
console.log(name, age);Aname, age
Bprop: name, prop: age
Ckey: name, value: age
Dextract: name, extract: age
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "name, age". Destructuring assignment với object lấy thuộc tính theo tên khoá: viết const { name, age } = person tạo hai biến name và age nhận giá trị person.name và person.age, nên console.log in ra John 30. Thứ tự trong ngoặc không quan trọng vì khớp theo tên; muốn đặt tên biến khác thì viết khoá, dấu hai chấm rồi tên mới, ví dụ name: fullName. "prop: name, prop: age" vẫn đúng cú pháp nhưng nghĩa là lấy thuộc tính prop của person gán cho cả biến name lẫn age, mà person không có khoá prop nên cả hai thành undefined. "key: name, value: age" tương tự đọc person.key và person.value, đều không tồn tại nên in undefined undefined. "extract: name, extract: age" cũng chỉ đọc khoá extract không có trong person; ES6 không có từ khoá extract nào cho destructuring.
3100What is JSX?4 lựa chọn
AA JavaScript library for building user interfaces
BA syntax extension for JavaScript that allows you to write HTML-like code
CA React component that renders HTML elements
DA JavaScript framework for building web applications
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "A syntax extension for JavaScript that allows you to write HTML-like code". JSX (JavaScript XML) là phần mở rộng cú pháp cho JavaScript, cho phép viết đoạn trông giống HTML ngay trong mã; trình biên dịch như Babel chuyển mỗi thẻ JSX thành lời gọi React.createElement hoặc hàm jsx, nên trình duyệt chỉ thấy JavaScript thường. "A JavaScript library for building user interfaces" là định nghĩa của chính React, một thư viện xây dựng giao diện người dùng. "A React component that renders HTML elements" sai vì JSX không phải component; component là hàm hoặc lớp trả về JSX. "A JavaScript framework for building web applications" không đúng vì JSX chỉ là cú pháp, không phải framework; ví dụ framework cho ứng dụng web là Angular hay Next.js.