Câu hỏi: FER202 Phát triển web Front-End với React – Bộ ôn tập thi lại số 2

Đáp án đúng: "Functional component". Greeting là một hàm mũi tên nhận props, phân rã lấy name rồi trả về JSX thẻ h1 hiển thị lời chào, nên đây là function component (component dạng hàm). "Class component" cần cú pháp class kế thừa React.Component và có phương thức render(), mã trên không có. "Container component" là khái niệm theo vai trò: component lo lấy dữ liệu và logic rồi truyền xuống component trình bày; Greeting chỉ hiển thị dữ liệu được đưa vào nên không đóng vai đó. "Higher-order component" là một hàm nhận một component và trả về component mới đã được bọc thêm logic; Greeting nhận props chứ không nhận component nào.

Đáp án đúng: "A syntax extension for JavaScript that allows you to write HTML-like code". JSX (JavaScript XML) là phần mở rộng cú pháp cho JavaScript, cho phép viết đoạn trông giống HTML ngay trong mã; trình biên dịch như Babel chuyển mỗi thẻ JSX thành lời gọi React.createElement hoặc hàm jsx, nên trình duyệt chỉ thấy JavaScript thường. "A JavaScript library for building user interfaces" là định nghĩa của chính React, một thư viện xây dựng giao diện người dùng. "A React component that renders HTML elements" sai vì JSX không phải component; component là hàm hoặc lớp trả về JSX. "A JavaScript framework for building web applications" không đúng vì JSX chỉ là cú pháp, không phải framework; ví dụ framework cho ứng dụng web là Angular hay Next.js.

Đáp án đúng: "Server-side rendering.". Công cụ tìm kiếm đọc trang tốt nhất khi HTML trả về đã chứa sẵn nội dung; với render phía máy chủ (server-side rendering, SSR), Next.js chạy component React trên server ở mỗi request và gửi về trang HTML hoàn chỉnh kèm tiêu đề, thẻ meta, nên bot thu thập được nội dung ngay mà không phải chạy JavaScript, đó là lý do SSR (cùng với sinh trang tĩnh) được coi là tính năng cốt lõi giúp SEO. Phương án "Real-time data fetching." là chuyện cập nhật dữ liệu tức thời phía client, không làm HTML ban đầu giàu nội dung hơn. Phương án "Client-side routing." giúp chuyển trang nhanh trong trình duyệt, nhưng chính kiểu ứng dụng chỉ render phía client là thứ gây khó cho SEO. Phương án "Automatic code splitting." là tính năng có thật của Next.js, cắt mã theo trang để tải nhanh hơn, tốt cho hiệu năng nhưng không phải tính năng phục vụ SEO mà câu hỏi nhắm tới.

Đáp án đúng: "Facebook". React do kỹ sư Jordan Walke tại Facebook tạo ra, được dùng cho News Feed từ năm 2011, cho Instagram năm 2012 và công bố mã nguồn mở năm 2013; nay Meta, tên mới của công ty Facebook, vẫn duy trì thư viện cùng cộng đồng. "Google" là công ty đứng sau Angular, một framework front-end khác hay bị nhầm với React. "Microsoft" phát triển TypeScript và Visual Studio Code, những công cụ thường dùng chung với React nhưng không tạo ra React. "Amazon" cung cấp hạ tầng đám mây AWS, nơi có thể triển khai ứng dụng React, chứ không tạo ra thư viện này.

Đáp án đúng: "Destructuring assignment". Phép gán phân rã (destructuring assignment) của ES6 tách giá trị từ mảng theo vị trí hoặc từ đối tượng theo tên thuộc tính rồi gán thẳng vào biến, ví dụ const { name, age } = user hay const [first, second] = list; trong React cú pháp này có mặt khắp nơi, từ const [count, setCount] = useState(0) tới việc nhận props dạng hàm ({ title }). "Spread operator" là dấu ba chấm dùng để trải phần tử ra khi sao chép hoặc gộp mảng, đối tượng, không gán giá trị vào biến riêng. "Template literals" là chuỗi đặt trong dấu backquote có chèn biểu thức, dùng để dựng chuỗi chứ không tách giá trị. "Default parameters" là giá trị mặc định cho tham số hàm khi không truyền đối số, cũng không trích giá trị từ mảng hay đối tượng.

