ABy offloading all rendering tasks to the client's browser
BBy eliminating the need for any server infrastructure
CBy resulting in faster initial page load times and better search engine optimization (SEO)
DBy simplifying complex client-side state management.
Lời giải
Đáp án đúng: "By resulting in faster initial page load times and better search engine optimization (SEO)". Với server-side rendering (SSR, kết xuất phía máy chủ), Next.js chạy component React trên server và gửi về trình duyệt HTML đã có sẵn nội dung, rồi React mới hydrate (gắn sự kiện) để trang tương tác được. Người dùng thấy nội dung sớm hơn vì không phải chờ tải và chạy hết JavaScript, còn bot của công cụ tìm kiếm đọc được nội dung ngay trong HTML nên SEO tốt hơn. "By offloading all rendering tasks to the client's browser" mô tả client-side rendering, ngược với SSR. "By eliminating the need for any server infrastructure" sai vì SSR chính là cần server chạy mỗi khi có yêu cầu. "By simplifying complex client-side state management." sai vì SSR liên quan cách sinh HTML, không thay thế công cụ quản lý state như Redux hay Context.
BUse the rows and cols attributes for all form elements
CUse the size variants of the .form-control class, like .form-control-sm or .form-control-lg
DApply custom JavaScript functions
Lời giải
Đáp án đúng: "Use the size variants of the .form-control class, like .form-control-sm or .form-control-lg". Bootstrap 5 có sẵn biến thể kích thước cho ô nhập: thêm .form-control-sm để ô nhỏ hơn hoặc .form-control-lg để ô lớn hơn, các lớp này chỉnh đồng bộ chiều cao, padding, cỡ chữ và bo góc theo hệ thiết kế; với select thì dùng .form-select-sm, .form-select-lg, còn cả cụm input group dùng .input-group-sm, .input-group-lg. "Set width in inline CSS" chỉ đổi bề ngang của một phần tử, không đổi chiều cao hay cỡ chữ, lại đi ngược cách dùng lớp có sẵn của Bootstrap; bề ngang thường điều khiển bằng hệ lưới hoặc lớp w-25, w-50. "Use the rows and cols attributes for all form elements" sai vì rows, cols là thuộc tính riêng của textarea, không áp cho input hay select. "Apply custom JavaScript functions" là không cần thiết, kích thước là việc của CSS và Bootstrap đã có lớp sẵn.
BBy applying the .responsive-grid class to the container element.
CBy using the .row and .col-*-* classes to create rows and columns.
DBy manually specifying the width of each element using CSS.
Lời giải
Đáp án đúng: "By using the .row and .col-*-* classes to create rows and columns.". Hệ lưới của Bootstrap gồm ba lớp: container bao ngoài, row tạo một hàng và col chia hàng thành tối đa 12 phần; dạng col-*-* ghép một mốc màn hình với số cột, ví dụ col-md-6 nghĩa là từ cỡ md trở lên chiếm 6 trên 12 phần, còn dưới cỡ đó thì cột xếp chồng, nên chỉ bằng tên lớp mà bố cục tự đáp ứng theo kích thước màn hình. "By using the <div class="grid"> element." sai vì hệ lưới mặc định của Bootstrap không dựa vào một phần tử grid; phải dùng row và col. "By applying the .responsive-grid class to the container element." sai vì Bootstrap không có lớp responsive-grid; tính đáp ứng đến từ các lớp col có mốc màn hình. "By manually specifying the width of each element using CSS." làm được nhưng là tự viết CSS chứ không dùng Bootstrap, lại phải tự viết media query cho từng mốc màn hình, đúng thứ hệ lưới đã làm sẵn.
Đáp án đúng: ".carousel". Trong Bootstrap, component Carousel là trình chiếu (slideshow) xoay vòng qua một loạt mục như ảnh hoặc khối nội dung, có nút trước sau, chấm chỉ vị trí và có thể tự chuyển sau một khoảng thời gian; ta dựng nó bằng lớp carousel trên khung ngoài cùng các lớp carousel-inner và carousel-item cho từng slide, còn React-Bootstrap có sẵn component Carousel tương ứng. ".popover" sai vì popover là hộp nổi nhỏ hiện cạnh một phần tử khi bấm hoặc rê chuột để hiển thị thêm thông tin, không chuyển qua nhiều slide. ".modal" sai vì modal là hộp thoại phủ lên trang để hiển thị nội dung hoặc biểu mẫu và chờ người dùng đóng lại. ".nav-pills" sai vì đây là kiểu trình bày thanh điều hướng với các mục dạng viên bo tròn, dùng cho menu hoặc tab chứ không phải trình chiếu.
BA navigate function that can be used to navigate to a new location
CA boolean indicating navigation status
DA string representing the current route.
Lời giải
Đáp án đúng: "A navigate function that can be used to navigate to a new location". Trong React Router v6, useNavigate trả về đúng một hàm, thường đặt tên là navigate; gọi navigate('/home') để chuyển sang đường dẫn mới, navigate(-1) để lùi một bước lịch sử, hoặc truyền thêm tùy chọn replace, state, nên hook này dùng cho điều hướng bằng mã, chẳng hạn sau khi gửi form hay đăng nhập xong. Phương án "An object with navigation methods." mô tả đối tượng history có push, replace của React Router v5 (lấy bằng useHistory), không phải giá trị của useNavigate. Phương án "A boolean indicating navigation status" sai vì muốn biết trạng thái điều hướng thì dùng useNavigation trong data router, còn useNavigate không trả về boolean. Phương án "A string representing the current route." là thông tin lấy được từ useLocation qua thuộc tính pathname, không phải từ useNavigate.
". Trong React Router, dấu hai chấm đặt trước một đoạn đường dẫn đánh dấu tham số động: path="/user/:id" khớp /user/42 hay /user/abc và đưa giá trị đó vào match.params.id ở v5 hoặc useParams() ở v6. Prop component={UserProfile} là cú pháp v5 (v6 viết element), nhưng điểm được hỏi là dấu hai chấm. "
AThe component to display while the lazy component is loading
BThe component to display when an error occurs during loading
CThe component to display when the lazy component is rendered
DThe component to display when Suspense is not supported
Lời giải
Đáp án đúng: "The component to display while the lazy component is loading". Khi bọc một component nạp bằng React.lazy trong Suspense, lần render đầu mã của nó chưa tải xong nên component đó tạm treo (suspend); lúc ấy Suspense hiện phần tử truyền qua prop fallback, thường là spinner hay dòng chữ đang tải, và tự thay bằng component thật khi tải xong. "The component to display when an error occurs during loading" là việc của Error Boundary, thường bọc bên ngoài Suspense để bắt lỗi tải. "The component to display when the lazy component is rendered" sai vì lúc đó chính component lazy hiện ra, fallback đã biến mất. "The component to display when Suspense is not supported" sai vì fallback không phải phương án dự phòng cho môi trường không hỗ trợ; Suspense là một phần của React, fallback chỉ gắn với trạng thái đang chờ.
BTo bundle all components into a single large file
CTo reduce the initial load time by loading parts of the app only when needed
DTo split CSS and JavaScript into separate files
Lời giải
Đáp án đúng: "To reduce the initial load time by loading parts of the app only when needed". Code splitting (tách mã) chia gói JavaScript lớn thành nhiều chunk nhỏ; với React.lazy và import() động, mã của một trang hay component chỉ được tải khi người dùng thực sự cần tới nó, nhờ vậy lần tải đầu nhẹ hơn và trang hiện nhanh hơn, còn Suspense hiển thị giao diện chờ trong lúc chunk đang tải. "To make the code easier to read" không phải mục đích, tách mã là tối ưu lúc chạy chứ không đổi cách tổ chức mã nguồn cho dễ đọc. "To bundle all components into a single large file" ngược hẳn, đó chính là trạng thái mặc định mà code splitting muốn tránh. "To split CSS and JavaScript into separate files" là việc trích CSS ra tệp riêng của công cụ build, khác với tách JavaScript theo nhu cầu tải.
Đáp án đúng: "props.name". Component hàm nhận các prop do component cha truyền xuống qua tham số đầu tiên, thường đặt tên là props, đó là một đối tượng chứa mọi thuộc tính viết trên thẻ, nên prop name được đọc là props.name; cách hay gặp khác là bóc tách ngay ở tham số, viết function Greeting({ name }), cùng ý nghĩa. "this.props.name" sai vì đó là cách đọc prop trong component dạng lớp, nơi this trỏ tới thể hiện của lớp; component hàm không có this gắn với component. "useState.name" sai vì useState là hook tạo state cục bộ, gọi useState trả về một mảng gồm giá trị và hàm cập nhật, nó không chứa prop nào. "getProps().name" sai vì React không có hàm getProps; prop đến thẳng qua tham số của hàm, không cần gọi gì để lấy.
Đáp án đúng gồm hai ý: "Using the useState hook." và "Using the useReducer hook.". Trong function component, state là dữ liệu React ghi nhớ giữa các lần render và thay đổi nó sẽ khiến component render lại; useState khởi tạo một giá trị kèm hàm đặt giá trị mới, phù hợp state đơn giản, còn useReducer khởi tạo state từ giá trị ban đầu và cập nhật qua hàm reducer nhận state cũ cùng action, phù hợp khi state có nhiều trường hoặc logic chuyển đổi phức tạp. "Using a Provider component." sai vì Provider của Context chỉ truyền một giá trị xuống cây con để tránh truyền props qua nhiều tầng; bản thân giá trị đó vẫn phải được tạo và quản lý bằng useState hoặc useReducer ở đâu đó. "Using the useRef hook." sai vì useRef giữ một giá trị có thể thay đổi qua thuộc tính current nhưng đổi nó không gây render lại, nên dùng để giữ tham chiếu DOM hoặc giá trị phụ chứ không phải để quản lý state hiển thị.
