Câu hỏi 1. Nếu bạn muốn nhập chỉ Component từ thư viện React, bạn sử dụng cú pháp nào?

• import React.Component from 'react'
• import [ Component ] from 'react'
• import Component from 'react'
• import { Component } from 'react'

Câu hỏi 2. Nếu một component hàm luôn phải render cùng cách với cùng props, tối ưu hiệu suất đơn giản nào có sẵn cho nó?

• Bọc nó trong higher-order component React.memo.
• Thực hiện Hook useReducer.
• Thực hiện Hook useMemo.
• Thực hiện phương thức lifecycle shouldComponentUpdate.

Câu hỏi 3. Làm thế nào để sửa lỗi cú pháp xảy ra khi chạy mã này?

const person =(firstName, lastName) =>
{
  first: firstName,
  last: lastName
}
console.log(person("Jill", "Wilson"))

• Bọc object trong dấu ngoặc đơn.
• Gọi hàm từ một file khác.
• Thêm câu lệnh return trước dấu ngoặc nhọn đầu tiên.
• Thay thế object bằng một mảng.

Câu hỏi 4. Nếu bạn thấy import sau trong một file, cái gì được sử dụng để quản lý state trong component?

import React, {useState} from 'react';

• React Hooks
• stateful components
• toán học
• class components

Câu hỏi 5. Sử dụng cải thiện literal object, bạn có thể đặt lại các giá trị vào một object. Khi bạn log person ra console, kết quả là gì?

const name = 'Rachel';
const age = 31;
const person = { name, age };
console.log(person);

• {{name: "Rachel", age: 31}}
• {name: "Rachel", age: 31}
• {person: "Rachel", person: 31}}
• {person: {name: "Rachel", age: 31}}

Câu hỏi 6. Thư viện kiểm thử nào thường được liên kết với React?

• Mocha
• Chai
• Sinon
• Jest

Tham khảo

Câu hỏi 7. Để lấy phần tử đầu tiên từ mảng ("cooking") bằng cách sử dụng destructuring array, bạn phải điều chỉnh dòng này như thế nào?

const topics = ['cooking', 'art', 'history'];

• const first = ["cooking", "art", "history"]
• const [] = ["cooking", "art", "history"]
• const [, first]["cooking", "art", "history"]
• const [first] = ["cooking", "art", "history"]

Câu hỏi 8. Làm thế nào để xử lý việc chuyển qua lại trong cây component mà không cần phải chuyển props xuống thủ công ở mỗi cấp độ?

• React Send
• React Pinpoint
• React Router
• React Context

Tham khảo

Câu hỏi 9. Console sẽ hiển thị gì khi chạy đoạn mã sau?

const [, , animal] = ['Horse', 'Mouse', 'Cat'];
console.log(animal);

• Horse
• Cat
• Mouse
• undefined

Câu hỏi 10. Tên công cụ nào được sử dụng để chuyển JSX và biến nó thành cuộc gọi createElement?

• JSX Editor
• ReactDOM
• Browser Buddy
• Babel

Câu hỏi 11. Tại sao bạn có thể sử dụng useReducer thay vì useState trong một component React?

• khi bạn muốn thay thế Redux
• khi bạn cần quản lý trạng thái phức tạp hơn trong ứng dụng
• khi bạn muốn cải thiện hiệu suất
• khi bạn muốn phá vỡ ứng dụng sản xuất của bạn

Câu hỏi 12. Props nào từ đối tượng props có sẵn cho component với cú pháp sau?

<Message {...props} />

• bất kỳ props nào không thay đổi
• tất cả chúng
• props con
• bất kỳ props nào đã thay đổi

Câu hỏi 13. Xem xét đoạn mã sau từ React Router. Bạn gọi :id trong thuộc tính path là gì?

<Route path="/:id" />

• Đây là một route modal
• Đây là một route parameter
• Đây là một route splitter
• Đây là một route link

Câu hỏi 14. Nếu bạn tạo một component có tên là Dish và render nó ra DOM, loại phần tử nào sẽ được render?

function Dish() {
  return <h1>Mac and Cheese</h1>;
}

ReactDOM.render(<Dish />, document.getElementById('root'));

• div
• phần tử section
• component
• h1

Câu hỏi 15. React element này trông như thế nào d

ựa trên đoạn mã sau? (Phụ thuộc: Dựa trên đoạn mã sau, element React này trông như thế nào?)

React.createElement('h1', null, "What's happening?");

• <h1 props={null}>What's happening?</h1>
• <h1>What's happening?</h1>
• <h1 id="component">What's happening?</h1>
• <h1 id="element">What's happening?</h1>

Tham khảo

Câu hỏi 16. Bạn cần thêm thuộc tính nào vào component Suspense để hiển thị spinner hoặc trạng thái loading?

function MyComponent() {
  return (
    <Suspense>
      <div>
        <Message />
      </div>
    </Suspense>
  );
}

• lazy
• loading
• fallback
• spinner

Tham khảo

Câu hỏi 17. Làm thế nào để bạn mô tả biến message được bọc trong dấu ngoặc nhọn dưới đây?

const message = 'Hi there';
const element = <p>{message}</p>;

• một hàm JS
• một phần tử JS
• một biểu thức JS
• một bọc JSX

Câu hỏi 18. Bạn có thể sử dụng gì để xử lý chia mã?

• React.memo
• React.split
• React.lazy
• React.fallback

Tham khảo

Câu hỏi 19. Khi bạn sử dụng useLayoutEffect?

• để tối ưu hóa cho tất cả các thiết bị
• để hoàn thành cập nhật
• để thay đổi bố cục của màn hình
• khi bạn cần trình duyệt vẽ trước khi hiệu ứng chạy

Nguồn "useLayoutEffect là một phiên bản của useEffect mà bắn trước khi trình duyệt vẽ lại màn hình."

Câu hỏi 20. Sự khác biệt giữa hành vi click của hai nút này là gì (giả sử rằng this.handleClick được ràng buộc đúng)?

A. <button onClick={this.handleClick}>Click Me</button>
B. <button onClick={event => this.handleClick(event)}>Click Me</button>

• Button A sẽ không có quyền truy cập vào đối tượng sự kiện khi nhấp vào nút.
• Button B sẽ không kích hoạt thành công trình xử lý this.handleClick.
• Button A sẽ không kích hoạt thành công trình xử lý this.handleClick.
• Không có sự khác biệt.