Đề Thi FER202 ReactJS FPTU Kỳ SU25 Chính Thức - Có Đáp Án

Ngày 28/07/2025, kỳ thi FE môn FER202 - ReactJS chính thức của trường Đại học FPT (mã đề FER202_SU25_FE_527500) đã diễn ra với thời gian làm bài 50 câu trong 60 phút. Đây là một trong những môn lập trình front-end quan trọng, kiểm tra kiến thức về ReactJS, React Hooks, Props, State, Redux, React Router, TailwindCSS và các kỹ thuật tối ưu hiệu suất ứng dụng web.

Để giúp các bạn sinh viên khóa sau và những ai đang ôn thi 2ndFE, mình chia sẻ lại bộ đề FER202 SU25 kèm đáp án chi tiết, giải thích rõ ràng từng câu hỏi để dễ hiểu và dễ nhớ. Đây là đề thi chính thức được tổng hợp lại nhằm phục vụ mục đích ôn tập, học nhóm và tham khảo, không thay thế cho việc tự học và thực hành code thực tế.

Nội dung trong đề thi FER202 SU25

• Kiến thức trọng tâm về Component, JSX, Props, State.
• Hiểu rõ cách hoạt động của React Hooks như useEffect, useState, useContext…
• Kiến thức về Redux, Middleware (Redux Thunk) và quản lý dữ liệu.
• React Router và cách xử lý params, điều hướng.
• Những câu hỏi "bẫy" liên quan đến JSX syntax, event handler, performance optimization.

Bài viết này không chỉ cung cấp đáp án tham khảo, mà còn giải thích logic từng lựa chọn, code mẫu minh họa, giúp bạn hiểu bản chất thay vì học thuộc.

Giờ thì cùng xem chi tiết bộ đề thi FER202 ReactJS FPTU kỳ SU25 - kèm đáp án và giải thích từng câu ngay bên dưới nhé

Đề thi chính thức FER202 SU25

Question 1: How can you import functions or variables from an ES6 module?

A. By using the import keyword

B. By using the require function

C. By using the export keyword

D. By using the include directive

Chọn A

Giải thích: Trong ES6, để import (nhập) các hàm hoặc biến từ một module, ta sử dụng từ khóa import. Ví dụ: import { myFunction } from './myModule.js';. Từ khóa export được dùng trong module để xuất dữ liệu, require là cú pháp của CommonJS, và include không tồn tại trong ES6.

Question 2: Which action dispatch would correctly increment the count in the reducer setup?

A. dispatch({ type: 'add' });

B. dispatch({ action: 'increment' });

C. dispatch({ type: 'increment' });

D. dispatch({ command: 'increment' });

Chọn C

Giải thích: Trong Redux hoặc useReducer của React, khi gửi một hành động (dispatch) để thay đổi state, ta truyền một đối tượng với thuộc tính type làm khóa chính. Để tăng giá trị count, dispatch chuẩn là: dispatch({ type: 'increment' });. Các lựa chọn khác (add, action, command) không tuân theo cấu trúc chuẩn của action trong reducer.

Question 3: Evaluate the differences between using the Fetch API and Axios for making HTTP requests. Which statement is true?

A. The Fetch API automatically handles JSON responses, while Axios requires manual parsing

B. Axios provides built-in support for request and response interception, while the Fetch API does not

C. The Fetch API supports automatic retries for failed requests, while Axios does not

D. Axios is built into all modern browsers, while the Fetch API requires an additional library

Chọn B

Giải thích: Axios cung cấp sẵn tính năng interceptors cho cả request và response, giúp bạn can thiệp hoặc chỉnh sửa dữ liệu trước khi gửi và sau khi nhận về. Fetch API thì không hỗ trợ sẵn interceptors, bạn cần tự viết logic thủ công. - A sai vì cả hai đều cần gọi response.json() hoặc Axios tự parse JSON nhưng không cần thủ công như fetch. - C sai vì Fetch không tự động retry. - D sai vì Fetch là API tích hợp sẵn trong trình duyệt, còn Axios là thư viện bên ngoài.

Question 4: How would you extract and display multiple parameters, userId and postId, in a component?

