Đáp án đúng: "useDispatch". Trong React Redux, useSelector chỉ đọc một phần state từ store và đăng ký để component render lại khi phần đó đổi; muốn thay đổi state thì phải gửi action tới store, và hook useDispatch trả về hàm dispatch của store để làm việc đó, ví dụ dispatch(increment()), sau đó reducer tính ra state mới. Vì vậy hai hook này hay đi thành cặp: một đọc, một ghi. Phương án "useState" quản lý state cục bộ của riêng component, không đụng tới store Redux. Phương án "useEffect" chạy tác vụ phụ sau render; có thể gọi dispatch bên trong nó nhưng bản thân nó không phải công cụ sửa state Redux. Phương án "useContext" đọc giá trị từ React Context; React Redux có dùng context bên dưới để truyền store, nhưng gọi useContext không cho ta cách gửi action.
Đáp án đúng: "npm install json-server -g". json-server là gói npm dựng nhanh một REST API giả từ tệp db.json để front-end thử gọi dữ liệu; lệnh npm install kèm cờ -g (viết đầy đủ là --global) cài gói vào thư mục toàn cục của máy, nhờ đó lệnh json-server dùng được ở mọi thư mục, ví dụ json-server --watch db.json --port 3001. Phương án "npm add json-server" dùng add, vốn là bí danh của install trong npm, nhưng thiếu -g nên chỉ cài vào dự án hiện tại chứ không cài toàn cục. Phương án "node install json-server" sai vì node là trình chạy JavaScript, không có lệnh con install để cài gói. Phương án "npm get json-server" sai vì npm không có lệnh get để cài gói; lệnh get của npm chỉ dùng để đọc một giá trị cấu hình.
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.
AIt allows you to read values from the Redux store.
BIt allows you to update the Redux store state.
CIt is used to perform side effects.
DIt dispatches actions to update the state.
Lời giải
Đáp án đúng: "It allows you to read values from the Redux store.". useSelector nhận một hàm selector, chẳng hạn hàm lấy state.cart.items, chạy nó trên state hiện tại của store và trả kết quả cho component; nó còn đăng ký theo dõi nên khi một action làm giá trị được chọn thay đổi, component render lại. Hook này chỉ đọc, không làm thay đổi store. "It allows you to update the Redux store state." sai vì store chỉ đổi khi reducer xử lý một action, useSelector không có đường ghi nào. "It dispatches actions to update the state." mô tả useDispatch, hook trả về hàm dispatch để gửi action tới store. "It is used to perform side effects." là vai trò của useEffect trong component hoặc của middleware như redux-thunk trong Redux, không liên quan việc đọc store.
BTo immediately execute the next line of code without waiting.
CTo pause the execution of the async function until the Promise it's waiting for is resolved or rejected.
DTo define a synchronous block of code
Lời giải
Đáp án đúng: "To pause the execution of the async function until the Promise it's waiting for is resolved or rejected.". Từ khoá await chỉ dùng trong hàm async (hoặc ở cấp cao nhất của module): nó tạm dừng phần thân còn lại của hàm đó cho tới khi Promise đứng sau nó ổn định, nếu resolve thì biểu thức await trả về giá trị, nếu reject 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ý việc khác qua event loop (vòng lặp sự kiện). "To return a new Promise object." mô tả từ khoá async chứ không phải await, vì chính hàm async luôn trả về một Promise. "To immediately execute the next line of code without waiting." ngược hẳn với await, đó là hành vi khi gọi một hàm trả Promise mà không await nó. "To define a synchronous block of code" sai vì await không tạo khối mã đồng bộ, mã chỉ trông tuần tự còn bản chất vẫn bất đồng bộ.
AIt allows for a more readable and simpler syntax for handling asynchronous code.
BIt uses callbacks instead of promises.
CIt only works for synchronous operations.
DIt increases the loading time of web pages.
Lời giải
Đáp án đúng: "It allows for a more readable and simpler syntax for handling asynchronous code.". async/await là cú pháp xây trên chính Promise: hàm async luôn trả về Promise, còn await chờ một Promise ổn định rồi lấy giá trị, nhờ đó mã bất đồng bộ đọc tuần tự từ trên xuống như mã thường và bắt lỗi bằng try/catch quen thuộc thay vì nối nhiều then, catch. "It uses callbacks instead of promises." sai vì async/await không quay lại callback mà dùng Promise ở bên dưới. "It only works for synchronous operations." sai, cú pháp này sinh ra để xử lý thao tác bất đồng bộ như gọi API hay đọc tệp. "It increases the loading time of web pages." sai vì cách viết then hay await không làm trang tải chậm hơn; thời gian chờ phụ thuộc vào chính thao tác mạng chứ không phụ thuộc cú pháp.
AIt is a JavaScript feature that makes asynchronous code look and behave like synchronous code.
BIt is used to send data to a server without blocking the UI.
CIt is a way to handle callback functions.
DIt is a method to manage state in React components.
Lời giải
Đáp án đúng: "It is a JavaScript feature that makes asynchronous code look and behave like synchronous code.". Từ khoá async khiến một hàm luôn trả về Promise, còn await bên trong hàm đó tạm dừng hàm cho tới khi Promise ngã ngũ rồi trả về giá trị, nhờ vậy mã bất đồng bộ được viết từ trên xuống dưới như mã đồng bộ và bắt lỗi được bằng try/catch, trong khi luồng chính của trình duyệt không bị chặn. "It is used to send data to a server without blocking the UI." mô tả việc gửi request bất đồng bộ (như fetch hay AJAX); async/await hay được dùng cho việc đó nhưng bản thân nó là cú pháp xử lý Promise, áp dụng cho mọi thao tác bất đồng bộ chứ không riêng gửi dữ liệu. "It is a way to handle callback functions." sai vì await làm việc với Promise, không với callback; nó chính là cách thay thế chuỗi callback lồng nhau. "It is a method to manage state in React components." sai vì async/await là tính năng của JavaScript, không liên quan đến state của React; state do useState hay useReducer quản lý.
CAn object representing the eventual completion (or failure) of an asynchronous operation
DA function that blocks the main thread until complete
Lời giải
Đáp án đúng: "An object representing the eventual completion (or failure) of an asynchronous operation". Promise là object đại diện cho kết quả sẽ có trong tương lai của một thao tác bất đồng bộ như gọi API: nó bắt đầu ở trạng thái pending (đang chờ), sau đó chuyển sang fulfilled kèm giá trị khi thành công hoặc rejected kèm lý do khi thất bại; ta đăng ký xử lý bằng then, catch, finally hoặc dùng async/await, trong khi luồng chính vẫn chạy tiếp. "A synchronous function that returns HTML" sai vì Promise không phải hàm, càng không đồng bộ và không liên quan đến việc sinh HTML. "A guarantee that a function will execute twice" sai vì chữ promise ở đây nghĩa là hứa trả về một kết quả, và mỗi Promise chỉ chốt trạng thái đúng một lần chứ không chạy hàm hai lần. "A function that blocks the main thread until complete" sai vì mục đích của Promise chính là không chặn luồng chính; các hàm xử lý được gọi sau qua hàng đợi microtask.
AContext allows data to be passed between components without prop drilling.
BContext is used to fetch data from the server.
CContext is used to store the component's state.
DContext is used to style components.
Lời giải
Đáp án đúng: "Context allows data to be passed between components without prop drilling.". Prop drilling là tình trạng phải truyền props qua nhiều tầng component trung gian vốn không dùng tới dữ liệu, chỉ để nó tới được component sâu bên dưới; Context giải quyết bằng cách cho một Provider đặt giá trị ở tầng trên, và bất kỳ component con cháu nào cũng đọc thẳng bằng useContext, thường dùng cho chủ đề giao diện, ngôn ngữ hay người dùng đang đăng nhập. Phương án "Context is used to fetch data from the server." sai vì Context không gọi mạng; việc tải dữ liệu làm bằng fetch hay axios trong Effect hoặc thư viện riêng, kết quả mới có thể đưa vào Context. Phương án "Context is used to store the component's state." nhầm với useState, state cục bộ thuộc về từng component; Context chỉ phân phối một giá trị (có thể là state) xuống cây. Phương án "Context is used to style components." sai vì định kiểu là việc của CSS, CSS Modules hay styled-components.
Đáp án đúng: "To pass data from a parent component to a child". Props (properties, thuộc tính) truyền dữ liệu theo một chiều từ component cha xuống component con, giống thuộc tính JSX như name="Lan" đặt trên thẻ con; con đọc chúng qua tham số props và không được sửa. "To pass data from a child component to a parent" ngược chiều: muốn gửi dữ liệu từ con lên cha thì cha phải truyền xuống một hàm callback qua props để con gọi. "To style components with CSS" không phải mục đích của props: kiểu dáng đặt bằng className hoặc style; style có thể được truyền như một prop nhưng đó chỉ là một trường hợp truyền dữ liệu. "To store local state in functional components" là việc của useState, còn props là dữ liệu từ bên ngoài đưa vào và chỉ đọc.
CA component that uses data made available within a context.
DA component that is responsible for updating the DOM directly
Lời giải
Đáp án đúng: "A component that uses data made available within a context.". Context API có hai vai: Provider đặt giá trị vào context qua prop value cho cả cây con bên dưới, còn consumer là component đọc giá trị đó, ngày nay bằng useContext, kiểu cũ là Context.Consumer với render prop. Consumer render lại mỗi khi value của Provider gần nhất thay đổi. "A component that provides data to a context." mô tả Provider, vai ngược với consumer. "A component that only renders static content." sai vì consumer đọc dữ liệu động từ context, có thể đổi theo thời gian. "A component that is responsible for updating the DOM directly" sai vì trong React component chỉ mô tả giao diện, chính React đảm nhận việc commit thay đổi vào DOM.
Đáp án đúng gồm ba ý: "Enable functional components to have state", "Simplify component logic" và "Promote reusability of logic between components". useState và useReducer cho function component có state riêng mà không cần viết class; useEffect gom các phần logic liên quan, ví dụ đăng ký và huỷ đăng ký, vào cùng một chỗ thay vì rải qua componentDidMount, componentDidUpdate, componentWillUnmount, nên logic của component gọn và dễ theo dõi hơn; custom hook như useFetch hay useAuth đóng gói logic có state để nhiều component dùng lại mà không cần HOC hay render props. "Automatically optimize performance" không đúng vì Hooks không tự tối ưu gì cả; muốn tránh render thừa phải chủ động dùng useMemo, useCallback hoặc React.memo, và khai báo dependency sai còn có thể gây render lặp.
AReduces the initial load time by splitting code into bundles
BEnsures that all components are loaded upfront
CProvides a better user experience by loading components only when needed
DAllows for dynamic imports and lazy loading of components
Lời giải
Đáp án đúng: "Ensures that all components are loaded upfront". Câu hỏi tìm điều KHÔNG phải lợi ích của React.lazy. React.lazy cùng import động tách component thành gói mã riêng và chỉ tải khi component đó được render lần đầu, nên nói nó bảo đảm mọi component được tải ngay từ đầu là ngược hẳn mục đích. Ba phát biểu kia đều đúng nên không được chọn. "Reduces the initial load time by splitting code into bundles" đúng vì gói ban đầu nhỏ hơn, trình duyệt tải và chạy nhanh hơn. "Provides a better user experience by loading components only when needed" đúng vì người dùng chỉ phải chờ phần mã của trang mình đang mở, phần còn lại tải sau và trong lúc chờ Suspense hiển thị fallback. "Allows for dynamic imports and lazy loading of components" đúng vì React.lazy nhận một hàm gọi import(), chính cú pháp import động mà công cụ đóng gói dựa vào để cắt chunk.
Đáp án đúng: "Using the <Route> component". Trong React Router, mỗi tuyến đường được khai báo bằng một component Route với thuộc tính path chỉ mẫu đường dẫn và element chỉ component cần hiển thị khi khớp; ở v6 các Route được đặt bên trong Routes, và có thể lồng Route để tạo bố cục con. "Using the <Link> component" sai vì Link tạo liên kết để người dùng bấm chuyển trang phía client, nó điều hướng tới một route đã khai báo chứ không khai báo route. "Using the <Switch> component" sai vì Switch là component của v5 dùng để bọc các Route và chỉ hiển thị route đầu tiên khớp, đã được thay bằng Routes ở v6; bản thân nó không định nghĩa đường dẫn nào. "Using the <Redirect> component" sai vì Redirect của v5 dùng để chuyển hướng sang đường dẫn khác, ở v6 được thay bằng Navigate, không phải công cụ khai báo route.
Đáp án đúng: "<Route path='/users/:id'/> ". Trong React Router, tham số động của URL được khai báo bằng dấu hai chấm đứng trước tên tham số trong prop path; route này khớp với /users/42 hay /users/abc, và component bên trong đọc giá trị bằng hook useParams, được một đối tượng có thuộc tính id mang chuỗi 42. Phương án "
Lời giải
<Route path='/users{?id}'/>
" mượn cú pháp kiểu URI template, React Router không hiểu cú pháp này nên không tạo ra tham số id nào. Phương án "<Route path='/users[?id]'/> " cũng là cú pháp không có trong React Router; ngoặc vuông là quy ước đặt tên thư mục route động của Next.js. Phương án "<Route param='/users/:id'/> " viết đúng mẫu đường dẫn nhưng đặt vào prop param không tồn tại; Route chỉ nhận đường dẫn qua prop path, nên route này không có đường dẫn để khớp.
A401 the request is missing valid authentication credentials, while 403 the server refuses to authorize.
B401 the server encountered an internal error, while 403 means the requested resource was not found.
C401 the request was successful, while 403 means the request was not modified.
D401 and 403 are interchangeable and have the same meaning.
Lời giải
Đáp án đúng: "401 the request is missing valid authentication credentials, while 403 the server refuses to authorize.". Mã 401 Unauthorized nghĩa là yêu cầu chưa được xác thực (authentication): thiếu hoặc sai thông tin đăng nhập, chẳng hạn token hết hạn, nên client cần đăng nhập rồi gửi lại. Mã 403 Forbidden nghĩa là server đã biết người gửi là ai nhưng từ chối cấp quyền (authorization) truy cập tài nguyên, gửi lại với cùng danh tính cũng vô ích. Trong ứng dụng React, 401 thường dẫn về trang đăng nhập, còn 403 hiện thông báo không đủ quyền. "401 the server encountered an internal error, while 403 means the requested resource was not found." nhầm với 500 Internal Server Error và 404 Not Found. "401 the request was successful, while 403 means the request was not modified." nhầm với 200 OK và 304 Not Modified. "401 and 403 are interchangeable and have the same meaning." sai vì hai mã tách bạch việc chưa xác thực với việc không có quyền.
Đáp án đúng: "const dispatch = useDispatch(); dispatch({ type: 'ACTION_TYPE' });". Action trong Redux là một đối tượng thuần có trường type mô tả việc vừa xảy ra, có thể kèm payload; useDispatch của react-redux trả về hàm dispatch của store, và gọi dispatch với đối tượng có khoá type sẽ gửi action đó tới reducer. "const dispatch = useDispatch(); dispatch('ACTION_TYPE');" truyền một chuỗi, trong khi Redux yêu cầu action là đối tượng thuần nên báo lỗi Actions must be plain objects. "const dispatch = useDispatch(); dispatch(() => { type: 'ACTION_TYPE' });" viết arrow function có ngoặc nhọn: ngoặc nhọn ở đây là thân hàm, type: chỉ là một nhãn lệnh chứ không phải đối tượng, nên hàm trả về undefined; dispatch một hàm chỉ chạy được nhờ middleware thunk, và kể cả khi đó cũng không có action nào tới reducer. "const dispatch = useDispatch(); dispatch({ action: 'ACTION_TYPE' });" dùng khoá action thay cho type, đối tượng thiếu type nên Redux báo lỗi action không có thuộc tính type.
AUsing fetch or another method to retrieve data from the API
BConverting the response data into JSON format
CRendering the fetched data immediately on page load
DHandling errors that may occur during the data fetching process
Lời giải
Đáp án đúng gồm ba ý: "Using fetch or another method to retrieve data from the API", "Converting the response data into JSON format" và "Handling errors that may occur during the data fetching process". Quy trình lấy dữ liệu cơ bản trong React: gọi fetch hoặc axios, thường trong useEffect hay qua thư viện như React Query; đọc thân phản hồi bằng response.json() để có object JavaScript rồi đưa vào state bằng hàm set; song song phải bắt lỗi bằng catch hoặc try/catch, kiểm response.ok và hiện thông báo khi mạng hỏng hay server trả lỗi. "Rendering the fetched data immediately on page load" không phải bước bắt buộc, thậm chí không làm được: dữ liệu về bất đồng bộ nên lúc trang vừa tải chưa có gì để hiển thị; cách đúng là render trạng thái đang tải trước, khi state có dữ liệu thì component render lại.
Aimport { createStore } from 'redux';
const store = createStore({ reducer: { counter: counterReducer } });
Bimport { createStore } from 'redux';
const store = createStore({ counter: counterReducer });
Cimport { configureStore } from '@reduxjs/toolkit';
const store = configureStore({ counter: counterReducer});
Dimport { configureStore } from '@reduxjs/toolkit';
const store = configureStore({ reducer: { counter: counterReducer } });
Lời giải
Đáp án đúng: "import { configureStore } from '@reduxjs/toolkit'; const store = configureStore({ reducer: { counter: counterReducer } });". configureStore của Redux Toolkit nhận MỘT đối tượng tuỳ chọn, trong đó khoá reducer chứa reducer gốc hoặc một đối tượng các slice reducer; ở đây counter là tên nhánh state nên state.counter do counterReducer quản lý, và configureStore còn tự gộp reducer bằng combineReducers, gắn sẵn middleware thunk, bật Redux DevTools. Phương án gọi "configureStore({ counter: counterReducer})" thiếu khoá reducer, nên Redux Toolkit báo lỗi vì reducer là đối số bắt buộc. Phương án dùng "createStore({ reducer: { counter" là hàm cũ của gói redux, nó nhận thẳng một hàm reducer chứ không nhận đối tượng tuỳ chọn, truyền đối tượng vào sẽ ném lỗi vì reducer gốc phải là hàm; hơn nữa createStore nay đã bị đánh dấu không khuyến nghị (deprecated) để chuyển sang Redux Toolkit. Phương án dùng "createStore({ counter: counterReducer })" cũng truyền đối tượng thay cho hàm reducer và không dùng Redux Toolkit như câu hỏi yêu cầu.
Đáp án đúng: "It is a JavaScript function.". Tài liệu react.dev định nghĩa component là một hàm JavaScript trả về markup (JSX); React gọi hàm đó với props và lấy kết quả để dựng giao diện, component dạng lớp cũng là lớp JavaScript có phương thức render. "It is a single UI element." đúng một phần ở chỗ component là một mảnh giao diện, nhưng chữ single (đơn lẻ) sai: một component có thể trả về cả cây gồm nhiều phần tử, chứa các component khác, thậm chí cả một trang, nên không đồng nhất với một phần tử UI. "It is an HTML framework." sai vì component không phải framework, và React là thư viện JavaScript, JSX chỉ trông giống HTML. "It is a Python class." sai vì React chạy bằng JavaScript, không liên quan tới Python.
