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
Đá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.
CIt helps solve the "callback hell" problem by allowing chains of asynchronous operations.
DIt ensures data is always instantaneously available.
Lời giải
Đáp án đúng: "It helps solve the "callback hell" problem by allowing chains of asynchronous operations.". Promise là đối tượng đại diện cho kết quả tương lai của một thao tác bất đồng bộ, ở một trong ba trạng thái pending, fulfilled, rejected; mỗi lần gọi then trả về một Promise mới nên các bước có thể nối thành chuỗi phẳng và gom lỗi về một catch, thay vì lồng callback trong callback thành hình kim tự tháp khó đọc (callback hell). "It allows direct modification of the DOM" sai vì sửa DOM là việc của DOM API hoặc React, Promise chỉ quản lý luồng bất đồng bộ. "It makes synchronous code asynchronous." sai vì bọc mã đồng bộ trong Promise không làm nó chạy song song; hàm executor vẫn chạy đồng bộ ngay lập tức, chỉ các callback của then được hoãn lại. "It ensures data is always instantaneously available." sai vì Promise sinh ra chính là để xử lý dữ liệu CHƯA có ngay, kết quả đến sau và có thể thất bại.
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
Đá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.
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
Đá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.
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
Đá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.
Đá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.
ATo reduce the initial load time of an application by splitting JavaScript bundles.
BTo combine multiple React components into a single bundle.
CTo handle all the state management in React applications.
DTo make the app compatible with server-side rendering.
Lời giải
Đáp án đúng: "To reduce the initial load time of an application by splitting JavaScript bundles.". Mặc định công cụ build gộp toàn bộ mã vào một gói lớn; code splitting (tách mã) chia gói đó thành nhiều chunk, trong React thực hiện bằng import() động và React.lazy kèm Suspense, nên trình duyệt chỉ tải phần mã của màn hình đang mở, các phần khác tải sau khi cần, nhờ đó lần tải đầu nhanh hơn. "To combine multiple React components into a single bundle." là việc gộp gói thông thường, chính là thứ code splitting chia nhỏ lại. "To handle all the state management in React applications." thuộc về useState, Context hay Redux, tách mã không quản lý state. "To make the app compatible with server-side rendering." sai vì SSR là kỹ thuật render HTML trên máy chủ; tách mã dùng được cùng SSR nhưng không nhằm làm ứng dụng tương thích với SSR.
BTo allow events to be shared across multiple components simultaneously
CTo save memory resources by reusing synthetic event wrappers, thereby avoiding performance issues related to garbage collection.
DTo automatically prevent default browser actions for events.
Lời giải
Đáp án đúng: "To save memory resources by reusing synthetic event wrappers, thereby avoiding performance issues related to garbage collection.". React bọc sự kiện gốc của trình duyệt trong SyntheticEvent (sự kiện tổng hợp); ở React 16 trở về trước, các đối tượng này được gom vào một pool (bể dùng lại): sau khi hàm xử lý chạy xong, React xoá trắng thuộc tính rồi tái sử dụng đối tượng cho sự kiện sau, đỡ phải tạo đối tượng mới liên tục và giảm áp lực cho bộ thu gom rác. Hệ quả là không đọc được event sau await hay setTimeout nếu không gọi event.persist(); từ React 17 cơ chế này đã bị bỏ vì trình duyệt hiện đại không còn được lợi đáng kể. "To make event handlers asynchronous" sai vì pooling không đổi cách gọi hàm xử lý, chúng vẫn chạy đồng bộ. "To allow events to be shared across multiple components simultaneously" sai vì một đối tượng chỉ được dùng lại tuần tự sau khi sự kiện trước xong, không dùng chung cùng lúc. "To automatically prevent default browser actions for events." sai vì muốn chặn hành vi mặc định vẫn phải tự gọi event.preventDefault().
AA component that has a higher visual hierarchy than others.
BA function that takes a component as an argument and returns a new component with enhanced functionality
CA component that only renders other components without any logic of its own
DA built-in React component for advanced routing
Lời giải
Đáp án đúng: "A function that takes a component as an argument and returns a new component with enhanced functionality". Higher-Order Component (HOC, component bậc cao) là một mẫu tái sử dụng logic trong React: thay vì là component, nó là một hàm nhận component đầu vào và trả về component mới bọc ngoài, bổ sung props hoặc hành vi như kiểm tra đăng nhập, nạp dữ liệu, kết nối store; ví dụ quen thuộc là hàm connect của react-redux hay withRouter của React Router v5. "A component that has a higher visual hierarchy than others." sai vì chữ higher-order mượn từ khái niệm hàm bậc cao trong lập trình hàm, không nói về vị trí hiển thị. "A component that only renders other components without any logic of its own" sai vì đó chỉ là một component bao bọc thông thường, trong khi HOC tồn tại chính để thêm logic. "A built-in React component for advanced routing" sai vì React không có HOC dựng sẵn cho định tuyến; định tuyến do thư viện React Router đảm nhận.
Đáp án đúng: "PascalCase". Tên component React phải bắt đầu bằng chữ hoa, vì JSX coi thẻ viết thường như div, span là phần tử HTML có sẵn, còn thẻ viết hoa như UserProfile mới là component tự định nghĩa; do đó quy ước phổ biến là đặt cả tên component lẫn tên tệp theo PascalCase (mỗi từ viết hoa chữ đầu, không dấu nối), ví dụ tệp UserProfile.jsx chứa component UserProfile, để dễ tìm và khớp với lệnh import. Phương án "snake_case" dùng gạch dưới, quen thuộc trong Python hay tên cột cơ sở dữ liệu, không phải quy ước cho tệp component. Phương án "camelCase" dành cho tên biến, hàm và hook như useFetch; đặt tên component kiểu này thì JSX hiểu nhầm thành thẻ HTML. Phương án "UPPER_CASE" là quy ước cho hằng số như API_URL.
</ul> );". Lần theo mã: filter giữ phần tử có length lớn hơn 5 nên Apple (đúng 5 ký tự) bị loại, còn Banana, Cherry, Avocado; sau đó map biến mỗi chuỗi thành một thẻ li có key là chính chuỗi đó và nội dung là item.toUpperCase(), nên danh sách hiện BANANA, CHERRY, AVOCADO. Lọc trước rồi biến đổi sau là đúng vì điều kiện lọc dựa trên chuỗi gốc. Phương án chứa ".map(item =>
Lời giải
<li>{
item
}</li>
)" lọc đúng nhưng không gọi toUpperCase nên chữ giữ nguyên, lại thiếu key nên React cảnh báo. Phương án chứa "</li>).filter(item => item.length > 5)" map trước tạo ra phần tử React rồi mới lọc; phần tử React không có length nên điều kiện luôn sai và danh sách rỗng. Phương án chứa "items.map(item => item.toUpperCase()).filter" lọc ra đúng ba chuỗi viết hoa nhưng không bọc trong thẻ li, nên chúng hiện dính liền thành một dòng chữ chứ không thành các mục danh sách.
Đáp án đúng: "git branch branch-name; git checkout branch-name". Lệnh git branch kèm tên tạo một nhánh mới trỏ vào commit hiện tại nhưng vẫn đứng ở nhánh cũ; git checkout kèm tên chuyển HEAD và thư mục làm việc sang nhánh vừa tạo. Hai bước này còn gộp được thành git checkout -b kèm tên nhánh, hoặc git switch -c ở các bản Git mới. "git new branch-name; git change branch-name" sai vì Git không có lệnh
Lời giải
new hay change."git make branch-name; git switch branch-name"
có nửa sau hợp lệ vì git switch dùng để chuyển nhánh, nhưng git make không phải lệnh Git nên nhánh không được tạo và lệnh chuyển cũng thất bại. "git create branch-name; git select branch-nam" sai vì create và select đều không phải lệnh của Git.
Đáp án đúng: "npm install react-bootstrap bootstrap". React-Bootstrap viết lại các thành phần Bootstrap thành component React nhưng không đi kèm CSS, nên phải cài cả gói react-bootstrap lẫn gói bootstrap, rồi import tệp bootstrap/dist/css/bootstrap.min.css một lần ở tệp gốc như index.js hoặc main.jsx. "npm install bootstrap-react" sai tên gói, đó không phải thư viện React-Bootstrap chính thức. "npm init react-bootstrap" sai vì npm init dùng để khởi tạo dự án mới theo một bộ khởi tạo, không cài thư viện vào dự án sẵn có. "npm install bootstrap" chỉ cài CSS và JavaScript thuần của Bootstrap, thiếu các component React như Button, Modal, Card mà React-Bootstrap cung cấp.
AWhen you want to connect the Redux store to a React component.
BWhen you want to manage actions in the Redux application.
CWhen you want to split a reducer into smaller reducers.
DWhen you want to use Redux DevTools to track the state.
Lời giải
Đáp án đúng: "When you want to split a reducer into smaller reducers.". Khi state lớn dần, gom mọi logic vào một reducer sẽ rối, nên ta tách thành nhiều reducer nhỏ, mỗi cái quản một nhánh state như user hay cart, rồi dùng combineReducers ghép chúng thành reducer gốc: nó nhận một đối tượng ánh xạ tên khoá sang reducer, khi có action thì gọi từng reducer với đúng nhánh state của nó và ghép kết quả lại; configureStore của Redux Toolkit cũng gọi nó khi ta truyền một đối tượng cho reducer. "When you want to connect the Redux store to a React component." sai vì việc nối store với component làm bằng Provider cùng useSelector, useDispatch hay hàm connect. "When you want to manage actions in the Redux application." sai vì action được tạo bằng action creator hay createSlice, combineReducers không định nghĩa action nào. "When you want to use Redux DevTools to track the state." sai vì DevTools được bật qua tiện ích trình duyệt và cấu hình store, configureStore tự bật sẵn, không cần combineReducers.
Đáp án đúng: "useFetch". Câu hỏi tìm cái KHÔNG phải hook dựng sẵn của React. React không cung cấp useFetch; tên này chỉ xuất hiện khi ta tự viết custom hook (hook tự định nghĩa) gói fetch cùng useState và useEffect, hoặc khi dùng thư viện bên ngoài, nên nó không thuộc React. "useState" là hook dựng sẵn để khai báo state trong function component, đổi state sẽ gây render lại, nên không được chọn. "useEffect" là hook dựng sẵn để chạy side effect như gọi API, đăng ký sự kiện sau khi render, kèm hàm dọn dẹp, nên cũng không được chọn. "useRef" là hook dựng sẵn trả về object có thuộc tính current tồn tại suốt vòng đời component, dùng giữ tham chiếu DOM hoặc giá trị không gây render lại, nên cũng là hook của React và không phải đáp án.
ASelectors are responsible for dispatching actions
BSelectors are used to modify the Redux store directly
CSelectors are pure functions that derive specific data from the Redux store
DSelectors are only used in React class components
Lời giải
Đáp án đúng: "Selectors are pure functions that derive specific data from the Redux store". Selector là hàm nhận toàn bộ state của store và trả về phần dữ liệu cần dùng, có thể kèm tính toán dẫn xuất như lọc danh sách việc chưa xong; vì là hàm thuần (pure function), cùng state vào thì cùng kết quả ra và không gây tác dụng phụ, nên dễ kiểm thử, dùng lại qua useSelector và ghi nhớ kết quả bằng createSelector. Phương án "Selectors are responsible for dispatching actions" nhầm với dispatch, việc gửi action là của hàm lấy từ useDispatch. Phương án "Selectors are used to modify the Redux store directly" sai vì selector chỉ đọc; state chỉ đổi qua reducer khi có action. Phương án "Selectors are only used in React class components" sai vì selector là hàm JavaScript thường, dùng được với connect ở class component lẫn useSelector ở function component, thậm chí dùng ngoài React.
Đáp án đúng: "To indicate the status of the HTTP request". Mã phản hồi HTTP (status code) là con số máy chủ gửi kèm mỗi phản hồi để cho biết yêu cầu kết thúc ra sao: nhóm 2xx là thành công (200, 201), 3xx là chuyển hướng, 4xx là lỗi phía client như 400, 401, 404, còn 5xx là lỗi phía máy chủ. Ứng dụng React đọc response.status hoặc response.ok khi dùng fetch để quyết định hiển thị dữ liệu hay thông báo lỗi. "To manage state within a component" sai vì state trong component do useState hoặc Redux quản lý, không liên quan giao thức HTTP. "To handle server-side logic" nhầm: logic phía máy chủ là mã chạy trên server, mã trạng thái chỉ là kết quả nó trả về. "To manage routing in a React application" sai vì định tuyến trong ứng dụng React là việc của React Router, diễn ra ở trình duyệt.
CTo trigger functions in response to user interactions like clicking, hovering, or focusing form inputs
DTo manage component lifecycle methods.
Lời giải
Đáp án đúng: "To trigger functions in response to user interactions like clicking, hovering, or focusing form inputs". Event handler (hàm xử lý sự kiện) là hàm truyền vào prop sự kiện viết kiểu camelCase như onClick, onMouseEnter, onFocus, onChange; React gọi nó khi người dùng tương tác và truyền vào một đối tượng sự kiện tổng hợp (SyntheticEvent). Bên trong handler thường gọi hàm set để đổi state, từ đó giao diện cập nhật. "To define the component's initial state" là việc của giá trị khởi tạo truyền cho useState, hay constructor ở class component. "To style JSX elements." là việc của className, style hoặc CSS module. "To manage component lifecycle methods." thuộc về componentDidMount, componentDidUpdate ở class component hoặc useEffect ở function component, không phải của handler sự kiện.
Đáp án đúng: "import React, { lazy, Suspense } from 'react'; const MyComponent = lazy(() => import('./MyComponent')); function App() {
Lời giải
return(<Suspense fallback={<div>Loading...</div>}
> <MyComponent /> </Suspense> ); } export default App;". Hàm lazy nhận một hàm trả về Promise từ import() động, React chỉ tải chunk của MyComponent khi nó render lần đầu; trong lúc chờ, Suspense bao ngoài hiển thị phần tử truyền qua prop fallback, ở đây là dòng Loading..., tải xong mới thay bằng component thật. Phương án gán "const MyComponent = import('./MyComponent');" bỏ lazy, nên MyComponent là một Promise chứ không phải component, dùng làm thẻ JSX sẽ lỗi. Phương án viết "lazy('./MyComponent')" truyền chuỗi đường dẫn thay cho hàm gọi import(), lazy không tự tải được, đồng thời "<div fallback=" chỉ là thuộc tính vô nghĩa trên thẻ div, không có Suspense nên không có giao diện chờ. Phương án dùng "
Lời giải
<React.Suspense><MyComponent />
" nạp lười đúng nhưng thiếu prop fallback, nên trong lúc tải không hiện gì, trái với yêu cầu hiển thị fallback.
C<Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
D<CardHeader>Card Title</CardHeader>
Lời giải
Đáp án đúng gồm hai ý: "<Card.Title>Card Title</Card.Title> " và "<Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>". React-Bootstrap gắn các phần của thẻ vào component Card dưới dạng thuộc tính con, viết có dấu chấm: Card.Body là vùng nội dung, bên trong đặt Card.Title cho tiêu đề và Card.Text cho đoạn chữ, ngoài ra có Card.Img, Card.Header, Card.Footer. "
" sai vì component ảnh của thẻ tên là Card.Img, không có CardImage, và dù viết đúng thì nó hiển thị ảnh chứ không phải tiêu đề hay chữ. "<CardHeader>Card Title</CardHeader> " sai vì component đúng tên là Card.Header, và nó tạo dải đầu thẻ tách khỏi phần thân, khác với tiêu đề Card.Title nằm trong Card.Body như câu hỏi cần.
