51+ Câu hỏi phỏng vấn React được hỏi nhiều nhất

ReactJS là gì?

Trước khi tìm hiểu về các câu hỏi phỏng vấn ReactJS, bạn cần nắm rõ về khái niệm ReactJS. Đây là một trong những thư viện của JavaScript phổ biến. React cung cấp cho người dùng các giao diện sử dụng mẫu.

React hiện tại vẫn được sử dụng khá phổ biến bởi nhiều doanh nghiệp hiện nay. Trong đó phải kể đến một số công ty lớn như Facebook, Whatsapp, Netflix, eBay,… Lý do ReactJS được sử dụng nhiều do đây là thư viện nguồn mở dễ dàng sử dụng, hỗ trợ Reusable Component trong Java.

Câu hỏi phỏng vấn React fresher, junior

Các câu hỏi phỏng vấn React cấp độ fresher, junior dưới đây chủ yếu về các khái niệm, chức năng của các thuộc tính, thành phần trong React. Khi trả lời các câu hỏi này, bạn nên cố gắng lồng ghép thêm một số kinh nghiệm cá nhân liên quan trực tiếp đến câu hỏi. Điều đó có thể là một điểm cộng về kiến thức dành cho bạn.

ReactJS có ưu điểm gì?

Câu hỏi phỏng vấn ReactJS này nhà tuyển dụng đánh giá kiến thức tổng quan của bạn. Ứng viên cần liên kết kiến thức, trả lời lần lượt các ưu điểm về ReactJS một cách cụ thể. Ưu điểm phải kể đến như sau:

Ứng viên cần liên kết kiến thức, trả lời lần lượt các ưu điểm về ReactJS một cách cụ thể

• Hiệu quả trong việc tạo DOM ảo của riêng chúng. Điều này mang lại cho người dùng sự linh hoạt cực kỳ lớn và tăng hiệu suất một cách kinh ngạc. ReactJS cũng tính toán thay đổi cần thiết thực hiện trong DOM. Quá trình này cần tránh những hoạt động DOM tốn kém và thực hiện cập nhật có lợi cho người dùng.
• Sử dụng ReactJS tôi có thể viết Javascript một cách đơn giản. Đồng thời còn làm việc fix lỗi ứng dụng dễ dàng hơn. Sau khi cài đặt tiện ích mở rộng tôi nhìn thấy một cách trực diện vào DOM ảo.
• ReactJS sử dụng cho SEO: Vấn đề lớn của các Framework Javascript là khiến người dùng cảm thấy không thân thiện với công cụ tìm kiếm. Tuy có cải thiện nhưng công cụ tìm kiếm gặp khó khăn khi đọc các ứng dụng nặng Javascript. 

Đây đều là những ưu điểm nổi bật của ReactJS bạn cần nắm rõ khi đi phỏng vấn để trả lời một cách hiệu quả.

Bạn hiểu DOM ảo như thế nào và hoạt động ra sao?

DOM(Document Object Model) và là đại diện tài liệu cấu trúc cây logic, HTML. Những nút bắt đầu, kết thúc mỗi nhánh của cây, đồng thời các nút đó chứa đối tượng.

React giữ bản trình bày nhỏ gọn của Dom thực trong bộ nhớ, được gọi là DOM ảo. Khi trạng thái đối tượng thay đổi DOM ảo đổi đối tượng đó trong DOM thực.

Về cách hoạt động của chúng như sau: Bất cứ dữ liệu cơ bản này thay đổi, giao diện người dùng được hiển thị lại trong DOM ảo. Sự khác biệt giữa bản đại diện DOM trước đó và mới tính toán. Sau đó DOM được cập nhật với những thứ thực sự thay đổi.

Các giai đoạn trong vòng đời của thành phần ReactJS?

Bạn cần cho nhà tuyển dụng biết được các giai đoạn trong vòng đời của thành phần React, cụ thể như sau:

Vòng đời của thành phần React trải qua 3 giai đoạn 

• Giai đoạn kết xuất ban đầu: Khi thành phần chuẩn bị bắt đầu hành trình sống và tìm đường đến DOM.
• Giai đoạn cập nhật: Thành phần được thêm vào DOM, với khả năng cập nhật và hiển thị lại khi xảy ra sự thay đổi trạng thái, hỗ trợ. Điều này chỉ xảy ra ở trong giai đoạn này.
• Giai đoạn ngắt kết nối: Giai đoạn cuối cùng trong vòng đời thành phần, nhưng bị phá hủy và xóa khỏi DOM.