A. const { userId, postId } = useParams();

B. const userId = useParams('userId'); const postId = useParams('postId');

C. const userId = route.params.userId; const postId = route.params.postId;

D. const { userId } = useParams(); const { postId } = useParams();

Chọn A

Giải thích: Trong React Router v6, hook useParams() trả về một object chứa tất cả các tham số từ URL. Ta có thể dùng cú pháp destructuring để lấy nhiều tham số một lúc: const { userId, postId } = useParams(); - B sai vì useParams không nhận tham số. - C sai vì route.params không tồn tại mặc định trong React Router. - D sai vì không cần gọi useParams() nhiều lần, chỉ cần destructure 1 lần duy nhất.

Question 5: What does the npx create-next-app command do?

A. It creates a new React application

B. It creates a new Next.js application

C. It installs Tailwind CSS

D. It creates a new package.json in NextJS

Chọn B

Giải thích: Lệnh npx create-next-app được dùng để khởi tạo một dự án Next.js mới, bao gồm cấu trúc thư mục, các file cấu hình và các phụ thuộc cần thiết. - A sai vì lệnh tạo ứng dụng React cơ bản là npx create-react-app. - C sai vì Tailwind CSS không được cài đặt tự động, cần cài riêng. - D sai vì package.json được tạo ra kèm theo khi khởi tạo dự án, nhưng không phải chức năng chính của lệnh này.

Question 6: What does the npx create-next-app command do?

A. It creates a new React application

B. It creates a new Next.js application

C. It installs Tailwind CSS

D. It creates a new package.json in NextJS

Chọn B

Giải thích: Lệnh npx create-next-app được sử dụng để khởi tạo một ứng dụng Next.js mới với cấu trúc thư mục và các file cấu hình sẵn sàng để phát triển. Mặc dù Next.js dựa trên React, nhưng lệnh này chuyên biệt cho việc tạo dự án Next.js, cung cấp các tính năng như server-side rendering và static site generation. Các tuỳ chọn như Tailwind CSS có thể được thêm vào sau, không được tự động cài đặt bởi lệnh này.

Question 7: Analyze the differences between Flux and MVC architectures. Which statement is true?

A. Flux enforces unidirectional data flow, while MVC allows bidirectional data flow.

B. MVC enforces unidirectional data flow, while Flux allows bidirectional data flow.

C. Both Flux and MVC enforce unidirectional data flow.

D. Both Flux and MVC allow bidirectional data flow.

Chọn A

Giải thích: Kiến trúc Flux (được Facebook giới thiệu) áp dụng mô hình unidirectional data flow (dòng dữ liệu một chiều), đảm bảo dữ liệu đi theo một hướng duy nhất từ Actions → Dispatcher → Store → View. Trong khi đó, kiến trúc MVC (Model-View-Controller) truyền thống cho phép bidirectional data flow (dòng dữ liệu hai chiều), nghĩa là View và Model có thể cập nhật lẫn nhau trực tiếp, dễ gây ra các luồng dữ liệu phức tạp và khó kiểm soát hơn so với Flux.

Question 8: What is the initial state of a promise?

A. Fulfilled

B. Rejected

C. Pending

D. Resolved

Chọn C

Giải thích: Khi một Promise được khởi tạo, trạng thái ban đầu của nó là Pending (đang chờ). Sau khi được xử lý, Promise có thể chuyển sang Fulfilled (thành công) hoặc Rejected (thất bại). Thuật ngữ Resolved thường chỉ việc promise đã kết thúc, có thể ở trạng thái fulfilled hoặc rejected, nhưng không phải trạng thái ban đầu.

Question 9: What is the difference between the render() method and the commit() method in React?

A. The render() method defines the component's structure, while the commit() method handles side effects.

B. The render() method handles events, while the commit() method defines the component's structure.

C. The render() method is called before the component is mounted, while the commit() method is called after the component is mounted.

D. There is no commit() method in React.

Chọn D

