ATo render the user interface based on the application's state.
BTo manage the application's state and logic.
CTo distribute actions to the relevant stores.
DTo handle user interactions and events.
Lời giải
Đáp án đúng: "To distribute actions to the relevant stores.". Trong kiến trúc Flux, luồng dữ liệu đi một chiều: action được tạo ra, đi qua Dispatcher, tới các Store, rồi View render lại; Dispatcher là trung tâm duy nhất nhận mọi action và chuyển chúng tới các callback mà từng Store đã đăng ký, còn có thể sắp thứ tự xử lý giữa các Store. "To render the user interface based on the application's state." là vai trò của View, phần React component vẽ giao diện từ dữ liệu trong Store. "To manage the application's state and logic." là vai trò của Store, nơi giữ state và logic cập nhật. "To handle user interactions and events." thuộc về View và action creator: View bắt tương tác của người dùng rồi gọi action creator để tạo action gửi đi.
AIt provides pre-designed UI components and themes
BIt uses a utility-first approach, allowing developers to build custom designs using small utility classes
CIt provides pre-built JavaScript components
DIt is a framework specifically for mobile development
Lời giải
Đáp án đúng: "It uses a utility-first approach, allowing developers to build custom designs using small utility classes". Tailwind CSS theo hướng utility-first (ưu tiên lớp tiện ích): thay vì cung cấp nút, thẻ dựng sẵn, nó cho rất nhiều lớp nhỏ mỗi lớp làm một việc như p-4 (padding), text-center, bg-blue-500, flex, và lập trình viên ghép trực tiếp trong className để tạo thiết kế riêng, kèm tiền tố đáp ứng như md: và tiền tố trạng thái như hover:. Phương án "It provides pre-designed UI components and themes" là đặc điểm của Bootstrap hay Material UI, chính là điểm Tailwind khác biệt. Phương án "It provides pre-built JavaScript components" sai vì Tailwind chỉ là CSS, không kèm component JavaScript; các bộ như Headless UI là thư viện riêng. Phương án "It is a framework specifically for mobile development" sai vì Tailwind dùng cho web ở mọi kích thước màn hình, có hỗ trợ responsive nhưng không chuyên cho mobile.
ATo manipulate the browser window's size and position.
BTo store data in the browser's local storage.
CTo make HTTP requests to retrieve data from a server.
DTo define the styling and layout of a webpage.
Lời giải
Đáp án đúng: "To make HTTP requests to retrieve data from a server.". window.fetch là Fetch API của trình duyệt, dùng để gửi request HTTP tới máy chủ, mặc định là GET và có thể là POST, PUT, DELETE kèm header và body; nó trả về một Promise cho object Response, từ đó ta gọi json() hoặc text() để đọc dữ liệu, nên đây là cách thông dụng để React lấy dữ liệu từ API, thường đặt trong useEffect. "To manipulate the browser window's size and position." sai vì đổi kích thước hay vị trí cửa sổ dùng các phương thức khác như resizeTo, moveTo, không liên quan đến fetch dù nó cũng nằm trên object window. "To store data in the browser's local storage." sai vì lưu dữ liệu cục bộ dùng localStorage với setItem và getItem. "To define the styling and layout of a webpage." sai vì định kiểu và bố cục là việc của CSS, fetch không tác động gì tới giao diện.
Đáp án đúng: "To define the initial state of the reducer". Reducer có dạng function reducer(state = initialState, action); lần đầu store được tạo, Redux dispatch một action khởi tạo với state là undefined, nên giá trị mặc định của tham số state được dùng làm state ban đầu của reducer đó, và các lần sau reducer nhận state hiện có. Với Redux Toolkit, initialState được khai báo trong createSlice. "To define the structure of the Redux store" không phải đáp án vì state ban đầu chỉ định hình một nhánh mà reducer đó quản lý; cấu trúc của cả store do cách ghép reducer bằng combineReducers hay configureStore quyết định. "To specify the actions that can be dispatched" sai vì các action được định nghĩa qua action type, action creator hoặc reducers trong createSlice, state ban đầu không liệt kê action nào. "To handle asynchronous operations" sai vì reducer phải đồng bộ; thao tác bất đồng bộ do middleware như redux-thunk xử lý.
Đáp án đúng: "Destructuring assignment". Phép gán phân rã (destructuring assignment) của ES6 tách giá trị từ mảng theo vị trí hoặc từ đối tượng theo tên thuộc tính rồi gán thẳng vào biến, ví dụ const { name, age } = user hay const [first, second] = list; trong React cú pháp này có mặt khắp nơi, từ const [count, setCount] = useState(0) tới việc nhận props dạng hàm ({ title }). "Spread operator" là dấu ba chấm dùng để trải phần tử ra khi sao chép hoặc gộp mảng, đối tượng, không gán giá trị vào biến riêng. "Template literals" là chuỗi đặt trong dấu backquote có chèn biểu thức, dùng để dựng chuỗi chứ không tách giá trị. "Default parameters" là giá trị mặc định cho tham số hàm khi không truyền đối số, cũng không trích giá trị từ mảng hay đối tượng.
Đáp án đúng: "Facebook". React do kỹ sư Jordan Walke tại Facebook tạo ra, được dùng cho News Feed từ năm 2011, cho Instagram năm 2012 và công bố mã nguồn mở năm 2013; nay Meta, tên mới của công ty Facebook, vẫn duy trì thư viện cùng cộng đồng. "Google" là công ty đứng sau Angular, một framework front-end khác hay bị nhầm với React. "Microsoft" phát triển TypeScript và Visual Studio Code, những công cụ thường dùng chung với React nhưng không tạo ra React. "Amazon" cung cấp hạ tầng đám mây AWS, nơi có thể triển khai ứng dụng React, chứ không tạo ra thư viện này.
import React from 'react';
const Greeting =({ name })=>{
return <h1>Hello,{name}!</h1>;};
export default Greeting;
AClass component
BFunctional component
CContainer component
DHigher-order component
Lời giải
Đáp án đúng: "Functional component". Greeting là một hàm mũi tên nhận props, phân rã lấy name rồi trả về JSX thẻ h1 hiển thị lời chào, nên đây là function component (component dạng hàm). "Class component" cần cú pháp class kế thừa React.Component và có phương thức render(), mã trên không có. "Container component" là khái niệm theo vai trò: component lo lấy dữ liệu và logic rồi truyền xuống component trình bày; Greeting chỉ hiển thị dữ liệu được đưa vào nên không đóng vai đó. "Higher-order component" là một hàm nhận một component và trả về component mới đã được bọc thêm logic; Greeting nhận props chứ không nhận component nào.
BNetwork operations inherently cause unexpected delays and are asynchronous
CCommunication is always synchronous and predictable.
DClient-server communication primarily focuses on local data storage.
Lời giải
Đáp án đúng: "Network operations inherently cause unexpected delays and are asynchronous". Khi client gọi server, dữ liệu phải đi qua mạng nên thời gian phản hồi không đoán trước được: có thể nhanh, chậm, hết thời gian chờ hay lỗi hẳn; vì thế lập trình viên phải coi mọi thao tác mạng là bất đồng bộ, gọi bằng fetch hay axios trả về Promise, dùng async, await hoặc then, đồng thời hiện trạng thái đang tải và xử lý lỗi thay vì chặn giao diện để chờ kết quả. Phương án "Data is always instantaneously available." sai vì luôn có độ trễ truyền và xử lý ở server. Phương án "Communication is always synchronous and predictable." ngược với bản chất mạng; gọi đồng bộ sẽ làm treo luồng giao diện của trình duyệt. Phương án "Client-server communication primarily focuses on local data storage." nhầm với lưu trữ cục bộ như localStorage, trong khi giao tiếp client và server là trao đổi dữ liệu qua mạng giữa hai máy.
Đáp án đúng gồm hai ý: "const [state, dispatch] = useReducer(reducer, initialState);" và "import React, { useReducer } from 'react';". useReducer là hook có sẵn trong gói react nên phải import từ react, sau đó gọi với hàm reducer và state ban đầu; hook trả về mảng hai phần tử gồm state hiện tại và hàm dispatch để gửi action, reducer nhận state cũ cùng action và trả về state mới. "const [state, setState] = useReducer(reducer, initialState);" không được chọn vì phần tử thứ hai là dispatch nhận action chứ không nhận giá trị state mới; đặt tên setState về cú pháp vẫn chạy nhưng gây hiểu nhầm với hàm đặt state của useState, nên không phải cách viết đúng quy ước. "import { useReducer } from 'react-redux';" sai vì react-redux không xuất useReducer; thư viện này cung cấp Provider, useSelector, useDispatch để làm việc với store Redux, còn useReducer là hook quản lý state cục bộ của chính React.
CBy using the bind method when binding the event handler
DReact 19 does not support passing additional arguments to event handlers
Lời giải
Đáp án đúng: "By using the bind method when binding the event handler". Hàm xử lý sự kiện được React gọi với một đối số là đối tượng sự kiện, nên muốn truyền thêm dữ liệu như id của dòng được nhấp thì phải tạo trước một hàm mới đã gắn sẵn đối số đó; Function.prototype.bind làm đúng việc này, ví dụ onClick={
Lời giải
handleDelete.bind(null, id)}
sẽ gọi handleDelete(id, event). Cách tương đương hay gặp hơn là hàm mũi tên onClick={() => handleDelete(id)}, cùng nguyên lý tạo hàm bọc. "By using the event.target property" sai vì event.target chỉ là phần tử DOM phát ra sự kiện; đọc thuộc tính của nó là cách lấy dữ liệu gián tiếp, không phải truyền đối số. "By using the event.data property" sai vì sự kiện nhấp không có thuộc tính data để chứa đối số tự chọn; data chỉ có ở một số loại sự kiện như sự kiện nhập liệu. "React 19 does not support passing additional arguments to event handlers" sai vì React 19 vẫn cho làm như mọi phiên bản trước.
Cimport { useNavigate } from 'react-router-native';
Dimport { useNavigate } from 'react-navigation';
Lời giải
Đáp án đúng: "import { useNavigate } from 'react-router-dom';". Với ứng dụng web chạy React Router v6, các hook điều hướng như useNavigate, useParams, useLocation được nhập từ gói react-router-dom, gói này gồm lõi định tuyến cộng phần dành cho trình duyệt như BrowserRouter, Link. "import { useNavigate } from 'react-router';" là gói lõi; lõi cũng chứa useNavigate, và từ React Router v7 gói này trở thành điểm nhập chính, nhưng ở v6 cho ứng dụng web cách nhập chuẩn được hướng dẫn là từ react-router-dom nên đây là đáp án. "import { useNavigate } from 'react-router-native';" dành cho ứng dụng React Native, không phải web. "import { useNavigate } from 'react-navigation';" sai vì React Navigation là thư viện khác của React Native, dùng hook useNavigation chứ không có useNavigate.
". Để truyền hàm làm prop, đặt chính tham chiếu hàm trong ngoặc nhọn, không kèm dấu gọi hàm; Child nhận prop onClick và tự gọi nó khi có sự kiện, chẳng hạn gắn vào nút bên trong. Tên onClick theo quy ước đặt tên prop sự kiện là on cộng tên sự kiện. Cần nói thẳng: "
Lời giải
<Child handleClick={
handleClick
}/>
" cũng truyền đúng một hàm, chỉ khác tên prop, và trong Child dùng props.handleClick vẫn chạy; nó không sai về cơ chế, chỉ lệch quy ước đặt tên prop sự kiện mà đáp án này theo. "
Lời giải
<Child onClick={handleClick()}/>
" sai vì có dấu ngoặc tròn nên handleClick bị gọi ngay mỗi lần cha render, prop nhận giá trị trả về chứ không phải hàm, và nếu hàm đổi state sẽ gây vòng render vô hạn. "
Lời giải
<Child handleClick={handleClick()}/>
" mắc cùng lỗi gọi hàm ngay khi render, chỉ khác tên prop.
AReact-Bootstrap only provides components for CSS styling
BIt enables developers to create modular and reusable UI elements as React components.
CIt requires custom JavaScript to be written for each component.
DComponents can only be used once in the application
Lời giải
Đáp án đúng: "It enables developers to create modular and reusable UI elements as React components.". Component-Based nghĩa là mỗi thành phần của Bootstrap được cung cấp dưới dạng một component React như Button, Card, Modal: nhận props, tự quản lý trạng thái, có thể ghép lồng nhau và dùng lại ở nhiều nơi, nhờ đó giao diện được chia thành các khối mô-đun dễ bảo trì. "React-Bootstrap only provides components for CSS styling" sai vì component của React-Bootstrap không chỉ tạo kiểu CSS mà còn mang hành vi như mở modal, thu gọn navbar. "It requires custom JavaScript to be written for each component." ngược lại: thư viện đã cài sẵn hành vi bằng React, người dùng không phải viết JavaScript riêng cho từng component. "Components can only be used once in the application" sai vì tính tái sử dụng chính là điểm cốt lõi; một component có thể dùng bao nhiêu lần cũng được.
Đá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.
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.
Đá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.
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.
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.
Đá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.
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.
