Ng. Minh Trí

Chào mừng bạn đến với bài viết thứ hai trong series “Hỏi Nhanh Đáp Gọn”, nơi mà chúng ta tiếp tục khám phá các khái niệm cốt lõi trong ngành tech một cách ngắn gọn, dễ hiểu nhưng vẫn đầy đủ tính ứng dụng. Nếu bài viết đầu tiên đã đưa bạn bước vào thế giới của ReactJS, thì hôm nay, chúng ta sẽ quay trở lại những viên gạch nền tảng của lập trình web: HTML và CSS.

HTML là ngôn ngữ đánh dấu mà mọi website đều cần, còn CSS chính là nghệ thuật tạo nên phong cách và trải nghiệm trực quan cho người dùng. Trong bài viết này, chúng ta sẽ trả lời những câu hỏi thường gặp về HTML/CSS, từ những kiến thức cơ bản như “HTML và CSS thực sự là gì?” đến các tình huống thực tế như “Làm thế nào để tối ưu CSS để tăng tốc độ tải trang?”.

Dù bạn là người mới bắt đầu hay đã có kinh nghiệm, bài viết này hứa hẹn sẽ cung cấp những kiến thức hữu ích để bạn tự tin hơn khi làm việc với HTML và CSS và một số thư viện CSS phổ biến như Tailwind CSS.

HTML

Câu hỏi lý thuyết

HTML là gì và vai trò của nó trong phát triển web?

Sự khác biệt giữa thẻ <div> và <span> là gì?

Bạn có thể liệt kê các loại thẻ HTML5 mới được giới thiệu không? Ví dụ, các thẻ như <header>, <footer>, <article>, <section>, <aside>.

Sự khác biệt giữa thuộc tính id và class là gì? Khi nào nên sử dụng chúng?

Hãy giải thích thuộc tính alt của thẻ <img> và tại sao nó quan trọng.

HTML5 có hỗ trợ lưu trữ dữ liệu không? Nếu có, hãy giải thích về localStorage và sessionStorage.

Hãy giải thích thuộc tính data-* trong HTML và khi nào nên sử dụng nó.

Sự khác biệt giữa thuộc tính defer và async trong thẻ <script> là gì?

Khi nào nên sử dụng thẻ <template> và <slot>?

Bạn sẽ làm thế nào để tối ưu hóa hiệu suất HTML cho một trang web?

Câu hỏi tình huống

Bạn được giao nhiệm vụ tối ưu hóa một trang web để thân thiện hơn với SEO và đảm bảo khả năng truy cập (accessibility). Những thay đổi nào bạn sẽ thực hiện trong HTML?

Một trang web hiện tại tải chậm vì có quá nhiều hình ảnh lớn. Là một developer, bạn sẽ tối ưu hóa HTML như thế nào để cải thiện hiệu suất tải trang?

Trang web của bạn không hiển thị đúng trên các thiết bị di động. Bạn sẽ điều chỉnh HTML như thế nào để hỗ trợ hiển thị tốt hơn?

Bạn có một bảng dữ liệu lớn với hàng nghìn dòng, và việc render bảng làm trang web chạy chậm. Làm thế nào để cải thiện hiệu suất?

Bạn cần tạo một form có trường nhập email với điều kiện phải chứa định dạng hợp lệ và là email công ty (kết thúc bằng @company.com). Làm thế nào để thực hiện điều này?

CSS

Dưới đây là 20 câu hỏi phỏng vấn về CSS, từ cấp độ Junior đến Senior, giúp đánh giá các khía cạnh từ kiến thức cơ bản đến kỹ năng nâng cao:

Junior (Cơ bản)

1. Box Model là gì?
   • Mô tả Box Model trong CSS, các thành phần của nó (Content, Padding, Border, Margin) và cách nó hoạt động.
2. Sự khác biệt giữa relative, absolute, fixed, và sticky trong CSS là gì?
   • Giải thích cách các giá trị position hoạt động trong các ngữ cảnh khác nhau.
3. Sự khác nhau giữa inline, block, và inline-block là gì?
   • So sánh các kiểu hiển thị phần tử và khi nào nên sử dụng từng loại.
4. Giá trị z-index hoạt động như thế nào?
   • Mô tả cách CSS quản lý thứ tự xếp chồng của các phần tử và các yếu tố ảnh hưởng.
5. Pseudo-class và pseudo-element khác nhau như thế nào?
   • Ví dụ: :hover là pseudo-class, còn ::before là pseudo-element.
6. Flexbox là gì? Khi nào nên sử dụng Flexbox thay vì Grid?
   • Mô tả cách Flexbox hoạt động và khi nào nó phù hợp hơn Grid Layout.