Giải thích: Trong React không tồn tại phương thức commit() dành cho component. Phương thức render() được sử dụng trong class component để xác định giao diện hiển thị của component. Các thao tác sau khi render (side effects) thường được xử lý trong các lifecycle methods như componentDidMount(), componentDidUpdate() hoặc các hook như useEffect() (trong functional components).

Question 10: How can you avoid contradictions in state with this code?

const [isOpen, setIsOpen] = useState(false);
const [buttonText, setButtonText] = useState(isOpen ? "se" : "Open");
function toggle() {
  setIsOpen(!isOpen);
  setButtonText(isOpen ? "Open" : "se");
}

A. The code above is fine as it is.

B. Remove buttonText from state and calculate it dynamically in the render method based on isOpen.

C. Keep both isOpen and buttonText in state but update them separately.

D. Use useEffect to sync buttonText with isOpen.

Chọn B

Giải thích: Biến buttonText là giá trị phụ thuộc trực tiếp vào trạng thái isOpen. Việc lưu cả hai vào state dễ gây ra tình trạng "state không đồng bộ" (contradiction). Cách tốt nhất là chỉ lưu isOpen trong state, còn buttonText tính toán động trong phần render như sau:

const [isOpen, setIsOpen] = useState(false);
const buttonText = isOpen ? "se" : "Open";
      

Cách này giúp tránh trạng thái mâu thuẫn và code gọn gàng, dễ bảo trì hơn.

Question 11: Which process in React corresponds to "send order to kitchen"?

import React, { useState } from 'react';

function Dish({ name }) {
  return <li>{name}</li>;
}

function Kitchen() {
  const [orders, setOrders] = useState([]);

  // Triggering a render (delivering the guest's order to the kitchen)
  const addOrder = (order) => {
    setOrders((prevOrders) => [...prevOrders, order]);
  };

  // Rendering the component (preparing the order in the kitchen)
  const renderOrders = () => {
    return orders.map((order, index) => <Dish key={index} name={order} />);
  };

  // Committing to the DOM (placing the order on the table)
  return (
    <div>
      <h2>Orders:</h2>
      <ul>{renderOrders()}</ul>
    </div>
  );
}

function Waiter() {
  const handleOrder = () => {
    // Triggering a render (delivering the guest's order to the kitchen)
    kitchenRef.current.addOrder('Pizza');
  };

  // A reference to the Kitchen component
  const kitchenRef = React.createRef();

  // Rendering the Waiter component
  return (
    <div>
      <h1>Welcome to the Restaurant!</h1>
      <button onClick={handleOrder}>Place Order</button>
      <Kitchen ref={kitchenRef} />
    </div>
  );
}

export default Waiter;

A. Triggering a render

B. Rendering the component

C. Committing to the DOM

D. Placing the order on the table

Chọn A

Giải thích: Trong React, việc "gửi order tới bếp" tương ứng với Triggering a render, tức là gọi hàm setOrders() để cập nhật state và khởi chạy quá trình render lại component.

Question 12: How do you create a dynamic route in Next.js?

A. By using useRouter() and manually specifying the route.

B. By creating a file with square brackets in the pages directory, e.g., [id].js.

C. By defining a route in the next.config.js file.

D. By using React Router's Route component.

Chọn B

Giải thích: Trong Next.js, để tạo một dynamic route, bạn đặt tên file trong thư mục pages với dấu ngoặc vuông, ví dụ [id].js. Khi người dùng truy cập /posts/1, giá trị 1 sẽ được truyền vào tham số id thông qua getStaticProps, getServerSideProps hoặc hook useRouter(). Các lựa chọn khác không phải là phương pháp chính thức để tạo dynamic route trong Next.js.

Question 13: How do you declare multiple routes in React Router?

A. By nesting <Route> components inside each other.

B. By using the <Routes> component instead of <Route>.

C. By using the path prop with multiple values in a single <Route> component.

D. By using an array of Route components inside the Routes component.

Chọn D

Giải thích: Trong React Router, để khai báo nhiều route, bạn đặt nhiều thành phần <Route> bên trong thành phần <Routes>. Mỗi Route sẽ định nghĩa một đường dẫn và component riêng, ví dụ:

{<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>}

Lựa chọn D mô tả đúng cách triển khai này.