Đây là thông tin bạn cần trả lời khi nhà tuyển dụng đặt ra câu hỏi về giai đoạn trong vòng đời của thành phần ReactJS. 

Bạn hiểu Refs trong React là gì, trường hợp nào sử dụng?

Refs(References trong React) là thuộc tính giúp lưu trữ tham chiếu đến một phần tử hay thành phần React cụ thể. Chúng được trả về bởi hàm cấu hình thành phần.

Đây cũng là lúc được sử dụng để trả về các tham chiếu đến từ một phần tử, thành phần cụ thể được trả bởi render. Chúng hữu ích khi cần các phép đo DOM hay thêm phương thức các thành phần.

Trường hợp nên sử dụng Refs: Quản lý tiêu điểm, chọn phát lại văn bản hoặc phương tiện, kích hoạt ảnh bắt buộc, tích hợp thư viện DOM bên thứ ba.

Keys dùng để làm gì?

Nếu bạn gặp câu hỏi phỏng vấn ReactJS này cần chú ý và đưa ra ví dụ minh họa. Ứng viên có thể trả lời như sau: Bắt đầu thực hiện việc Render một tập hợp trong chính React việc thêm một key cho mỗi thành phần lại lại là cần thiết.

Qua đó giúp React theo dấu liên kết giữa thành phần và dữ liệu. Nếu chọn key nên là một ID duy nhất hay như Index của Array không chọn key đần đến sự thay đổi lạ và xóa phần tử tử tập hợp. Nếu câu trả lời xác thực và kèm theo ví dụ chắc chắn là yếu tố ăn điểm dễ dàng.

React JS and React Native khác nhau thế nào?

React JS and React Native đều là công nghệ do Facebook phát triển nhưng có sự khác biệt rõ rệt ở chỗ:

• React JS là một thư viện JavaScript mã nguồn mở được dùng để phát triển giao diện người dùng (UI) trong ứng dụng web.
• React Native là một framework phát triển ứng dụng di động cross-platform, sử dụng JavaScript và React, cho phép xây dựng và phát triển ứng dụng trên các nền tảng như Android và iOS.

Tóm lại, cách để phân biệt ngắn gọn nhất đó là Reactjs thì chuyên dùng cho web, còn React Native thì chỉ dùng cho mobile.

Phân biệt React và Angular?

Dưới đây là các điểm khác nhau giữa React và Angular:

React:

• Loại: Thư viện (Library).
• Ngôn ngữ: JavaScript hoặc TypeScript.
• Tập trung: Phát triển giao diện người dùng (UI).
• Cấu trúc dự án: Tự do tổ chức.
• Hiệu suất: Dễ dàng tối ưu hóa.

Angular:

• Loại: Framework.
• Ngôn ngữ: TypeScript.
• Tập trung: Phát triển ứng dụng web toàn diện.
• Cấu trúc dự án: Cấu trúc dự án chuẩn.
• Hiệu suất: Mặc định có nhiều tính năng, cần tối ưu hóa.

React có sử dụng HTML không?

Không, Nó sử dụng JSX, tương tự như HTML. JSX là tập hợp các cú pháp JavaScript cho phép tạo thành phần giao diện bằng các thẻ div, p, h1,... 

Ví dụ:

Bạn hãy nêu 2 nhược điểm nổi bật nhất của React

• Việc tích hợp React với framework MVC như Rails yêu cầu cấu hình phức tạp.
• React yêu cầu người dùng phải có kiến ​​thức về việc tích hợp giao diện người dùng vào khung MVC.

Virtual DOM (DOM ảo) là gì? 

Virtual DOM - Document Object Model (DOM ảo) là một bản sao đại diện có dung lượng nhẹ của DOM thực, được dùng để cải thiện hiệu suất, giảm độ phức tạp và tối ưu hoá quá trình cập nhật giao diện người dùng. Khi dữ liệu trong ứng dụng thay đổi, DOM ảo sẽ cập nhật từng phần tử riêng lẻ. React sẽ so sánh DOM ảo với DOM thực hiện tại, sau đó sẽ thực hiện các thay đổi cần thiết cho DOM thực.