Đáp án đúng: "To define the initial state of the reducer". Reducer có dạng function reducer(state = initialState, action); lần đầu store được tạo, Redux dispatch một action khởi tạo với state là undefined, nên giá trị mặc định của tham số state được dùng làm state ban đầu của reducer đó, và các lần sau reducer nhận state hiện có. Với Redux Toolkit, initialState được khai báo trong createSlice. "To define the structure of the Redux store" không phải đáp án vì state ban đầu chỉ định hình một nhánh mà reducer đó quản lý; cấu trúc của cả store do cách ghép reducer bằng combineReducers hay configureStore quyết định. "To specify the actions that can be dispatched" sai vì các action được định nghĩa qua action type, action creator hoặc reducers trong createSlice, state ban đầu không liệt kê action nào. "To handle asynchronous operations" sai vì reducer phải đồng bộ; thao tác bất đồng bộ do middleware như redux-thunk xử lý.

Đáp án đúng: "npx create-next-app". Lệnh này dùng npx để tải và chạy công cụ khởi tạo chính thức của Next.js mà không cần cài toàn cục; nó hỏi vài lựa chọn như TypeScript, ESLint, Tailwind, App Router rồi dựng sẵn thư mục dự án, tệp cấu hình, package.json và các script dev, build, start. "npx create-react-app" sai vì đó là công cụ tạo dự án React thuần chạy hoàn toàn phía client, không có SSR hay định tuyến theo thư mục của Next.js, và nay đã ngừng được khuyên dùng. "npm install next" sai vì chỉ cài gói next vào một dự án có sẵn, không dựng khung thư mục hay cấu hình nào, nên chưa tạo ra dự án mới. "git clone next.js" sai vì đây không phải lệnh hợp lệ để tạo dự án; nếu có clone thì cũng chỉ lấy về mã nguồn của chính framework chứ không phải một ứng dụng mới.

Đáp án đúng: "To enable creating action creators that return functions (for asynchronous operations like API calls) instead of plain action objects.". Theo mặc định Redux chỉ nhận action là object thuần và reducer phải là hàm thuần, nên không có chỗ cho việc gọi API; Redux Thunk là middleware cho phép dispatch một hàm, gọi là thunk, hàm này nhận dispatch và getState để chạy thao tác bất đồng bộ rồi dispatch các action thật như đang tải, thành công, thất bại; Redux Toolkit dựng sẵn middleware này và createAsyncThunk được xây trên nó. Phát biểu "connect React components directly to the Redux store without the need for action creators" sai vì kết nối component với store là việc của react-redux qua Provider, useSelector, useDispatch hoặc connect. Phát biểu "store and manage the application's state on the server-side" sai vì Redux Thunk chạy trên client, không quản lý state phía máy chủ. Phát biểu "automatically generate the code for action creators and reducers" sai vì Thunk không sinh mã; việc tự tạo action creator từ reducer là tính năng createSlice của Redux Toolkit.

Đáp án đúng: "To make HTTP requests to retrieve data from a server.". window.fetch là Fetch API của trình duyệt, dùng để gửi request HTTP tới máy chủ, mặc định là GET và có thể là POST, PUT, DELETE kèm header và body; nó trả về một Promise cho object Response, từ đó ta gọi json() hoặc text() để đọc dữ liệu, nên đây là cách thông dụng để React lấy dữ liệu từ API, thường đặt trong useEffect. "To manipulate the browser window's size and position." sai vì đổi kích thước hay vị trí cửa sổ dùng các phương thức khác như resizeTo, moveTo, không liên quan đến fetch dù nó cũng nằm trên object window. "To store data in the browser's local storage." sai vì lưu dữ liệu cục bộ dùng localStorage với setItem và getItem. "To define the styling and layout of a webpage." sai vì định kiểu và bố cục là việc của CSS, fetch không tác động gì tới giao diện.

Đáp án đúng: "It uses a utility-first approach, allowing developers to build custom designs using small utility classes". Tailwind CSS theo hướng utility-first (ưu tiên lớp tiện ích): thay vì cung cấp nút, thẻ dựng sẵn, nó cho rất nhiều lớp nhỏ mỗi lớp làm một việc như p-4 (padding), text-center, bg-blue-500, flex, và lập trình viên ghép trực tiếp trong className để tạo thiết kế riêng, kèm tiền tố đáp ứng như md: và tiền tố trạng thái như hover:. Phương án "It provides pre-designed UI components and themes" là đặc điểm của Bootstrap hay Material UI, chính là điểm Tailwind khác biệt. Phương án "It provides pre-built JavaScript components" sai vì Tailwind chỉ là CSS, không kèm component JavaScript; các bộ như Headless UI là thư viện riêng. Phương án "It is a framework specifically for mobile development" sai vì Tailwind dùng cho web ở mọi kích thước màn hình, có hỗ trợ responsive nhưng không chuyên cho mobile.