Question 14: How do you create a new Next.js project?

A. Use the create-next-app command-line tool.

B. Install the Next.js package globally with npm.

C. Clone the Next.js starter template from GitHub.

D. Use the npm init command and manually configure the project.

Chọn A

Giải thích: Cách nhanh nhất và được khuyến nghị để tạo một dự án Next.js mới là sử dụng công cụ dòng lệnh create-next-app. Ví dụ lệnh:

npx create-next-app@latest my-next-project

Lệnh này tự động thiết lập cấu trúc thư mục và các phụ thuộc cần thiết để bắt đầu dự án Next.js một cách nhanh chóng.

Question 15: Which of the following statements about reducers in Redux is true?

A. Reducers can only be used with React class components, not functional components.

B. Reducers are responsible for dispatching actions.

C. Reducers should have side effects such as API calls or database interactions.

D. Reducers must be pure functions with no side effects.

Chọn D

Giải thích: Trong Redux, reducer là pure function (hàm thuần túy) nhận vào state và action, sau đó trả về state mới mà không tạo ra tác dụng phụ (side effects). Reducer không thực hiện gọi API, thao tác database hoặc dispatch action khác. Điều này giúp Redux predictable và dễ debug.

Question 16: How can you create a new Git repository?

A. By running git init in the project directory.

B. By adding a remote repository URL.

C. By cloning an existing repository.

D. By committing changes using git commit -m.

Chọn A

Giải thích: Để tạo một Git repository mới, bạn sử dụng lệnh git init trong thư mục dự án. Lệnh này khởi tạo một repository Git trống và tạo thư mục ẩn .git để quản lý lịch sử phiên bản. Các lựa chọn khác liên quan đến việc cấu hình hoặc làm việc với repository đã tồn tại, không phải tạo mới.

Question 17: Which command is used to install the required dependencies for a React project?

A. npm install

B. git clone

C. create-react-app

D. npm start

Chọn A

Giải thích: Lệnh npm install được sử dụng để cài đặt tất cả các dependencies được liệt kê trong tệp package.json của dự án React.
• git clone chỉ để sao chép một repository từ xa về máy.
• create-react-app dùng để khởi tạo dự án React mới.
• npm start dùng để chạy ứng dụng sau khi đã cài đặt xong các dependencies.

Question 18: Select the code snippet that correctly defines a Class Component in React.

A.

class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

B.

function MyComponent() {
  return <div>Hello, World!</div>;
}

C.

const MyComponent = () => {
  return <div>Hello, World!</div>;
};

D.

const MyComponent = React.createClass({
  render() {
    return <div>Hello, World!</div>;
  }
});

Chọn A

Giải thích: Để tạo một Class Component trong React, cần sử dụng từ khóa class và kế thừa từ React.Component.
• Đáp án B và C là Function Components, không phải Class Component.
• Đáp án D sử dụng React.createClass đã bị loại bỏ từ React 16, không còn được dùng.

Question 19: What are PropTypes in React?

A. They are used for creating component classes.

B. They are used for defining the types of component props.

C. They are used for handling events in React.

D. They are used for manipulating the component's state.

Chọn B

Giải thích: PropTypes được dùng để xác định kiểu dữ liệu (type checking) cho các props được truyền vào component trong React. Điều này giúp phát hiện lỗi khi truyền sai kiểu dữ liệu và làm cho code dễ bảo trì hơn.

Question 20: Which HTTP status code indicates a successful response from a server?

A. 200 OK

B. 404 Not Found

C. 500 Internal Server Error

D. 302 Found

Chọn A

Giải thích: Mã trạng thái HTTP 200 OK được sử dụng để chỉ ra rằng yêu cầu từ client đã được xử lý thành công bởi server và phản hồi được trả về bình thường.

Question 21: Compare the use of Redux and Flux for state management. Which statement is true?

A. Redux uses multiple stores, while Flux uses a single store.

B. Flux uses multiple stores, while Redux uses a single store.

C. Both Redux and Flux use multiple stores.

D. Both Redux and Flux use a single store.

Chọn B