Phân biệt DOM thực và DOM ảo

ES6 và ES5 khác nhau điểm gì? 

ES5 (ECMAScript 2009) là phiên bản JavaScript phổ biến nhất hiện nay.

ES6 (ECMAScript 2015) là phiên bản JavaScript mới nhất với một số tính năng và cải tiến cho JavaScript.

Điểm khác nhau cơ bản của 2 phiên bản này có thể theo dõi bảng dưới đây:

Bạn tạo một ứng dụng React thế nào? 

Các bước để tạo một ứng dụng React là:

• Cài đặt Node.js và công cụ quản lý gói cần thiết cho phát triển React - npm (Node Package Manager).
• Cài Create React App trong Command Prompt hoặc Terminal và chạy lệnh npm install -g create-React-app
• Tạo một dự án React mới bằng lệnh npx create-React-app ten-du-an
• Cài đặt các phụ thuộc cho dự án bằng lệnh npm install.
• Cài đặt một text editor tùy theo lựa chọn, ví dụ như VS Code hoặc Sublime Text. 
• Bắt đầu phát triển dự án React của bạn, mở file App.js và bắt đầu code.

Form trong React là gì? 

Form (biểu mẫu) trong React là một thành phần của giao diện người dùng, sử dụng HTML form để tạo và JavaScript để xử lý dữ liệu thu thập được từ form.

Flux trong React là gì?

Facebook sử dụng rộng rãi kiến trúc flux để phát triển các ứng dụng client-side web. Nó không phải là một framework hay một thư viện, Flux chỉ đơn giản là một loại kiến ​​trúc mới bổ sung cho React và khái niệm Unidirectional Data Flow.

Các tính năng quan trọng của React là gì?

Dưới đây một số tính năng phổ biến và quan trọng của React:

• Cho phép bạn sử dụng thư viện của bên thứ 3
• Tiết kiệm thời gian.
• Phát triển nhanh hơn.
• Đơn giản và có thể kết hợp.
• Được hỗ trợ đầy đủ bởi Facebook.
• Code ổn định với liên kết dữ liệu một chiều.
• React Components.

Jest là gì?

Jest là một framework để kiểm thử đơn vị JavaScript được tạo bởi Facebook dựa trên Jasmine, cung cấp khả năng tạo mô hình tự động và môi trường Jsdom. Jest cũng được sử dụng như một test component trong React.

Props trong Reactjs là gì?

Props (Properties) là kênh liên lạc giữa các thành phần, luôn luôn chuyển từ component cha sang component con giống như cách mà argument (đối số) được truyền trong một function (hàm). Props được sử dụng để lưu trữ giá trị của thuộc tính thẻ trong React và hoạt động tương tự như các thuộc tính HTML. 

Giải thích cách sử dụng hàm arrow trong React

Hàm arrow giúp bạn dự đoán hành vi của bug khi được chuyển dưới dạng lệnh callback cho các sự kiện hoặc tạo hàm xử lý dữ liệu. Khi sử dụng hàm arrow, không cần thiết phải ràng buộc ‘this’ bên trong hàm tạo. 

Các bước của lifecycle component trong React gồm những gì?

Các bước quan trọng trong Lifecycle Reactjs gồm:

• Khởi tạo
• Cập nhật State/Property
• Destruction - lifecycle of React

Loại thông tin nào kiểm soát segment trong React?

Có 2 loại thông tin kiểm soát một segment trong React đó là: State and Props

• State: Dữ liệu được quản lý bởi một component React. Thông tin trạng thái sẽ thay đổi. 
• Props: Dữ liệu được truyền từ một component cha sang component con và được giải quyết trong suốt lifetime của một bộ phận.

Gói animation phổ biến nhất trong hệ sinh thái React là gì?

Có 2 gói animation phổ biến trong React là:

• React Motion
• React Transition Group

Câu hỏi phỏng vấn React (ReactJS) senior