Đáp án đúng: "To distribute actions to the relevant stores.". Trong kiến trúc Flux, luồng dữ liệu đi một chiều: action được tạo ra, đi qua Dispatcher, tới các Store, rồi View render lại; Dispatcher là trung tâm duy nhất nhận mọi action và chuyển chúng tới các callback mà từng Store đã đăng ký, còn có thể sắp thứ tự xử lý giữa các Store. "To render the user interface based on the application's state." là vai trò của View, phần React component vẽ giao diện từ dữ liệu trong Store. "To manage the application's state and logic." là vai trò của Store, nơi giữ state và logic cập nhật. "To handle user interactions and events." thuộc về View và action creator: View bắt tương tác của người dùng rồi gọi action creator để tạo action gửi đi.

Đáp án đúng: "To provide a standard way for systems to communicate over the network.". REST là kiểu kiến trúc cho API qua HTTP: tài nguyên được định danh bằng URL, thao tác bằng các phương thức chuẩn GET, POST, PUT, PATCH, DELETE, dữ liệu thường trao đổi dạng JSON và mỗi yêu cầu không phụ thuộc trạng thái phiên lưu trên server (stateless). Nhờ quy ước thống nhất này, ứng dụng React, ứng dụng di động hay một dịch vụ khác đều nói chuyện được với cùng một server. "To store large amounts of data in a database." là việc của hệ quản trị cơ sở dữ liệu; API chỉ là cửa ngõ để truy cập dữ liệu đó. "To create real-time interactive applications." không phải thế mạnh của REST vì mô hình hỏi đáp không chủ động đẩy dữ liệu; ứng dụng thời gian thực thường dùng WebSocket hay Server-Sent Events. "To compile and execute server-side code." là việc của trình biên dịch và môi trường chạy như Node.js.

Đáp án đúng: "To enable server-side rendering and generate static websites.". Next.js là framework xây trên React, bổ sung những thứ React thuần không có sẵn: server-side rendering (SSR, dựng HTML trên máy chủ cho mỗi request), static site generation (SSG, sinh trang tĩnh lúc build), định tuyến theo cấu trúc thư mục và API route; nhờ HTML có sẵn khi tải trang, trang hiển thị nhanh hơn và thân thiện với SEO. "To manage state in React applications." sai vì quản lý state là việc của useState, Context hay thư viện như Redux Toolkit, không phải mục đích chính của Next.js. "To provide a UI component library." sai vì Next.js không cung cấp bộ nút, thẻ hay bảng dựng sẵn như React-Bootstrap hoặc MUI. "To create database schemas." sai vì thiết kế lược đồ cơ sở dữ liệu thuộc về công cụ ORM như Prisma hoặc chính hệ quản trị cơ sở dữ liệu.

Đáp án đúng: "const value = useSelector((state) => state.value);". useSelector nhận một hàm selector (hàm chọn), React-Redux gọi hàm này với đối số là toàn bộ state gốc của store, giá trị trả về chính là dữ liệu component nhận được, và component sẽ render lại khi giá trị này đổi; tài liệu Redux luôn đặt tên tham số là state vì nó đúng là state. Về mặt JavaScript, tên tham số chỉ là tên, nên các dạng dưới đây vẫn chạy, nhưng chúng gọi sai bản chất của đối số. "const value = useSelector((store) => store.value);" gây hiểu nhầm vì store là đối tượng có getState và dispatch, còn thứ selector nhận là state lấy ra từ store. "const value = useSelector((context) => context.value);" lẫn với React Context, một cơ chế khác hẳn được đọc bằng useContext. "const value = useSelector((redux) => redux.value);" không nói đối số là gì, chẳng có khái niệm redux nào được truyền vào; cách viết đúng chuẩn là đặt tên state.