7. Cách sử dụng Media Query để làm giao diện responsive?
   • Ví dụ: @media (max-width: 768px) { ... }.
8. Sự khác biệt giữa rem và em là gì?
   • Giải thích cách các đơn vị này được tính toán và ưu/nhược điểm của chúng.
9. Cách để ẩn một phần tử trong CSS mà vẫn giữ nó trong DOM?
   • Các phương pháp như visibility: hidden, opacity: 0, hoặc display: none.
10. Làm thế nào để tạo gradient trong CSS?
    • Ví dụ: Sử dụng linear-gradient hoặc radial-gradient.
11. Cách triển khai một hệ thống lưới (grid system) bằng CSS thuần?
    • Ví dụ về cách sử dụng Flexbox hoặc CSS Grid để tạo layout dạng lưới.
12. Làm thế nào để tối ưu hóa hiệu suất CSS trong dự án lớn?
    • Giảm bớt các selector nặng, sử dụng class cụ thể, CSS minification.
13. Cách xử lý các vấn đề về cross-browser compatibility?
    • Sử dụng CSS reset/normalize, kiểm tra trên các trình duyệt khác nhau, sử dụng các công cụ như Autoprefixer.
14. Cách bạn xử lý trường hợp text bị tràn ra khỏi một container cố định?
    • Sử dụng overflow: hidden, text-overflow: ellipsis, hoặc word-wrap: break-word.
15. Khác biệt giữa absolute và fixed trong CSS là gì?
    • Phạm vi tham chiếu: absolute dựa vào ancestor có position: relative, còn fixed dựa vào viewport.