Câu hỏi phỏng vấn React trình độ senior thường được nhà tuyển dụng lựa chọn cho nhóm ứng viên có kinh nghiệm làm việc liên quan đến React/Reactjs từ 3 - 5 năm trở lên. Ngoài việc trả lời chuẩn kiến thức, ứng viên có thể tùy biến câu trả lời bằng cách kết hợp với kinh nghiệm cá nhân đúc rút ra từ quá trình lập trình Reactjs. 

JSX element có thể được gắn vào JSX components khác không?

Có. Có thể sử dụng JSX element gắn vào các JSX components khác, giống như việc lồng các phần tử HTML với nhau.

REFS trong React là gì?

Refs (viết tắt của reference) là một tham chiếu đến phần tử (element), cung cấp cách để tương tác trực tiếp với các node DOM hoặc React component. Refs thường được dùng để điều khiển focus của input, kích hoạt các animation và tương tác với thư viện DOM của một bên thứ ba.

Hãy liệt kê tên các prototypes được xác định được sử dụng trong React

Các prototype được sử dụng phổ biến trong Reactjs là:

• number
• string
• array
• object
• element

Các để dispatch dữ liệu in-store?

Chúng ta có thể dispatch dữ liệu của đến một thành phần khác dựa trên hành động lưu trữ của component cha.

Phân biệt getInitialState() and constructor() trong React

Nếu bạn muốn tạo một component bằng cách mở rộng ‘React. Component’, thì hàm tạo sẽ giúp bạn khởi động State. Nhưng nếu bạn muốn tạo bằng cách là dùng ‘React.createClass.’ thì nên sử dụng ‘genInitiaState.’

Làm cách nào để kiết xuất (render) server-side trong React?

Chúng ta có thể dùng Reaction server để render server-side.

Bạn hãy liệt kê một số phương thức trong một React-dom package

Một số phương thức quan trọng cho React-dom packages là:

• render()
• hydrate()
• createPortal()
• unmountComponentAtNode()
• findDOMNode()

Fragments trong React là gì?

Fragments là một cách để nhóm các component con mà không cần sử dụng node DOM bổ sung nào. Fragments có tác dụng giảm số lượng component được tạo và làm cho code trở nên rõ ràng, dễ hiểu hơn.

Ví dụ:

render() {

return (

);

}

Nêu điểm khác biệt lớn nhất giữa createElement and cloneElement

• createElement là phương thức tạo ra React element mới và không sao chép hay điều chỉnh phần tử hiện có. Nó nhận 3 tham số là tên của element hoặc React component, đối tượng chứa thuộc tính của element và danh sách các element con.
• cloneElement là phương thức dùng để sao chép hoặc điều chỉnh element hiện có. Các tham số mà cloneElement sử dụng là Element hiện có, props và children.

Một số câu hỏi khác thường được hỏi khi phỏng vấn React

Tham khảo thêm một số câu hỏi phỏng vấn React theo các chủ đề nhỏ dưới đây như Reactjs component, Redux, React styling, React testing,... để sẵn sàng với bất cứ câu hỏi nào từ người phỏng vấn chuyên môn. 

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

1. ReactJS Components là gì?

ReactJS Components là các khối xây dựng cơ bản của Reactjs, cho phép chia giao diện người dùng thành các phần nhỏ, có thể tái sử dụng và quản lý dễ dàng hơn. Một component có hai thành phần chính là State (trạng thái) và Props (thuộc tính).

2. Hãy nêu các loại của React component

Hai loại React components phổ biến là:

• Function component
• Class component

3. React State là gì?

React State là một đối tượng JavaScript dùng để lưu trữ, quản lý dữ liệu mà một component React có thể thay đổi, theo dõi. State có thể lưu trữ dữ liệu động như số đếm, giá trị lựa chọn hoặc trạng thái của form.

4. Pure components trong Reactjs là gì?

Pure components là component có thể thay thế nhanh chóng bất kỳ component nào chỉ bằng lệnh render(). Nó giúp code của bạn trở nên đơn giản và nâng cao hiệu suất của ứng dụng hơn. 

5. Tác dụng của empty tags <> </> là gì?

Các thẻ Empty  <> </> trong React được dùng để khai báo các đoạn. 

6. Strict mode trong Reactjs là gì?

StrictMode cho phép chạy kiểm tra và cảnh báo cho React components, giúp nổi bật các vấn đề mà không kiết xuất bất kỳ giao diện người dùng nào. Nó chỉ chạy trên development build.

