Tính đến thời điểm hiện nay, React là công nghệ front-end được nhiều công ty sử dụng nhất. Vì vậy, các cơ hội việc làm cho lập trình viên React ngày càng nhiều. Nếu bạn đang chuẩn bị cho buổi phỏng vấn của mình, bạn có thể tham khảo những câu hỏi phỏng vấn React dưới đây để có thể chuẩn bị thật tốt nhé!

Mục lục

Câu hỏi phỏng vấn ReactJS cơ bản

Những đặc điểm của React?

• JSX: JSX là một syntax mở rộng cho JavaScript. Nó được sử dụng với React để mô tả giao diện người dùng như thế nào. Bằng cách sử dụng JSX, chúng ta có thể viết cấu trúc HTML trong cùng file chứa code Javascript
• Thành phần [Components]: Components là những block xây dựng bất kỳ ứng dụng React nào. Một ứng dụng đơn lẻ thường bao gồm nhiều components. Nó chia giao diện nguời dùng thành các phần độc lập, có thể tái sử dụng và có thể được xử lý riêng.
• DOM ảo [Virtual DOM]: React giữ một bản “đại diện” nhưng nhẹ hơn của DOM “thực” trong bộ nhớ, gọi là DOM ảo [Virtual DOM]. Khi state của đối tượng thay đổi, DOM ảo chỉ thay đổi đối tượng trong DOM thực thay vì cập nhật tất cả các đối tượng.
• Truyền dữ liệu một chiều [One-way data-binding]: Truyền dữ liệu một chiều giữ cho mọi thứ đều theo modular và nhanh chóng. Luồng dữ liệu một chiều có nghĩa là khi thiết kế ứng dụng React, bạn thường lồng các components con vào trong các components cha.
• Hiệu suất cao: React chỉ cập nhật những thành phần đã thay đổi, thay vì cập nhật tất cả các components cùng một lúc. Điều này dẫn đến các ứng dụng web nhanh hơn nhiều.

JSX là gì?

JSX là một syntax mở rộng cho JavaScript. Nó được sử dụng với React để mô tả giao diện người dùng như thế nào. Bằng cách sử dụng JSX, chúng ta có thể viết cấu trúc HTML trong cùng file chứa code Javascript

Trình duyệt web có thể đọc JSX trực tiếp không?

Trình SX không phải là đối tượng JavaScript thông thường không thể đọc JSX chi tiết. Bởi vì chúng được xây dựng chỉ để đọc các đối tượng regular JS thông thường và JSX không phải là đối tượng JavaScript thông thường.

Để trình duyệt web đọc file JSX, file đó cần được được chuyển đổi thành một đối tượng JavaScript thông thường. Trong trường hợp này, bạn có thể sử dụng Babel.

DOM ảo [Virtual DOM] là gì?

DOM [Document Object Model] là mô hình đối tượng tài liệu. Đây là một tài liệu HTML có cấu trúc cây logic. Mỗi nhánh của cây kết thúc bằng một node và mỗi node chứa các đối tượng.

React giữ một bản “đại diện” nhưng nhẹ hơn của DOM “thực” trong bộ nhớ, gọi là DOM ảo [Virtual DOM]. Khi state của đối tượng thay đổi, DOM ảo chỉ thay đổi đối tượng trong DOM thực thay vì cập nhật tất cả các đối tượng.

Tại sao nên sử dụng React thay vì các framework khác, ví dụ như Angular?

• Dễ dàng tạo các ứng dụng động: React giúp tạo các ứng dụng web động dễ dàng hơn vì ít code hơn mà lại cung cấp nhiều chức năng hơn, trong khi với các ứng dụng JavaScript, cách code thường có xu hướng trở nên phức tạp.
• Hiệu suất cải thiện: React sử dụng DOM ảo, giúp các ứng dụng web hoạt động nhanh hơn. Virtual DOM so sánh trạng thái trước đó của nó và chỉ cập nhật các thành phần có trạng thái thay đổi trong DOM thực thay vì cập nhật tất cả các thành phần, như các ứng dụng web thông thường.
• Các thành phần có thể tái sử dụng: Components là các block được xây dựng trên bất kỳ ứng dụng React nào và một ứng dụng đơn lẻ thường bao gồm nhiều component. Những components này có logic và components riêng và chúng có thể tái sử dụng qua các ứng dụng. Do đó, chúng giúp giảm đáng kể thời gian phát triển của ứng dụng.
• Luồng dữ liệu một chiều: React tuân theo luồng dữ liệu một chiều. Nghĩa là khi thiết kế một ứng dụng React, chúng ta thường lồng các component con vào trong các component cha. Và vì dữ liệu được xử lý theo một chiều nên sẽ dễ dàng hơn trong việc debug lỗi và biết vấn đề nằm ở đâu trong ứng dụng.
• Các công cụ chuyên dụng để gỡ lỗi dễ dàng: Facebook đã phát hành tiện ích mở rộng chrome dùng để gỡ lỗi các ứng dụng React, giúp quá trình gỡ lỗi React cho các ứng dụng web nhanh hơn và dễ dàng hơn.

Sự khác nhau giữa ES6 và ES5 là gì?