Giải thích: Flux sử dụng nhiều store khác nhau để quản lý các phần dữ liệu riêng lẻ, trong khi Redux chỉ sử dụng single store duy nhất để quản lý toàn bộ state của ứng dụng một cách tập trung.

Question 22: Which component is typically used in conjunction with React.lazy to handle the loading state?

A. <ErrorBoundary>

B. <Suspense>

C. <LoadingComponent>

D. <Provider>

Chọn B

Giải thích: React.Suspense được sử dụng cùng với React.lazy để hiển thị fallback UI (ví dụ: loading spinner) trong khi component được tải bất đồng bộ.

Question 23: Can you provide an example of a custom property validator in React that checks if a prop is a positive number?

A. value: PropTypes.positiveNumber

B. value: function(props, propName, componentName)

C. value: PropTypes.number && value > 0

D. value: PropTypes.number && value >= 0

Chọn B

Giải thích: Custom validator được định nghĩa dưới dạng một hàm nhận vào (props, propName, componentName) và trả về Error nếu giá trị không hợp lệ.

Question 24: How can you use a fragment in JSX?

A. By wrapping the JSX elements with <div> tags

B. By using the shorthand syntax <>...</> or <React.Fragment>...</React.Fragment>

C. By creating a separate component for each element

D. By using the fragment() function

Chọn B

Giải thích: Fragment cho phép nhóm nhiều phần tử JSX mà không tạo thêm thẻ DOM, sử dụng cú pháp <>...</> hoặc <React.Fragment>.

Question 25: What does ES6 stand for?

A. Extensible Stylesheet Language 6

B. Enhanced Scripting Language 6

C. ECMAScript 6

D. Efficient Syntax Language 6

Chọn C

Giải thích: ES6 là viết tắt của ECMAScript 6 – phiên bản tiêu chuẩn thứ 6 của JavaScript, giới thiệu nhiều tính năng mới như let/const, arrow function, classes...

Question 26: What is React-Bootstrap?

A. It combines the flexibility and power of the Bootstrap framework with the dynamic nature of React

B. It is a programming language used for back-end development.

C. It is a database management system for React applications.

D. It is a version control system for React projects.

Chọn A

Giải thích: React-Bootstrap là thư viện kết hợp sức mạnh và tính linh hoạt của Bootstrap với tính năng động của React, cung cấp các component sẵn sàng sử dụng để xây dựng giao diện nhanh chóng và dễ dàng.

Question 27: What is the first step in migrating from useState to useReducer with this code?

const [count, setCount] = useState(0);

function increment() {
   setCount(count + 1);
}

A. Replace setCount with dispatch in the existing code.

B. Move all state update logic into a reducer function.

C. Define the reducer function and use dispatch to replace setCount.

D. Import useReducer without changing any code.

Chọn B

Giải thích: Bước đầu tiên khi chuyển từ useState sang useReducer là gom toàn bộ logic cập nhật state vào một hàm reducer. Sau đó, bạn mới sử dụng dispatch để gọi reducer này thay cho setCount.

Từ khóa: useReducer, reducer function, state update logic

---

Question 28: Which class is used to create a button in Bootstrap 5?

A. .btn

B. .button

C. .btn-primary

D. .btn-default

Chọn A

Giải thích: Trong Bootstrap 5, tất cả các nút đều bắt đầu với lớp cơ bản .btn. Các lớp như .btn-primary chỉ bổ sung màu sắc và kiểu dáng, nhưng bản thân nút cơ bản được xác định bởi .btn.

Từ khóa: Bootstrap 5 button class, .btn

---

Question 29: What does the catch method do in a promise chain?

A. It handles the resolved value.

B. It handles errors.

C. It pauses the execution.

D. It converts the promise to a synchronous function.

Chọn B

Giải thích: Phương thức .catch() được sử dụng để xử lý các lỗi (rejections) xảy ra trong chuỗi Promise. Nó giúp ngăn ứng dụng bị crash và cho phép lập trình viên định nghĩa hành vi khi gặp lỗi.

Từ khóa: Promise chain, .catch(), error handling

---

Question 30: In Redux, how do you update the state immutably?

A. By directly modifying the state object.