7. Context trong Reactjs là gì?

React context giúp truyền dữ liệu bằng việc sử dụng các cây React components, từ đó có thể chia sẻ dữ liệu toàn cục giữa các React components khác nhau.

8. Babel trong Reactjs là gì?

Babel Reactjs là trình biên dịch JavaScript dùng để chuyển đổi bản mới nhất của JavaScript như ES6, ES7 thành ES5 JavaScript để các trình duyệt đều có thể hiểu.

9. Cách để trình duyệt có thể đọc được JSX file là gì?

Nếu bạn muốn trình duyệt đọc được JSX thì JSX file phải được thay thế bằng việc sử dụng JSXtransformer như Babel. Sau đó gửi ngược lại cho trình duyệt.

10. Các mà bạn re-render một component mà không cần sử dụng hàm setState() là gì?

Có thể sử dụng hàm forceUpdate() để re-rending bất cứ component nào.

11. Controlled Components là gì?

Controlled components là một component kiểm soát các phần tử đầu vào (input elements).

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

1. Redux trong React là gì?

Redux là một thư viện được sử dụng để phát triển giao diện người dùng. Nó là vùng chứa trạng thái cho các ứng dụng JavaScript nên được sử dụng để quản lý trạng thái ứng dụng. Bạn có thể kiểm tra và chạy một ứng dụng được phát triển bằng Redux trong các môi trường khác nhau.

2. Action trong Redux là gì?

Nó là một hàm trả về một đối tượng hành động. Loại hành động và dữ liệu hành động luôn được lưu trữ trong đối tượng hành động. Các hành động có thể gửi dữ liệu giữa Store và ứng dụng phần mềm. Tất cả thông tin được Cửa hàng truy xuất đều được tạo ra bởi các hành động.

3. 'Store' trong Redux là gì?

Redux có một tính năng gọi là 'Store' cho phép bạn lưu toàn bộ Trạng thái của ứng dụng tại một nơi. Do đó, tất cả Trạng thái của thành phần đều được lưu trữ trong Cửa hàng để bạn nhận được các bản cập nhật thường xuyên trực tiếp từ Cửa hàng. Cây trạng thái duy nhất giúp bạn theo dõi các thay đổi theo thời gian và gỡ lỗi hoặc kiểm tra ứng dụng.

4. Mục đích của việc sử dụng bindActionCreators là gì?

BindActionCreators là một hàm trong React Redux, giúp liên kết sự kiện dựa trên bộ điều phối hành động với phần tử HTML. Mục đích sử dụng BindActionCreators để chuyển đổi các hàm action creator thành hàm callback để có thể sử dụng trong các component.

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

1. React Router là gì

React Router là một thư viện định tuyến cho React, nó cho phép bạn thêm các luồng screen mới vào ứng dụng và giữ cho URL đồng bộ với những gì đang được hiển thị trên page.

2. React Router có vai trò gì? 

Chúng ta cần có React Router bởi nó là một phần cực kỳ quan trọng của bất kỳ web nào. React Router cho phép người dùng điều hướng giữa các trang khác nhau trong ứng dụng web và một số vai trò khác như:

• Quản lý URL
• Xây dựng SPA (Single Page Application)
• Quản lý trạng thái UI
• Tích hợp Redux và quản lý State

Ngoài ra React router cũng có nhiều lợi ích so với định tuyến thủ công là tính dễ dùng, hiệu quả và kiểm tra bằng các React testing.

3. Các bước để triển khai React routing là gì? 

Để triển khai React routing cần thực hiện theo các bước cơ bản sau:

• Cài đặt thư viện React Router. Có thể dùng lệnh npm install React-router-dom
• Thêm component và hàm của React Router vào ứng dụng.
• Tạo các route.
• Thêm các route vào ứng dụng.

Câu hỏi phỏng vấn React Styling

1. Cách để viết 1 inline style trong React?

Ta có thể viết một inline style như sau:

<div style={{height: 10}}>

   Câu hỏi phỏng vấn React mới nhất từ ITNavi

</div>

 2. Khi nào nên sử dụng top-class elements cho hàm element?

Nên sử dụng top-class element khi element thực hiện một stage hoặc vòng đời (lifetime cycle).