Sự khác nhau giữa 2 tiêu chuẩn này là

• Components và Function

• Exports vs export

• Require vs import

Làm thế nào để tạo một ứng dụng React?

Đây là các bước để tạo ứng dụng React:

• Cài đặt NodeJS trên máy tính bởi vì chúng ta cần NPM để cài đặt thư viện React. NPM là trình quản lý node package. Đây là nơi chứa nhiều thư viện JavaScript , bao gồm cả React

• Cài đặt the create-react-app package bằng command prompt hoặc terminal.

• Cài đặt text editor mà bạn chọn như VS Code hoặc Sublime Text

Sự kiện [Event] trong React là gì?

Event là một hành động mà người dùng hoặc hệ thống có thể kích hoạt, chẳng hạn như nhấn phím, nhấp chuột, v.v.

Các React events được đặt tên bằng cách sử dụng camelCase, thay vì chữ thường trong HTML.

Làm thế nào để tạo một sự kiện [event] trong React?

Một sự kiện React có thể được tạo bằng cách như sau:

Synthetic events trong React là gì?

Synthetic events kết hợp các response của các native events từ các trình duyệt khác nhau vào một API duy nhất, đảm bảo rằng các event nhất quán trên các trình duyệt khác nhau.

Ứng dụng phải được nhất quán khi đang chạy trên bất kỳ trình duyệt nào. Ở đây, preventDefault là một Synthetic events.

Giải thích cách list hoạt động trong React

Chúng ta tạo list trong React như trong JavaScript. Danh sách hiển thị data theo định dạng được sắp xếp

Việc duyệt list được thực hiện bằng hàm map[]

Tại sao cần phải sử dụng các phím trong?

Các key rất quan trọng trong list vì những lý do sau:

• Key là mã định danh duy nhất và được sử dụng để xác định mục nào đã thay đổi, cập nhật hoặc xóa khỏi danh sách
• Giúp xác định components nào cần được re-rendered thay vì re-rendered tất cả các components, giúp tăng components

Form trong React là gì?

React sử dụng các biểu mẫu để người dùng có thể tương tác với các ứng dụng web. Sử dụng các biểu mẫu, người dùng có thể tương tác với ứng dụng và nhập thông tin cần thiết bất cứ khi nào cần. Biểu mẫu chứa các thành phần nhất định như trường văn bản, nút, hộp kiểm, nút chọn [option button], v.v.

Các biểu mẫu được sử dụng cho nhiều tác vụ khác nhau như xác thực người dùng, tìm kiếm, lọc, index, v.v.

Làm thế nào để tạo form trong React?

Để tạo form trong React, ta thực hiện như sau:

Đoạn code trên sẽ tạo ra một trường đầu vào có nhãn Name và nút gửi. Nó cũng sẽ cảnh báo người dùng khi nhấn nút gửi.

Làm sao để viết comment trong React?

Về cơ bản, có 2 cách để bạn có thể viết comment:

• Comment một dòng

• Comment nhiều dòng

Arrow function là gì? Nó được sử dụng thế nào trong React

Arrow function là cách ngắn gọn để viết dunction cho React. Nó không cần thiết phải liên kết “this” bên trong constructor khi sử dụng arrow function. Điều này ngăn cản các bugs gây ra bởi việc sử dụng ‘this’ trong các lần callbacks React.

Sự khác nhau giữa React và React Native?

ReactReact NativeNăm phát hành20132015Nền tảngWebMobile – Android, iOSHTMLCóKhôngCSSCóKhôngYêu cầuJavaScript, HTML, CSSReact.js

Điểm khác nhau giữa React và Angular?

AngularReactTác giảGoogleFacebookMô hìnhMô hình MVC toàn diệnCác lớp [layer] MVCDOMDOM thựcDOM ảo [Virtual DOM]Liên kết dữ liệuHai chiềuĐơn chiềuRenderingClient-SideServer-SideHiệu suấtKhá chậmNhanh hơn nhờ DOM ảo

Câu hỏi phỏng vấn ReactJS về Components

Component trong React là gì?

Components là những block xây dựng bất kỳ ứng dụng React nào. Một ứng dụng đơn lẻ thường bao gồm nhiều components. Nó chia giao diện nguời dùng thành các phần độc lập, có thể tái sử dụng và có thể được xử lý riêng.

Có 2 loại component trong React:

• Functional Components: Các loại component này không có state riêng, chỉ chứa các render methods. Do đó, chúng còn được gọi là stateless components [thành phần không trạng thái]. Họ có thể lấy dữ liệu từ các component khác dưới dạng props [properties].

function Greeting[props] {

return

Welcome to {props.name}

}

• Class Components: Các loại component có thể giữ và quản lý state của riêng chúng và có một render method riêng để trả về JSX trên màn hình. Chúng còn được gọi là Stateful components [Thành phần có trạng thái]

class Greeting extends React.Component {

render[] {

return

Welcome to {this.props.name}

}

}

Cách sử dụng hàm render[] trong React?

Nó yêu cầu mỗi component phải có function render[]. Function này trả về HTML sẽ được hiển thị trong thành phần.

Nếu bạn cần render nhiều phần tử, tất cả các phần tử phải nằm trong một thẻ cha như