16. Cách sử dụng CSS Variables (Custom Properties)?
    • Ví dụ: :root { --main-color: #3498db; } và sử dụng với var(--main-color).
17. Cách tạo hiệu ứng animation trong CSS mà không cần JavaScript?
    • Sử dụng @keyframes và các thuộc tính như animation-name, animation-duration.
18. Làm thế nào để một trang web đạt điểm Lighthouse cao về “Best Practices” cho CSS?
    • Tránh các CSS không sử dụng, giảm tải CSS blocking render, và sử dụng critical CSS.
19. Giải thích thuộc tính clip-path trong CSS.
    • Dùng để cắt một phần tử thành các hình dạng cụ thể (hình tròn, tam giác, polygon…).
20. Sự khác biệt giữa grid-template-areas và grid-template-rows/columns trong CSS Grid?
    • Cách hai thuộc tính này được sử dụng để xác định bố cục lưới.

21. Cách tạo một hệ thống thiết kế (design system) với CSS hoặc các công cụ hỗ trợ?
    • Sử dụng CSS Variables, SCSS mixins, hoặc thư viện như TailwindCSS.
22. Các kỹ thuật để giảm bớt “Specificity Wars” trong CSS là gì?
    • Sử dụng các quy tắc CSS đơn giản, tránh dùng !important, và tổ chức CSS một cách hợp lý.
23. Cách xử lý hiệu suất khi tải quá nhiều file CSS trong ứng dụng lớn?
    • Tách CSS theo module (lazy load), sử dụng critical CSS, và inline các style quan trọng.
24. Cách áp dụng BEM (Block, Element, Modifier) trong tổ chức CSS?
    • Ví dụ: button, button__icon, button--primary.
25. Làm thế nào để debug CSS phức tạp trên trình duyệt?
    • Sử dụng DevTools để kiểm tra box model, tìm hiểu computed styles và cascade.
26. Bạn có thể giải thích cách hoạt động của CSS Cascade và nguyên tắc ưu tiên không?
    • Inline styles > ID selectors > Class/Attribute/Pseudo-class > Elements/Pseudo-elements.
27. Cách giải quyết các vấn đề khi CSS gây ra layout shift?
    • Sử dụng thuộc tính aspect-ratio, đặt kích thước cố định cho hình ảnh và font.
28. Làm thế nào để tạo các hiệu ứng chuyển đổi mượt mà?
    • Sử dụng transition với các giá trị phù hợp (ease, ease-in-out, cubic-bezier).
29. Cách tổ chức CSS trong dự án đa ngôn ngữ?
    • Sử dụng các class hoặc CSS variables để thay đổi chiều viết (LTR/RTL).
30. Làm thế nào bạn sẽ xử lý một thiết kế phức tạp chỉ sử dụng CSS thuần?
    • Kết hợp Flexbox, CSS Grid, pseudo-element, và custom properties.

Tailwind CSS

Dưới đây là 15 câu hỏi phỏng vấn về Tailwind CSS, từ cơ bản đến nâng cao, để kiểm tra kiến thức và khả năng ứng dụng của ứng viên:

Cơ bản (Junior)

1. Tailwind CSS là gì và nó khác gì so với CSS thuần hoặc các framework CSS khác như Bootstrap?
   • Tìm hiểu khái niệm utility-first CSS framework và sự khác biệt về cách tiếp cận.
2. Làm thế nào để cài đặt Tailwind CSS vào một dự án mới?
   • Cách sử dụng npm install tailwindcss và cấu hình file tailwind.config.js.
3. Tailwind CSS hoạt động dựa trên những khái niệm nào?
   • Các khái niệm như utility-first, responsive design, và state-based styles (hover, focus, active).
4. Làm thế nào để áp dụng responsive styles trong Tailwind CSS?
   • Sử dụng các prefix như sm:, md:, lg:, xl:, và 2xl:.
5. Tailwind CSS có hỗ trợ pseudo-classes như hover hay focus không?
   • Ví dụ: hover:bg-blue-500, focus:ring-2.
6. Làm thế nào để thêm padding hoặc margin bằng Tailwind CSS?
   • Sử dụng các class như p-4, px-2, m-5, mt-3.
7. Làm thế nào để sử dụng các class liên quan đến typography trong Tailwind CSS?
   • Ví dụ: text-lg, font-bold, leading-relaxed.
8. Làm thế nào để tùy chỉnh theme của Tailwind CSS?
   • Thêm hoặc sửa đổi trong file tailwind.config.js với extend trong theme.
9. Tailwind JIT mode là gì và tại sao nó quan trọng?
   • Giải thích cách JIT mode chỉ tạo ra các class CSS được sử dụng, giúp giảm kích thước file.
10. Cách sử dụng các plugin trong Tailwind CSS?
    • Ví dụ: Sử dụng plugin như @tailwindcss/forms hoặc tạo plugin tùy chỉnh.
11. Tailwind CSS có hỗ trợ Dark Mode không? Làm thế nào để kích hoạt nó?
    • Sử dụng cấu hình darkMode trong tailwind.config.js và class dark:.
12. Cách sử dụng các utility liên quan đến Flexbox và Grid trong Tailwind CSS?
    • Ví dụ: flex, flex-col, justify-center, grid, grid-cols-3.
13. Làm thế nào để tạo một button sử dụng Tailwind CSS với hiệu ứng hover và focus?
    • Ví dụ: bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2.
14. Cách xử lý custom class hoặc thêm CSS riêng vào dự án sử dụng Tailwind CSS?
    • Sử dụng file CSS riêng, khai báo với @apply hoặc viết CSS thuần.

16. Làm thế nào để tối ưu hóa kích thước file CSS khi triển khai ứng dụng Tailwind CSS?
    • Sử dụng purge trong tailwind.config.js hoặc tích hợp JIT mode.
17. Cách tổ chức một dự án lớn sử dụng Tailwind CSS để tránh lộn xộn?
    • Sử dụng @apply để tái sử dụng class và tách các module.
18. Tailwind có hỗ trợ các transition và animation không? Làm thế nào để sử dụng?
    • Ví dụ: transition duration-300 ease-in-out, hoặc cấu hình animation tùy chỉnh.
19. Làm thế nào để thêm các giá trị tùy chỉnh (custom values) vào Tailwind CSS?
    • Thêm các giá trị vào extend trong tailwind.config.js, như màu sắc, font, spacing.
20. Tailwind CSS có phù hợp với mọi dự án không? Khi nào không nên sử dụng Tailwind CSS?
    • Đánh giá dự án theo các tiêu chí như độ phức tạp, yêu cầu thiết kế, hoặc khả năng học tập của nhóm.
21. Làm thế nào để xử lý trạng thái giao diện phức tạp (như loading, disabled) với Tailwind CSS?
    • Sử dụng các class như disabled:opacity-50 hoặc loading:animate-spin.
22. Tailwind CSS có hỗ trợ CSS Variables không, và làm thế nào để tích hợp?
    • Thêm CSS Variables tùy chỉnh và sử dụng trong file cấu hình hoặc style trực tiếp.
23. Làm thế nào để xử lý các yêu cầu thiết kế khác biệt cho từng brand khi sử dụng Tailwind CSS?
    • Sử dụng variants trong file cấu hình hoặc thiết lập theme dựa trên Context.

Chào mừng bạn đến với series “Hỏi Nhanh Đáp Gọn” – nơi bạn sẽ tìm thấy những câu hỏi và câu trả lời ngắn gọn, súc tích nhưng không kém phần sâu sắc về các chủ đề trong ngành tech. Với mục tiêu giúp bạn (thật sự là mình) nắm bắt kiến thức một cách nhanh chóng, series này sẽ tập trung vào những khái niệm quan trọng, các câu hỏi phỏng vấn thường gặp, và cả những tình huống thực tế mà bạn có thể đối mặt.

Bài viết đầu tiên: ReactJS

Trong bài viết đầu tiên này, chúng ta sẽ khám phá ReactJS – một thư viện JavaScript mạnh mẽ, phổ biến để xây dựng giao diện người dùng (UI). React không chỉ là công cụ quen thuộc của front-end developer, mà còn là chủ đề thường xuyên xuất hiện trong các buổi phỏng vấn.

Câu hỏi lý thuyết

• ReactJS là gì? Tại sao nên sử dụng ReactJS thay vì các framework khác như Angular hoặc Vue?

Answer: ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook (2013), dùng để xây dựng giao diện người dùng (UI) dựa trên các components. React cho phép phát triển các ứng dụng web động, hiệu năng cao và dễ quản lý thông qua cách tiếp cận dựa trên trạng thái (state).

ReactJS là một thư viện chứ không phải framework toàn diện như Angular. Do đó, nó linh hoạt hơn, cho phép tự do tích hợp các công cụ hoặc thư viện khác như Redux, React Router, NextJS,…

Bonus, Follow-up câu trước: À anh có nghe em nói về web động, vậy web động là gì? Nó khác gì web tĩnh? Khi nào sử dụng web động, khi nào sử dụng web tĩnh?

Web động là các trang web có nội dung được tạo ra hoặc cập nhật một cách tự động dựa trên tương tác của người dùng hoặc dữ liệu từ cơ sở dữ liệu. Nội dung của web động thay đổi theo thời gian thực mà không cần phải chỉnh sửa thủ công.

Ví dụ: Một trang thương mại điện tử hiển thị sản phẩm khác nhau tùy thuộc vào người dùng đang tìm kiếm gì.

Web tĩnh là các trang web có nội dung cố định, được viết sẵn bằng HTML, CSS và JavaScript. Khi người dùng truy cập, nội dung của trang web không thay đổi trừ khi chỉnh sửa mã nguồn và cập nhật lại.

• Ví dụ: Trang giới thiệu doanh nghiệp (About Us), Trang 1 bài viết trong mục blog, Trang FAQs,…

Nói chung thì web động là HTML, CSS, JavaScript + Backend (PHP, Node.js, Python Django/ Flask, v.v.)

• Component trong React là gì? Phân biệt giữa Class Component và Functional Component.

Component là một thành phần nhỏ độc lập và có thể tái sử dụng trong React. Nó đại diện cho một phần của giao diện người dùng (UI) và quản lý logic, trạng thái, và hiển thị riêng của nó. Một ứng dụng React thường được xây dựng bằng cách kết hợp nhiều component lại với nhau.

Ví dụ, trong một trang web, có thể tạo các component riêng biệt cho header, footer, hoặc form.

Class Component: Sử dụng trong các dự án cũ hoặc khi cần tận dụng các lifecycle methods truyền thống. Thường phù hợp nếu đang làm việc với một codebase đã viết trước khi React Hooks được giới thiệu.

Functional Component: Là tiêu chuẩn hiện nay, nhờ sự hỗ trợ của React Hooks. Nên sử dụng trong các dự án mới vì cú pháp đơn giản, nhẹ, và hiệu năng tốt hơn. React khuyến khích chuyển đổi từ Class Component sang Functional Component trong các phiên bản mới, vì React Hooks đã làm giảm sự cần thiết của Class Component.

import React, { useState } from 'react';

function Greeting() {
  const [name, setName] = useState('mintrishere.com');

  return <h1>Xin chào, {name}!</h1>;
}

export default Greeting;

//Ket qua: >Xin chào, mintrishere.com!

• Props và State khác nhau như thế nào trong React? Khi nào nên sử dụng chúng?

Props là viết tắt của “Properties”. Đây là một cơ chế để truyền dữ liệu từ component cha xuống component con. Props là immutable, tức là không thể thay đổi được trong component con. Component con chỉ có thể đọc và hiển thị dữ liệu từ props, chứ không thể sửa đổi nó. Props thường được sử dụng khi chúng ta cần truyền dữ liệu để cấu hình hoặc hiển thị thông tin trong component con.

Ví dụ: Người dùng có một danh sách sản phẩm và muốn hiển thị mỗi sản phẩm dưới dạng một card. Dữ liệu của sản phẩm (như tên, giá, hình ảnh, mô tả) sẽ được truyền từ component cha (ProductList) xuống các component con (ProductCard) qua Props.

//Product Card
export default function ProductCard({ product }) {
  return ( 
  <img
        src={product.image}
        alt={product.name}
        style={{ width: "100%", height: "150px", objectFit: "cover" }}
      />
      <h3>{product.name}</h3>
      <p>{product.description}</p>
      <h4>${product.price}</h4>
      <button style={{ padding: "5px 10px", background: "#007bff", color: "#fff", border: "none", borderRadius: "3px", cursor: "pointer" }}>
        Thêm vào giỏ hàng
      </button>
    </div>
  );
}

import ProductCard from "./ProductCard"; // Component con

function ProductList() {
  // Dữ liệu danh sách sản phẩm
  const products = [
    {
      id: 1,
      name: "Laptop Dell XPS 13",
      price: 2400,
      image: "https://via.placeholder.com/150",
      description: "Mỏng nhẹ, hiệu năng cao.",
    },
    {
      id: 2,
      name: "Tai nghe Sony WH-1000XM5",
      price: 350,
      image: "https://via.placeholder.com/150",
    }]
  return (
    <div>
      <h1>Danh sách sản phẩm</h1>
      <div style={{ display: "flex", gap: "20px" }}>
        {products.map((product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
}

export default ProductList;

State: State là nơi lưu trữ dữ liệu nội tại của component. Đây là dữ liệu có thể thay đổi trong vòng đời của component. State là mutable, tức là có thể thay đổi bằng cách sử dụng hàm setState (class component) hoặc hook useState (functional component). State được sử dụng khi chúng ta cần quản lý dữ liệu động, như trạng thái người dùng nhập liệu, dữ liệu thay đổi từ API, hoặc trạng thái tương tác (như bật/tắt, click).

Khi nào sử dụng: Sử dụng Props khi dữ liệu cần được truyền từ component cha xuống và không cần thay đổi trong component con. Sử dụng State khi dữ liệu cần được quản lý và thay đổi trong chính component

• Hãy giải thích cách sử dụng useState và useEffect. Cho ví dụ thực tế trong dự án đã thực hiện.

useState là một hook giúp ta quản lý trạng thái trong functional components. Ta có thể khai báo một state trong component mà không cần phải sử dụng class. Ví dụ, ở nút Back to Home, useState giúp lưu trữ và cập nhật trạng thái của việc hiển thị nút và vị trí cuộn trước đó. Cụ thể:

  const [visible, setVisible] = useState(false);
  const [prevScrollPos, setPrevScrollPos] = useState(0);

Nút sẽ không hiển thị khi mới bắt đầu. Khi người dùng cuộn lên, setVisible(true) được gọi để hiển thị nút, và khi cuộn xuống, setVisible(false) ẩn nút đi. prevScrollPos giúp lưu trữ vị trí cuộn của trang trước đó, để so sánh với vị trí cuộn hiện tại và quyết định có hiển thị nút “scroll to top”.

Về useEffect, hook này dùng để thực hiện các tác vụ có side effects như gọi API, lắng nghe sự kiện hoặc cập nhật DOM. Trong dự án, ta có thể sử dụng useEffect để gọi API, lấy danh sách sản phẩm, nút back to home,… Ta thiết lập hook này để chạy khi component render lần đầu hoặc khi bộ lọc thay đổi.

useEffect(() => {
  const handleScroll = () => {
    const currentScrollPos = window.pageYOffset;

    if (currentScrollPos < prevScrollPos && currentScrollPos > 100) {
      setVisible(true);
    } else {
      setVisible(false);
    }

    setPrevScrollPos(currentScrollPos);
  };

  window.addEventListener('scroll', handleScroll);

  return () => window.removeEventListener('scroll', handleScroll);
}, [prevScrollPos]);

Mỗi khi người dùng cuộn lên (tức là currentScrollPos < prevScrollPos), và vị trí cuộn vượt quá 100px, setVisible(true) được gọi để hiển thị nút “scroll to top”. Sau mỗi lần xử lý sự kiện cuộn, ta cập nhật prevScrollPos với giá trị cuộn hiện tại để dùng cho lần cuộn tiếp theo. Ta sử dụng hàm return trong useEffect để dọn dẹp sự kiện khi component bị unmount hoặc khi prevScrollPos thay đổi. Điều này giúp tránh việc sự kiện cuộn tiếp tục chạy sau khi component không còn tồn tại trong DOM.

• Lifting State Up là gì? Tại sao chúng ta cần thực hiện điều này trong React? Cho ví dụ thực tế.

Lifting State Up trong React là quá trình di chuyển state từ một hoặc nhiều component con lên component cha của chúng. Điều này giúp chia sẻ dữ liệu hoặc trạng thái giữa các component con thông qua component cha, tạo ra một nguồn sự thật duy nhất (single source of truth).

Sử dụng Lifting State Up khi:

1. Đồng bộ dữ liệu: Khi nhiều component cần dùng chung một trạng thái hoặc dữ liệu, ta cần lưu trữ state ở component cha để đảm bảo mọi component con đều truy cập cùng một giá trị.
2. Giảm phức tạp: Việc chia sẻ state trực tiếp giữa các component con thường phức tạp, trong khi dùng component cha làm trung gian sẽ giúp quản lý dễ dàng hơn.
3. Tính tái sử dụng: Component con chỉ nhận dữ liệu từ props mà không cần tự quản lý state, giúp chúng dễ tái sử dụng.

Có hai component: Component cha quản lý state của giỏ hàng và chia sẻ nó với các component con.

1. ProductList: Hiển thị danh sách sản phẩm và nút “Add to Cart”.
2. Cart: Hiển thị danh sách sản phẩm đã thêm vào giỏ hàng.

Trong ví dụ này, component cha EcommerceApp chịu trách nhiệm quản lý state cart để lưu danh sách sản phẩm được thêm vào giỏ hàng, đồng thời cung cấp hàm addToCart để cập nhật trạng thái giỏ hàng. Component con ProductList nhận hàm addToCart qua props và gọi hàm này khi người dùng nhấn nút “Add to Cart”. Component con Cart nhận danh sách giỏ hàng (cart) qua props và hiển thị nội dung tương ứng. Đây là một trường hợp của Lifting State Up vì trạng thái cart được lưu trữ tại component cha (EcommerceApp), từ đó chia sẻ xuống cả hai component con (ProductList và Cart) thông qua props. Điều này đảm bảo dữ liệu luôn đồng bộ giữa các thành phần trong ứng dụng.

import React, { useState } from "react";

function EcommerceApp() {
  const [cart, setCart] = useState([]);

  const addToCart = (product) => {
    setCart((prevCart) => [...prevCart, product]);
  };

  return (
    <div>
      <h1>E-Commerce App</h1>
      <ProductList addToCart={addToCart} />
      <Cart cart={cart} />
    </div>
  );
}

const ProductList = ({ addToCart }) => {
  const products = [
    { id: 1, name: "Laptop", price: 1000 },
    { id: 2, name: "Phone", price: 500 },
  ];

  return (
    <div>
      <h2>Products</h2>
      {products.map((product) => (
        <div key={product.id}>
          {product.name} - ${product.price}
          <button onClick={() => addToCart(product)}>Add to Cart</button>
        </div>
      ))}
    </div>
  );
};

const Cart = ({ cart }) => (
  <div>
    <h2>Cart</h2>
    {cart.length === 0 ? (
      <p>No items in cart</p>
    ) : (
      <ul>
        {cart.map((item, index) => (
          <li key={index}>
            {item.name} - ${item.price}
          </li>
        ))}
      </ul>
    )}
  </div>
);

export default EcommerceApp;

• Hãy giải thích khái niệm “one-way data binding” trong React. Tại sao React chọn phương pháp này? One-way data binding khác gì lifting state up?

One-way data binding trong React là khái niệm dữ liệu chỉ di chuyển theo một hướng: từ component cha xuống component con thông qua props. Điều này có nghĩa là trạng thái hoặc dữ liệu được quản lý trong component cha và được truyền xuống các component con để hiển thị hoặc xử lý.

Với one-way data binding, trạng thái chỉ được quản lý tập trung tại một nơi (thường là component cha hoặc qua state management như Redux). Điều này giảm nguy cơ xảy ra lỗi khi nhiều component cố gắng cập nhật cùng một trạng thái. React ưu tiên one-way data binding vì sự đơn giản và dễ bảo trì, đồng thời vẫn cho phép thực hiện two-way data binding khi cần thông qua các hàm callback.

One-way Data Binding là một nguyên tắc tổng quát mà React luôn áp dụng. Dữ liệu chỉ đi từ cha xuống con qua props. Component con không có quyền thay đổi trực tiếp trạng thái của component cha mà chỉ sử dụng dữ liệu để hiển thị hoặc xử lý.

Lifting State Up là một kỹ thuật cụ thể để giải quyết vấn đề chia sẻ dữ liệu giữa các component. Dữ liệu được di chuyển từ con lên cha, sau đó component cha chia sẻ lại dữ liệu với các component con khác. Điều này xảy ra khi các component con cần sử dụng chung một trạng thái và không thể tự quản lý độc lập.

One-way Data Binding đảm bảo rằng luồng dữ liệu trong ứng dụng e-commerce luôn từ cha xuống con, ví dụ: danh sách sản phẩm từ component cha ProductList xuống từng ProductCard. Trong khi đó, Lifting State Up sẽ được sử dụng nếu cần các component như ProductCard và Cart chia sẻ cùng trạng thái giỏ hàng thông qua component cha EcommerceApp.

• JSX là gì? Nó khác gì với JavaScript thông thường?

JSX (JavaScript XML) là một cú pháp mở rộng của JavaScript, được sử dụng trong React để mô tả giao diện người dùng một cách trực quan và dễ đọc. JSX cho phép viết HTML trực tiếp trong JavaScript, nhưng thực chất, nó được biên dịch thành các lệnh JavaScript thông qua Babel (hoặc các công cụ tương tự) để tạo nên giao diện.

// JSX: Có thể nhúng các biểu thức JavaScript bằng cách sử dụng {}.
const name = 'John';
const element = <h1>Hello, {name}!</h1>;
// JavaScript thông thường: Biểu thức phải được truyền thủ công vào hàm React.createElement.
const name = 'John';
const element = React.createElement('h1', null, `Hello, ${name}!`);
// JSX: Sử dụng cú pháp giống HTML, nhưng có một số điểm khác biệt như className thay cho class, htmlFor thay cho for.
<div className="container" htmlFor="input-id"></div>

• DOM là gì? Virtual DOM là gì? Tại sao nó lại quan trọng trong React?

DOM (Document Object Model) là một cấu trúc dữ liệu dạng cây, đại diện cho toàn bộ nội dung và cấu trúc của một trang web. Nó cho phép JavaScript tương tác, truy cập, và thay đổi nội dung hoặc giao diện của trang web.

<div id="app">
  <h1>Hello, world!</h1>
</div>
/*
- HTML
  - body
    - div (id="app")
      - h1
        - "Hello, world!"

Mỗi lần DOM được thay đổi, trình duyệt phải cập nhật, tính toán lại bố cục (reflow) và vẽ lại giao diện (repaint), điều này gây tốn tài nguyên và thời gian.

Virtual DOM là một khái niệm được React sử dụng để cải thiện hiệu suất khi thao tác với giao diện. Nó là một bản sao ảo của DOM thực, được lưu trong bộ nhớ và chỉ tồn tại trong JavaScript.

1. Tạo bản sao ảo: Khi giao diện thay đổi, React sẽ cập nhật Virtual DOM thay vì thao tác trực tiếp với DOM thật.
2. So sánh (Diffing): React so sánh Virtual DOM mới với phiên bản trước đó để tìm ra các thay đổi (diff).
3. Cập nhật tối ưu (Reconciliation): Chỉ những phần thực sự thay đổi được áp dụng lên DOM thật, giúp giảm thiểu số lần thao tác DOM.

Thay vì cập nhật toàn bộ DOM, React chỉ cập nhật những phần thực sự thay đổi. Điều này giảm thiểu số lần reflow và repaint, giúp ứng dụng nhanh hơn, đặc biệt khi giao diện phức tạp. React cho phép tập trung vào việc mô tả giao diện dựa trên trạng thái (state) mà không cần lo lắng về cách DOM được cập nhật. Với Virtual DOM, React tự động xử lý logic cập nhật giao diện, giảm thiểu lỗi liên quan đến việc thao tác DOM thủ công.

• React Router là gì? Làm thế nào để tạo một ứng dụng đa trang trong React?
• Controlled Component và Uncontrolled Component khác nhau như thế nào? Cho ví dụ.

Controlled Component: Là các component mà dữ liệu của chúng được kiểm soát bởi state của React. Input trong Controlled Component không lưu giá trị của nó bên trong DOM, mà giá trị được quản lý thông qua state và cập nhật thông qua các sự kiện. React chịu trách nhiệm lưu trữ và cập nhật giá trị của input.

Uncontrolled Component: Là các component mà dữ liệu của chúng được kiểm soát trực tiếp bởi DOM. React không kiểm soát giá trị của input; thay vào đó, sử dụng một ref để truy xuất giá trị từ DOM khi cần thiết. Giá trị input được lưu trực tiếp trong DOM thay vì state của React.

Ví dụ thực tế sử dụng Uncontrolled Component: Giả sử đang xây dựng một form đăng ký nhận bản tin (newsletter subscription form). Trong trường hợp này, chỉ cần lấy dữ liệu từ người dùng khi họ nhấn nút “Submit”, mà không cần theo dõi giá trị input theo thời gian thực. Đây là một trường hợp phù hợp để sử dụng Uncontrolled Component.

import React, { useRef } from "react";

function NewsletterForm() {
  const emailRef = useRef(); // Tạo ref để truy cập giá trị input
  const nameRef = useRef(); // Ref để lấy giá trị tên

  const handleSubmit = (e) => {
    e.preventDefault();
    const email = emailRef.current.value; // Lấy giá trị email từ DOM
    const name = nameRef.current.value; // Lấy giá trị name từ DOM
    if (email && name) {
      console.log("Subscribed with:", { name, email });
      alert(`Thank you for subscribing, ${name}!`);
    } else {
      alert("Please fill in all fields.");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Name:
          <input type="text" ref={nameRef} placeholder="Enter your name" />
        </label>
      </div>
      <div>
        <label>
          Email:
          <input type="email" ref={emailRef} placeholder="Enter your email" />
        </label>
      </div>
      <button type="submit">Subscribe</button>
    </form>
  );
}

export default NewsletterForm;

• Key trong React là gì? Tại sao cần sử dụng key khi render danh sách?
• Hàm render() trong React hoạt động như thế nào? Khi nào nó được gọi?
• Lifecycle Methods trong Class Component là gì? Liệt kê các giai đoạn chính.
• Context API là gì? Nó giải quyết vấn đề gì trong React?
• Sự khác biệt giữa useEffect với các phương thức lifecycle trong Class Component là gì?
• Fragments trong React là gì? Tại sao nên sử dụng React.Fragment thay vì một thẻ div?

React Fragments là một tính năng trong React cho phép nhóm nhiều phần tử con lại với nhau mà không thêm bất kỳ thẻ DOM nào dư thừa vào kết quả render. Fragment không xuất hiện trong DOM thực, giúp tạo ra một cây DOM gọn gàng hơn.

//Dạng đầy đủ
<React.Fragment>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</React.Fragment>
//Dạng rút gọn
<>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</>

Tại sao nên sử dụng React.Fragment thay vì thẻ <div>

1. Tránh thẻ DOM dư thừa: Khi sử dụng <div> để bọc các phần tử con, thẻ <div> sẽ được thêm vào DOM thực, dẫn đến cây DOM phức tạp hơn, đặc biệt khi có nhiều tầng lồng nhau.
2. Việc thêm các thẻ DOM không cần thiết có thể làm tăng chi phí render và làm ứng dụng chậm hơn, đặc biệt khi số lượng phần tử lớn.
3. Hỗ trợ các thuộc tính (nếu dùng React.Fragment): Fragment có thể nhận các thuộc tính như key (thường dùng trong danh sách động):

function Items({ data }) {
  return data.map((item) => (
    <React.Fragment key={item.id}>
      <h3>{item.title}</h3>
      <p>{item.description}</p>
    </React.Fragment>
  ));
}

• Làm thế nào để tối ưu hiệu năng của một ứng dụng React? Đề cập đến memoization hoặc React.memo.
• Redux là gì? Khi nào nên sử dụng Redux trong một ứng dụng React?
• Error Boundaries là gì? Làm thế nào để sử dụng chúng để quản lý lỗi trong React?
• Sự khác nhau giữa useMemo và useCallback? Khi nào nên dùng mỗi cái?
• React Fiber là gì, và nó cải thiện hiệu suất React như thế nào?
• Compound Components là gì, và khi nào nên sử dụng?
• Làm thế nào để sử dụng dynamic import với React để tối ưu hóa tải trang?
• Render Props khác gì với Higher Order Components (HOC)? Khi nào nên chọn cái nào?
• Prop drilling là gì, và làm thế nào để tránh vấn đề này?

Câu hỏi tình huống

Bạn có một danh sách lớn (hàng nghìn mục) cần hiển thị trên giao diện người dùng. Khi người dùng cuộn, ứng dụng bị giật lag. Bạn sẽ xử lý vấn đề này như thế nào?

Ứng dụng của bạn có nhiều component lồng nhau, và một state cần được chia sẻ giữa các component sâu bên trong. Làm thế nào bạn quản lý state trong trường hợp này?

Một component cha đang truyền props xuống cho nhiều component con. Khi cha re-render, tất cả các component con cũng bị re-render dù không có thay đổi. Bạn sẽ làm gì để tối ưu hóa?

Người dùng báo cáo rằng khi một API gọi bị lỗi, giao diện hiển thị một màn hình trắng và không có thông báo lỗi. Làm thế nào để cải thiện trải nghiệm người dùng trong trường hợp này?

Bạn cần hiển thị dữ liệu từ một API RESTful và đảm bảo rằng giao diện người dùng không bị đứng khi chờ API trả về dữ liệu. Bạn sẽ xử lý điều này như thế nào?

Ứng dụng của bạn cần xử lý dữ liệu người dùng nhạy cảm và bảo vệ chống lại các lỗ hổng bảo mật phổ biến như XSS (Cross-Site Scripting). Bạn sẽ thực hiện các bước nào?

Bạn cần xây dựng một bảng dữ liệu có thể sắp xếp, tìm kiếm và phân trang. Bạn sẽ thiết kế và tối ưu hóa component này như thế nào?