B. By using the setState() method.

C. By using the splice() method.

D. By creating a new copy of the state object.

Chọn D

Giải thích: Trong Redux, state là immutable, nghĩa là bạn không thể thay đổi trực tiếp nó. Thay vào đó, cần tạo một bản sao mới của state và trả về bản sao này trong reducer.

Từ khóa: Redux, immutable state, copy state object

Question 31: In React, what is the role of Suspense?

A. To handle errors in asynchronous rendering

B. To control the rendering of lazy components

C. To manage state in functional components

D. To handle network requests and API calls

Chọn B

Giải thích: React.Suspense giúp trì hoãn hiển thị một phần UI cho đến khi các component con được tải xong (thường với React.lazy), đảm bảo render trơn tru hơn.

Question 32: Assess the impact of using too many lazy components in a React application. Which statement is true?

A. It will improve the performance of the application

B. It will reduce the number of HTTP requests

C. It may lead to several HTTP requests being made simultaneously

D. It will ensure that all components are loaded upfront

Chọn C

Giải thích: Mỗi lazy component tải lần đầu sẽ tạo HTTP request riêng. Nhiều lazy component có thể dẫn tới nhiều request đồng thời, làm tăng thời gian tải trang.

Question 33: Which code snippet demonstrates how to declare a basic route in React Router?

A. <Route path="/about" component={About} />

B. <Link to="/about">About</Link>

C. import { BrowserRouter as Router, Route } from "react-router-dom";

D. import { Link, Route } from "react-router-dom";

Chọn A

Giải thích: Đây là cú pháp cơ bản để khai báo route trong React Router (v5). Các lựa chọn khác chỉ là liên kết hoặc lệnh import không định nghĩa route.

Question 34: What is the role of HTTP response codes in client-server communication?

A. To indicate the status of the HTTP request

B. To manage state within a component

C. To handle server-side logic

D. To manage routing in a React application

Chọn A

Giải thích: HTTP response codes thông báo trạng thái của yêu cầu (ví dụ 200, 404, 500), hỗ trợ giao tiếp rõ ràng giữa client và server.

Question 35: What is the purpose of package.json in a Node.js project?

A. It defines the project's dependencies and scripts

B. It contains the source code of the project

C. It configures the Node.js environment

D. It manages the project's build process

Chọn A

Giải thích: package.json chứa thông tin dự án Node.js: dependencies, scripts, version và metadata cần thiết để chạy project.

Question 36: How do you create a responsive grid layout using Bootstrap?

A. By using the <div class="grid"> element.

B. By applying the .responsive-grid class to the container element.

C. By using the .row and .col-* classes to create rows and columns.

D. By manually specifying the width of each element using CSS.

Chọn C

Giải thích: Bootstrap sử dụng hệ thống lưới (grid system) dựa trên các class .row và .col-* để tạo bố cục responsive.

Question 37: [Using Bootstrap] How does the for attribute in the <label> element work, and why is it important in forms? (<label for="exampleFormControlInput1" class="form-label">Email address</label>)

A. It styles the label based on form control types

B. It links the label to the form control via the control's id, improving accessibility

C. It is used for adding inline form validation

D. It triggers JavaScript events when the form is submitted

Chọn B

Giải thích: Thuộc tính for trong label liên kết label với form control thông qua id, giúp cải thiện khả năng truy cập (accessibility).

Question 38: What is the purpose of React Hooks?

A. Hooks are functions that are part of the React library.

B. React didn't have a simple way to share reusable functionality between components.

C. Solutions such as higher-order components and render props.

D. Using classes to be unnecessarily confusing and verbose.

Chọn B

Giải thích: Hooks được giới thiệu để giải quyết vấn đề chia sẻ logic giữa các components một cách đơn giản hơn so với các phương pháp cũ (HOC, render props).

Question 39: What is the correct way to declare PropTypes for a component in React?

A. Component.propTypes = { ... }

B. Component.typeCheck = { ... }

C. Component.props = { ... }

D. Component.checkProps = { ... }

Chọn A

Giải thích: PropTypes được khai báo bằng Component.propTypes để xác định kiểu dữ liệu và kiểm tra lỗi runtime cho props.

