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.
AExplicit configuration in a central routes.json file.
BFile-system routing, where routes are determined by the structure of files
CDynamic route declarations using React Router
DServer-side API endpoints only
Lời giải
Đáp án đúng: "File-system routing, where routes are determined by the structure of files". Next.js định tuyến theo hệ thống tệp (file-system routing): với Pages Router, tệp pages/about.js trở thành đường dẫn /about; với App Router, mỗi thư mục trong app có tệp page.js là một route, thư mục đặt tên trong ngoặc vuông như [id] là đoạn động. "Explicit configuration in a central routes.json file." sai vì Next.js không đọc một tệp cấu hình tuyến trung tâm nào; muốn thêm trang chỉ cần thêm tệp. "Dynamic route declarations using React Router" là cách của ứng dụng React thuần dùng React Router, còn Next.js có bộ định tuyến riêng và tuyến động khai báo bằng tên tệp hoặc thư mục. "Server-side API endpoints only" sai vì API route chỉ là một loại route; các trang giao diện mới là phần chính, và cả hai đều được xác định bằng cấu trúc tệp.
BTo accept an indefinite number of arguments as an array.
CTo handle asynchronous tasks.
DTo destructure arrays.
Lời giải
Đáp án đúng: "To accept an indefinite number of arguments as an array.". Rest parameter viết bằng ba dấu chấm đặt trước tham số cuối, ví dụ function sum(...nums), gom mọi đối số còn lại thành một mảng thật, nhờ đó hàm nhận số lượng đối số tuỳ ý và dùng được map, reduce trên mảng đó, khác với đối tượng arguments kiểu cũ. "To declare variables in the global scope." sai vì phạm vi biến do let, const, var quyết định, không liên quan rest. "To handle asynchronous tasks." nhầm: tác vụ bất đồng bộ được xử lý bằng Promise hay async/await. "To destructure arrays." dễ nhầm vì dấu ba chấm cũng xuất hiện trong phân rã mảng như const [first, ...others] = arr, nhưng đó là rest element trong destructuring; rest parameter là ở danh sách tham số hàm và mục đích là nhận nhiều đối số.
Đáp án đúng: "Render a part of the user interface". React là thư viện xây dựng giao diện người dùng, và component là đơn vị cơ bản của nó: một hàm hoặc lớp nhận props, giữ state nếu cần, rồi trả về JSX mô tả một phần giao diện như nút bấm, thẻ sản phẩm hay cả một trang. Nhiều component lồng nhau tạo nên toàn bộ ứng dụng. "Store data in a database" sai vì React chạy ở trình duyệt, việc lưu vào cơ sở dữ liệu thuộc về backend. "Manage the back-end server logic" sai vì logic server viết bằng Node.js, Express hay ngôn ngữ backend khác, không phải bằng component React. "Handle network security" sai vì bảo mật mạng như HTTPS, tường lửa hay xác thực phía server không phải nhiệm vụ của component giao diện.
Đáp án đúng: "<Button variant="primary">Click Me</Button> ". React-Bootstrap cung cấp component Button, kiểu dáng được chọn qua prop variant với các giá trị như primary, secondary, success, danger, outline-primary; component tự sinh lớp btn btn-primary ở bên dưới. "
" vẫn ra màu primary vì Button mặc định đã có variant primary, nhưng viết lớp tay như vậy là cách của Bootstrap thuần, bỏ qua API của React-Bootstrap và lặp lớp. "
Lời giải
<button class="btn btn-primary">Click Me</button>
" là thẻ HTML thường, lại dùng class thay cho className nên React cảnh báo, không phải component React-Bootstrap. "<PrimaryButton>Click Me</PrimaryButton> " sai vì React-Bootstrap không có component nào tên PrimaryButton.
BA navigate function that can be used to navigate to a new location
CA boolean indicating navigation status
DA string representing the current route.
Lời giải
Đáp án đúng: "A navigate function that can be used to navigate to a new location". Trong React Router v6, useNavigate trả về đúng một hàm, thường đặt tên là navigate; gọi navigate('/home') để chuyển sang đường dẫn mới, navigate(-1) để lùi một bước lịch sử, hoặc truyền thêm tùy chọn replace, state, nên hook này dùng cho điều hướng bằng mã, chẳng hạn sau khi gửi form hay đăng nhập xong. Phương án "An object with navigation methods." mô tả đối tượng history có push, replace của React Router v5 (lấy bằng useHistory), không phải giá trị của useNavigate. Phương án "A boolean indicating navigation status" sai vì muốn biết trạng thái điều hướng thì dùng useNavigation trong data router, còn useNavigate không trả về boolean. Phương án "A string representing the current route." là thông tin lấy được từ useLocation qua thuộc tính pathname, không phải từ useNavigate.
BWrapping the component in the LazyComponent higher-order component
CImporting the component with the lazy keyword
DUsing the createLazyComponent method from the React package
Lời giải
Đáp án đúng: "Using the lazy function from the React library". React cung cấp hàm lazy, nhận một hàm trả về lời gọi import() động, ví dụ const About = lazy(() => import('./About')); kết quả là một component chỉ được tải mã khi được render lần đầu, và phải đặt trong Suspense để có fallback lúc chờ; lazy nên khai báo ở ngoài thân component để không bị tạo lại mỗi lần render. "Wrapping the component in the LazyComponent higher-order component" sai vì React không có component bậc cao (HOC) nào tên LazyComponent. "Importing the component with the lazy keyword" sai vì JavaScript không có từ khoá lazy trong câu lệnh import; lazy là một hàm bình thường được import từ react. "Using the createLazyComponent method from the React package" sai vì React không có phương thức này, tên đúng chỉ là lazy, gọi qua React.lazy hoặc import trực tiếp.
CTo update the store by returning the new state based on the action received
DTo create components dynamically
Lời giải
Đáp án đúng: "To update the store by returning the new state based on the action received". Reducer là hàm thuần (pure function) nhận state hiện tại và action, trả về state mới mà không sửa trực tiếp state cũ; mỗi khi có action được dispatch, store của Redux gọi reducer, lưu kết quả làm state mới và các component đang theo dõi sẽ render lại. "To fetch data from APIs" sai vì gọi API là tác dụng phụ, phải làm trong middleware như redux-thunk hoặc createAsyncThunk của Redux Toolkit; reducer không được có tác dụng phụ. "To dispatch actions to components" nhầm vai: dispatch là hàm của store, component gọi dispatch để gửi action tới reducer chứ reducer không dispatch. "To create components dynamically" không liên quan: tạo component là việc của React, Redux chỉ quản lý state.
Đáp án đúng: "Virtual DOM". Virtual DOM là bản mô tả cây giao diện dưới dạng object JavaScript mà React giữ trong bộ nhớ: mỗi khi state hoặc props đổi, React dựng lại cây ảo, so sánh với cây trước (quá trình reconciliation) rồi chỉ áp những thay đổi cần thiết lên DOM thật, giúp lập trình viên viết giao diện theo kiểu khai báo mà vẫn cập nhật hiệu quả. "Two-way data binding" sai vì React dùng luồng dữ liệu một chiều: dữ liệu đi từ cha xuống con qua props, còn ô nhập muốn đồng bộ phải tự gắn value với state và cập nhật qua onChange; ràng buộc hai chiều là đặc trưng của Angular hay v-model của Vue. "Direct SQL queries" sai vì React là thư viện giao diện chạy trong trình duyệt, không truy vấn cơ sở dữ liệu. "Automatic server deployment" sai vì React không có cơ chế triển khai máy chủ; việc đó thuộc về nền tảng hosting hoặc quy trình CI/CD.
import React,{ useState } from 'react';
function App(){
const [showMessage, setShowMessage]=useState(false);
const toggleMessage =()=>{setShowMessage(!showMessage);};return(<div><button onClick={toggleMessage}>Toggle Message</button>{showMessage &&<p>This is a message!</p>}</div>);}
export default App;
AThe message is displayed.
BThe message is hidden.
CThe state of the component is updated.
DThe component is re-rendered.
Lời giải
Đáp án đúng: "The state of the component is updated.". Lần theo mã: showMessage bắt đầu bằng false; mỗi lần bấm nút, hàm toggleMessage gọi setShowMessage(!showMessage) để đảo giá trị, tức tác động trực tiếp của sự kiện ở mọi lần bấm là cập nhật state của component; sau đó React mới render lại App, và biểu thức showMessage && cho đoạn p hiện ra khi state là true, ẩn đi khi là false. Nói thẳng, câu có nhiều phát biểu đúng một phần: ở lần bấm đầu tiên "The message is displayed." đúng thật, nhưng lần bấm thứ hai thông báo lại bị ẩn, nên nó chỉ đúng ở những lần bấm lẻ; "The message is hidden." chỉ đúng ở những lần bấm chẵn; "The component is re-rendered." cũng xảy ra, nhưng là hệ quả của việc state thay đổi chứ không phải việc handler trực tiếp làm. Vì vậy đáp án chọn điều luôn đúng ở mọi lần bấm và là nguyên nhân của các điều kia: state được cập nhật.
Đáp án đúng: "const add = (a, b) => { return a + b; }". Arrow function (hàm mũi tên) của ES6 gồm danh sách tham số trong ngoặc tròn, mũi tên =>, rồi thân hàm; ở đây thân có ngoặc nhọn nên cần return tường minh, còn viết gọn (a, b) => a + b cũng cho cùng kết quả. "const add = function(a, b) { return a + b; }" là function expression gán vào hằng, chạy đúng nhưng không phải arrow function. "const add => a + b" sai cú pháp: thiếu dấu bằng và thiếu danh sách tham số trước mũi tên, nên JavaScript báo lỗi ngay khi phân tích mã. "function add(a, b) { return a + b; }" là function declaration truyền thống, cũng cộng đúng hai số nhưng không dùng cú pháp mũi tên được hỏi.
BIt tells the function to pause until all variables are declared
CIt makes the function return a Promise
DIt prevents any asynchronous code from running
Lời giải
Đáp án đúng: "It makes the function return a Promise". Từ khóa async đánh dấu hàm bất đồng bộ: hàm đó luôn trả về một Promise, giá trị return được bọc thành Promise resolve với giá trị ấy, còn lỗi ném ra thành Promise reject; bên trong hàm được phép dùng await để tạm dừng chính hàm đó cho tới khi một Promise khác hoàn thành, trong khi phần còn lại của chương trình vẫn chạy tiếp. Phương án "It makes the function execute immediately" sai vì async không đổi thời điểm gọi hàm; hàm chỉ chạy khi được gọi, giống hàm thường. Phương án "It tells the function to pause until all variables are declared" là mô tả không có thật; tạm dừng chỉ xảy ra ở từng chỗ await để chờ Promise, không liên quan tới khai báo biến. Phương án "It prevents any asynchronous code from running" ngược hẳn, vì async sinh ra chính là để viết mã bất đồng bộ dễ đọc như mã tuần tự.
BReact calculates what to render but doesn't change the DOM yet
CSide effects like “useEffect” are executed
DEvent listeners are removed
Lời giải
Đáp án đúng: "React calculates what to render but doesn't change the DOM yet". Quá trình hiển thị của React chia làm pha render và pha commit. Trong pha render, React gọi các hàm component để lấy JSX mới rồi so sánh với cây trước (reconciliation) để biết cần đổi gì; pha này phải thuần, có thể bị ngắt quãng hay chạy lại, nên chưa chạm vào DOM. Chỉ tới pha commit React mới cập nhật DOM, và sau đó mới chạy effect. "The DOM is updated immediately" mô tả pha commit, không phải pha render. "Side effects like “useEffect” are executed" sai vì useEffect chạy sau khi commit xong và trình duyệt đã vẽ, không chạy trong lúc render. "Event listeners are removed" không phải việc của pha render; React gắn sự kiện theo cơ chế ủy quyền ở gốc, và việc dọn dẹp chỉ xảy ra ở pha commit hoặc khi component unmount.
ADirectly by modifying the state object in any component.
BThrough setters that directly update the state.
COnly through actions, with changes made by pure functions that return a new state without mutating the previous one.
DBy calling setState() on the Redux store directly.
Lời giải
Đáp án đúng: "Only through actions, with changes made by pure functions that return a new state without mutating the previous one.". Redux dựa trên ba nguyên tắc: một nguồn sự thật duy nhất (single source of truth) là store, state chỉ đọc nên muốn đổi phải dispatch một action mô tả điều đã xảy ra, và thay đổi được tính bằng reducer là hàm thuần (pure function) nhận state cũ cùng action rồi trả về state mới mà không sửa state cũ; nhờ vậy mọi thay đổi đều lần vết, tái hiện và gỡ lỗi được. "Directly by modifying the state object in any component." vi phạm nguyên tắc state chỉ đọc, sửa thẳng thì store không phát thông báo và giao diện không cập nhật. "Through setters that directly update the state." sai vì Redux không có setter, mọi cập nhật đi qua action và reducer. "By calling setState() on the Redux store directly." sai vì store chỉ có dispatch, getState, subscribe; setState là phương thức của class component React.
Đáp án đúng: "Pending". Ngay khi được tạo bằng new Promise, Promise ở trạng thái pending (đang chờ) vì thao tác bất đồng bộ chưa xong; nó chỉ rời trạng thái này khi resolve hoặc reject được gọi, và một khi đã đổi thì không đổi nữa. "Fulfilled" sai vì đó là trạng thái sau khi Promise hoàn thành với một giá trị, lúc then được gọi, không phải trạng thái ban đầu. "Rejected" sai vì đó là trạng thái khi thao tác thất bại hoặc ném lỗi, lúc catch được gọi, cũng chỉ đến sau. "Resolved" sai vì nó không phải một trong ba trạng thái chính thức pending, fulfilled, rejected; chữ này thường được dùng lỏng lẻo để chỉ việc Promise đã hoàn thành, hoặc chỉ việc Promise đã được khoá theo một Promise khác, đều là chuyện xảy ra sau thời điểm khởi tạo.
Đáp án đúng: "2000". Hàm setTimeout của JavaScript nhận độ trễ tính bằng mili giây (millisecond), mà 1 giây bằng 1000 mili giây, nên muốn chờ 2 giây thì truyền 2000. Trong React, ta gọi setTimeout bên trong useEffect vì đặt hẹn giờ là một side effect (tác dụng phụ) chứ không phải việc tính toán giao diện, và nên trả về hàm dọn dẹp gọi clearTimeout để huỷ hẹn giờ khi component bị gỡ hoặc effect chạy lại. "2" sai vì chỉ là 2 mili giây, gần như chạy ngay lập tức. "200" sai vì tương ứng 0,2 giây, nhanh gấp mười lần yêu cầu. "20000" sai vì tương ứng 20 giây, chậm gấp mười lần yêu cầu; nhầm này thường do quên rằng đơn vị là mili giây chứ không phải giây.
ATailwind CSS provides a set of pre-designed components that can be customized with utility classes, while traditional frameworks offer more flexibility in creating custom designs.
BTailwind CSS provides low-level utility classes for styling, while traditional frameworks offer pre-built components with limited customization.
CTailwind CSS relies on JavaScript to generate styles dynamically, while traditional frameworks use static CSS files.
DTailwind CSS is primarily used for server-side rendering, while traditional frameworks are better suited for client-side rendering.
Lời giải
Đáp án đúng: "Tailwind CSS provides low-level utility classes for styling, while traditional frameworks offer pre-built components with limited customization.". Tailwind theo hướng utility-first: mỗi lớp là một viên gạch định kiểu cấp thấp như khoảng đệm, màu nền, cỡ chữ, bố cục flex, ta ghép chúng trực tiếp trên phần tử để tạo giao diện riêng; còn Bootstrap hay framework truyền thống đưa ra component hoàn chỉnh như card, navbar với diện mạo định sẵn, muốn khác đi phải ghi đè CSS. Phát biểu "Tailwind CSS provides a set of pre-designed components that can be customized with utility classes" sai vì nó đảo ngược hai bên: Tailwind lõi không có component dựng sẵn và chính nó mới là bên linh hoạt hơn. Phát biểu "relies on JavaScript to generate styles dynamically" sai vì Tailwind quét mã lúc build và sinh ra tệp CSS tĩnh, không tạo kiểu bằng JavaScript lúc chạy. Phát biểu "Tailwind CSS is primarily used for server-side rendering" sai vì Tailwind chỉ là CSS, dùng được với mọi cách render, không gắn với SSR hay CSR.
BCreating server-rendered or statically generated React applications
CManaging back-end databases
DHandling real-time communication
Lời giải
Đáp án đúng: "Creating server-rendered or statically generated React applications". Next.js là framework xây trên React, bổ sung những thứ React thuần không có sẵn: định tuyến theo tệp, render phía máy chủ (server-side rendering) ở mỗi request và sinh trang tĩnh (static site generation) lúc build, nhờ đó trang tải nhanh và thân thiện với công cụ tìm kiếm. Mục đích chính của nó vì vậy là dựng ứng dụng React được render trên server hoặc sinh sẵn thành trang tĩnh. Phương án "Styling static websites" sai vì Next.js không phải công cụ CSS; định kiểu trong đó dùng CSS Modules, Tailwind hay thư viện khác. Phương án "Managing back-end databases" sai vì Next.js có route API để viết logic server nhưng không quản lý cơ sở dữ liệu, việc đó thuộc hệ quản trị như PostgreSQL hay ORM. Phương án "Handling real-time communication" là vai trò của WebSocket hay thư viện như Socket.IO, không phải mục tiêu chính của Next.js.
Đáp án đúng: "60". Danh sách trong React được render lại từ dữ liệu hiện tại chứ không cộng dồn lên giao diện cũ: mảng nguồn đang có 50 phần tử, được cập nhật thêm 10 phần tử mới, thì lần render sau map qua mảng 60 phần tử, React đối chiếu theo key để giữ nguyên 50 mục cũ và chỉ chèn thêm 10 nút DOM mới, nên trên màn hình có tổng cộng 60 mục. Phương án "40" sai vì không có phần tử nào bị xóa, lấy 50 trừ 10 là hiểu ngược phép thay đổi. Phương án "50" là số mục trước khi cập nhật, như thể lần render lại bỏ qua dữ liệu mới, điều chỉ xảy ra nếu dữ liệu không được đưa vào state. Phương án "70" chỉ có được nếu 10 mục mới bị cộng hai lần, nhưng mỗi lần render chỉ phản ánh đúng mảng hiện tại nên không có mục nào bị nhân đôi.
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.