3. Cách sử dụng của thư viện ‘prop-types’?

Thư viện ‘Prop-types’ cho phép thực hiện kiểm tra runtime type checking để tìm props và đối tượng tương tự trong ứng dụng gần đây.

Tìm cơ hội việc làm lập trình React ở đâu?

Việc làm lập trình React, Reactjs chất lượng, phúc lợi tốt luôn có sẵn trên ITNavi đang chờ đón bạn nắm bắt cơ hội:

• Hơn 200 việc làm Reactjs chuẩn gu, chuẩn yêu cầu, uy tín từ 100+ công ty công nghệ nổi tiếng hàng đầu.
• Lựa chọn việc làm IT React tại Hà Nội, TPHCM, Đà Nẵng,... dễ dàng.
• Tạo “nét”, tối ưu UI CV IT với ứng dụng MyCV.

Cánh cửa này đóng lại sẽ có cánh cửa khác mở ra, nhưng đừng chần chừ mà bỏ lỡ cơ hội nhận việc lập trình viên React “hợp gu” trên ITNavi!

Đăng ký form hoặc apply CV trực tiếp tại đây.

Cần chuẩn bị những gì cho buổi hẹn phỏng vấn React

Trong một buổi phỏng vấn IT sẽ có HR chuyên hỏi các vấn đề liên quan đến cá nhân, kỹ năng mềm, câu hỏi tình huống,... và người phỏng vấn chuyên môn như Dev Lead, PM đánh giá kiến thức của ứng viên. Để vượt qua được cả hai nội dung phỏng vấn này, bạn hãy chuẩn bị thật kỹ tinh thần, kiến thức dù là trước, trong hay sau buổi phỏng vấn. 

Chuẩn bị trước buổi phỏng vấn:

• Tìm hiểu về xu hướng thị trường công nghệ, range lương, thông tin công ty, công việc.
• Luyện tập trả lời câu hỏi phỏng vấn React trước để tăng sự tự tin.
• Chuẩn bị sổ tay, sổ ghi chép.
• …

Cư xử trong buổi phỏng vấn:

• Đầu tiên luôn cần một nụ cười tự tin.
• Tác phong về giờ giấc, trang phục chuẩn chỉnh, thái độ hòa nhã, hợp tác.
• Trả lời câu hỏi trung thực, vào thẳng vấn đề
• Linh hoạt sử dụng body language
• …

Sau buổi phỏng vấn:

• Nên gửi mail cảm ơn tới nhà tuyển dụng.
• Có thể xin ý kiến đóng góp về tác phong, thái độ để rút kinh nghiệm (đối với các bạn sinh viên mới ra trường chưa có nhiều kinh nghiệm phỏng vấn)

Một tip quan trọng để bạn vượt qua những câu hỏi trong buổi phỏng vấn React đó là:

• Với các câu hỏi từ HR, chủ yếu để đánh giá về con người và sự phù hợp với văn hóa công ty, bạn nên trả lời với thái độ cầu tiến, câu từ gãy gọn, không lan man.
• Các câu hỏi chuyên môn sẽ được hỏi theo format what - when - why. Vì vậy, trong trường hợp bạn ở level junior, senior,... đã có kinh nghiệm thực tế, thì trả lời trực tiếp vào vấn đề và tùy biến thêm ví dụ thực tế trong project đã từng làm. Nếu bạn chưa biết câu trả lời hoặc mới chỉ nghe đến chủ đề đó mà chưa hiểu sâu thì cũng không sao cả. Hãy trao đổi thẳng thắn rằng bạn sẽ tìm hiểu theo các key mà nhà tuyển dụng gợi ý để có thể học hỏi được nhiều hơn. Trung thực luôn là điểm 10 trong mắt nhà tuyển dụng, kể cả về chuyên môn hay khả năng của bạn.

Chỉ cần có cơ hội, bạn hoàn toàn có thể làm chủ buổi phỏng vấn với những kinh nghiệm và các câu hỏi phỏng vấn React fresher, junior, senior,... trên đây. ITNavi sẽ cập nhật liên tục các câu hỏi chuyên môn cùng các chủ đề nhỏ hơn về Reactjs, Redux, React Internationalization, React Testing,... để giúp ích cho bạn nhiều hơn.