Question 40: Which React-Bootstrap component is used to display a popup dialog with customizable content?

A. Modal

B. Checkbox

C. Button

D. Card

Chọn A

Giải thích: Thành phần Modal của React-Bootstrap được dùng để hiển thị hộp thoại popup với nội dung tuỳ chỉnh.

Question 41: What is the command to start json-server and specify the JSON file to be served?

A. npm start

B. json-server start

C. npx json-server --watch data.json

D. node server.js

Chọn C

Giải thích: Lệnh npx json-server --watch data.json được dùng để chạy json-server và theo dõi tệp JSON nhằm giả lập REST API nhanh chóng.

Question 42: What is the purpose of the componentDidMount method in React?

A. It is called after the component's render method has been executed.

B. It is called before the component's render method is executed.

C. It is called when the component is about to be unmounted from the DOM.

D. It is called when the component is about to be updated and re-rendered.

Chọn A

Giải thích: Hàm componentDidMount() được gọi một lần duy nhất sau lần render đầu tiên, thường dùng để gọi API hoặc thao tác DOM.

Question 43: How can you access the state and dispatch from Context in a child component?

A. const [state, dispatch] = useContext(CountContext);

B. const { state, dispatch } = CountContext;

C. const { state, dispatch } = useContext(CountContext);

D. const state = CountContext.state;

Chọn C

Giải thích: Hook useContext trả về giá trị context, cho phép destructuring để lấy state và dispatch trong component con.

Question 44: What is event pooling in React?

A. The process of reusing event objects for performance optimization.

B. The process of creating multiple event objects for each event.

C. The process of cleaning up event objects after they are used.

D. The process of handling events in a pool of event handlers.

Chọn A

Giải thích: React sử dụng SyntheticEvent với cơ chế pooling để tái sử dụng đối tượng sự kiện, giúp tối ưu hiệu năng.

Question 45: Which of the following best explains the purpose of the tailwind.config.js file?

A. To configure server-side rendering

B. To define custom utility classes and paths to template files

C. To manage JavaScript dependencies

D. To set up routing for the application

Chọn B

Giải thích: File tailwind.config.js được dùng để cấu hình Tailwind CSS, định nghĩa class tiện ích tùy chỉnh và khai báo đường dẫn template cho dự án.

Question 46: What does REST stand for?

A. Representational State Transfer

B. Representational State Transmission

C. Resource State Transfer

D. Resource State Transmission

Chọn A

Giải thích: REST là viết tắt của Representational State Transfer, một kiến trúc thiết kế cho dịch vụ web.

Question 47: How would you correctly convert the following HTML code to JSX?

<h1>Hedy Lamarr's Todos</h1>
<img
  src="https://i.imgur.com/yXOvdOSs.jpg"
  alt="Hedy Lamarr"
  class="photo"
/>
<ul>
  <li>Invent new traffic lights</li>
  <li>Rehearse a movie scene</li>
  <li>Improve the spectrum technology</li>
</ul>

A.

<>
  <h1>Hedy Lamarr's Todos</h1>
  <img
    src="https://i.imgur.com/yXOvdOSs.jpg"
    alt="Hedy Lamarr"
    className="photo"
  />
  <ul>
    <li>Invent new traffic lights</li>
    <li>Rehearse a movie scene</li>
    <li>Improve the spectrum technology</li>
  </ul>
</>

B.

<>
  <h1>Hedy Lamarr's Todos</h1>
  <img
    src="https://i.imgur.com/yXOvdOSs.jpg"
    alt="Hedy Lamarr"
    class="photo"
  >
  <ul>
    <li>Invent new traffic lights</li>
    <li>Rehearse a movie scene</li>
    <li>Improve the spectrum technology</li>
  </ul>
</>

C.

<>
  <h1>Hedy Lamarr's Todos</h1>
  <img
    src="https://i.imgur.com/yXOvdOSs.jpg"
    alt="Hedy Lamarr"
    class="photo"
  />
  <ul>
    <li>Invent new traffic lights
    <li>Rehearse a movie scene
    <li>Improve the spectrum technology
  </ul>