Đáp án đúng: "By pressing F12 or right-clicking and selecting "Inspect"". Chrome DevTools (bộ công cụ cho nhà phát triển) được tích hợp sẵn trong trình duyệt, nên cách nhanh và phổ biến nhất là nhấn F12 (hoặc Ctrl+Shift+I trên Windows), hay nhấp chuột phải lên một phần tử rồi chọn Inspect để mở thẳng tab Elements tại đúng phần tử đó. "By installing a Chrome extension" sai vì DevTools có sẵn, không cần cài thêm gì; tiện ích như React Developer Tools chỉ bổ sung tab mới vào DevTools chứ không phải cách để mở nó. "By typing "chrome://devtools" in the address bar" sai vì gõ địa chỉ này không mở bảng DevTools cho trang đang xem; DevTools gắn với từng tab và được mở bằng phím tắt hoặc menu. "By opening the Chrome menu and selecting "DevTools"" sai theo đúng cách nó mô tả: menu Chrome không có mục nào tên DevTools ở cấp đầu, đường đi thật là More tools rồi Developer tools, nên cách được nêu như đáp án là phím F12 và lệnh Inspect.

Đáp án đúng: ".container-fluid". Trong Bootstrap, .container-fluid luôn rộng 100% khung nhìn ở mọi breakpoint (điểm ngắt), nên bố cục co giãn liên tục theo màn hình và không bao giờ bị khoá ở một max-width cố định. ".container" là container responsive cố định: nó rộng 100% dưới 576px nhưng từ breakpoint sm trở lên lại nhảy theo các max-width cố định như 540px, 720px, 960px, nên không co giãn ở mọi breakpoint. ".container-lg" chỉ rộng 100% cho tới trước breakpoint lg rồi chuyển sang max-width cố định, tức là chỉ co giãn một phần. ".container-xs" không phải lớp có thật của Bootstrap, vì xs là mức mặc định không có hậu tố riêng cho container; muốn hành vi đó thì dùng .container-fluid.

Đáp án đúng: "To pause the execution of the async function until the Promise it's waiting for is resolved or rejected.". Từ khoá await chỉ dùng trong hàm async (hoặc ở cấp cao nhất của module): nó tạm dừng phần thân còn lại của hàm đó cho tới khi Promise đứng sau nó ổn định, nếu resolve thì biểu thức await trả về giá trị, nếu reject thì ném lỗi để try/catch bắt; trong lúc chờ, luồng chính không bị chặn mà vẫn xử lý việc khác qua event loop (vòng lặp sự kiện). "To return a new Promise object." mô tả từ khoá async chứ không phải await, vì chính hàm async luôn trả về một Promise. "To immediately execute the next line of code without waiting." ngược hẳn với await, đó là hành vi khi gọi một hàm trả Promise mà không await nó. "To define a synchronous block of code" sai vì await không tạo khối mã đồng bộ, mã chỉ trông tuần tự còn bản chất vẫn bất đồng bộ.

Đáp án đúng: "It allows for a more readable and simpler syntax for handling asynchronous code.". async/await là cú pháp xây trên chính Promise: hàm async luôn trả về Promise, còn await chờ một Promise ổn định rồi lấy giá trị, nhờ đó mã bất đồng bộ đọc tuần tự từ trên xuống như mã thường và bắt lỗi bằng try/catch quen thuộc thay vì nối nhiều then, catch. "It uses callbacks instead of promises." sai vì async/await không quay lại callback mà dùng Promise ở bên dưới. "It only works for synchronous operations." sai, cú pháp này sinh ra để xử lý thao tác bất đồng bộ như gọi API hay đọc tệp. "It increases the loading time of web pages." sai vì cách viết then hay await không làm trang tải chậm hơn; thời gian chờ phụ thuộc vào chính thao tác mạng chứ không phụ thuộc cú pháp.

Đáp án đúng: "Any JavaScript value, including objects, arrays, and functions". Prop là cách component cha truyền dữ liệu xuống component con, viết như thuộc tính trên thẻ; mọi biểu thức JavaScript đặt trong ngoặc nhọn đều truyền được, từ chuỗi, số, boolean tới đối tượng, mảng, hàm callback như onClick, và cả phần tử JSX, chẳng hạn children. Component con nhận tất cả trong đối tượng props và chỉ được đọc, không được sửa. "Only strings" sai vì chuỗi chỉ là trường hợp viết gọn bằng nháy kép, ví dụ title="Xin chào", ngoài ra mọi giá trị khác đều truyền qua ngoặc nhọn. "Only numbers" sai vì số cũng chỉ là một loại giá trị, phải viết như age={30}. "Only other React components" sai vì truyền component hay phần tử JSX làm prop là được, nhưng đó chỉ là một khả năng trong rất nhiều loại giá trị.