</>

D.

<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" className="photo">
  <ul>
    <li>Invent new traffic lights</li>
    <li>Rehearse a movie scene</li>
    <li>Improve the spectrum technology</li>
  </ul>
</div>

Chọn A

Giải thích: Trong JSX, thuộc tính class phải được đổi thành className và mọi thẻ phải được đóng đúng chuẩn (self-closing với <img />). Đoạn code ở A là cách viết chính xác nhất.

Question 48: Which of the following correctly passes an object as a prop to a child component?

A.

const user = { name: "Hedy", age: 35 };

function ParentComponent() {
  return <ChildComponent user={user.toString()} />;
}

B.

const user = { name: "Hedy", age: 35 };

function ParentComponent() {
  return <ChildComponent user="user" />;
}

C.

const user = { name: "Hedy", age: 35 };

function ParentComponent() {
  return <ChildComponent user="{user}" />;
}

D.

const user = { name: "Hedy", age: 35 };

function ParentComponent() {
  return <ChildComponent user={user} />;
}

Chọn D

Giải thích: Để truyền một object như một prop trong JSX, ta sử dụng dấu ngoặc nhọn { } để nhúng giá trị JavaScript. Các lựa chọn khác dùng chuỗi hoặc chuyển đổi sai kiểu dữ liệu, không đúng cách truyền prop object.

Question 49: What is the difference between controlled and uncontrolled components in React-Bootstrap?

A. Controlled components are stateless and rely on external state management, while uncontrolled components manage their own state internally.

B. Controlled components have predefined behavior and cannot be customized, while uncontrolled components offer more flexibility.

C. Controlled components are faster and more efficient than uncontrolled components.

D. Uncontrolled components are recommended for complex forms, while controlled components are suitable for simple forms.

Chọn A

Giải thích: Trong React, controlled components dựa vào props và state được quản lý bởi React, mọi thay đổi được điều khiển bởi các hàm xử lý sự kiện. Ngược lại, uncontrolled components tự quản lý state nội bộ thông qua DOM, thường sử dụng ref để lấy giá trị.

Question 50: What is the difference between controlled and uncontrolled components in React-Bootstrap?

A. Controlled components are stateless and rely on external state management, while uncontrolled components manage their own state internally.

B. Controlled components have predefined behavior and cannot be customized, while uncontrolled components offer more flexibility.

C. Controlled components are faster and more efficient than uncontrolled components.

D. Uncontrolled components are recommended for complex forms, while controlled components are suitable for simple forms.

Chọn A

Giải thích: Trong React, controlled components được điều khiển hoàn toàn bởi React thông qua props và state, mọi thay đổi giá trị được quản lý bởi hàm xử lý sự kiện. Ngược lại, uncontrolled components lưu trữ và quản lý state nội bộ bên trong DOM, thường sử dụng ref để truy cập giá trị.

Kết Luận

Kỳ thi FE FER202 - ReactJS tại Đại học FPT luôn là thử thách lớn với sinh viên ngành Front-end Development, đòi hỏi không chỉ kiến thức lý thuyết mà còn sự hiểu sâu bản chất React và khả năng tư duy logic. Thông qua bộ đề FER202 SU25 kèm đáp án chi tiết này, hy vọng các bạn có thể:

• Ôn tập lại toàn bộ các khái niệm ReactJS, Hooks, Props, State, Redux, React Router một cách hệ thống.
• Hiểu rõ tại sao một đáp án là đúng thay vì học thuộc lòng.
• Nắm được những “cú lừa” thường gặp trong đề để tránh mất điểm đáng tiếc.

Dù đề thi chính thức có thể thay đổi qua từng kỳ, nhưng việc nắm vững nền tảng và luyện tập thường xuyên sẽ giúp bạn tự tin hơn khi bước vào phòng thi. Hãy nhớ rằng, ReactJS không chỉ để vượt qua môn học này mà còn là kỹ năng quan trọng trong lập trình web hiện đại.

Chúc các bạn ôn thi hiệu quả và đạt kết quả thật tốt trong kỳ thi FER202 sắp tới!