SBA301 - Chương 2: React nền tảng — JSX, component, props, Virtual DOM

Trong JSX, để thêm một biến JavaScript vào một phần tử được rendered, bạn cần sử dụng dấu ngoặc nhọn {variable}. Điều này cho phép bạn truy cập vào giá trị của biến và hiển thị nó trong phần tử. Ví dụ:

<div>{
  x
}
</div>

sẽ hiển thị giá trị của biến x. Sử dụng dấu ngoặc nhọn là cách phổ biến và được khuyến khích để thêm biến JavaScript vào JSX.

Câu hỏi này yêu cầu bạn chọn thành phần React-Bootstrap. Thành phần React-Bootstrap là các thành phần được xây dựng trên cơ sở React và được sử dụng để tạo ra các ứng dụng web có giao diện người dùng thân thiện. Trong các lựa chọn, <Button> là một thành phần React-Bootstrap được sử dụng để tạo ra các nút bấm. <Service> không phải là một thành phần React-Bootstrap, mà có thể là một dịch vụ hoặc một module trong ứng dụng. <Router> là một thành phần trong React Router, không phải là React-Bootstrap. <Data> không phải là một thành phần React-Bootstrap, mà là dữ liệu trong ứng dụng. Vì vậy, câu trả lời đúng là <Button>.

Trong React, để truyền props từ cha sang con, chúng ta sử dụng cú pháp đặc biệt. Câu trả lời đúng là <Child prop=value />, trong đó prop là tên của thuộc tính và value là giá trị mà chúng ta muốn truyền. Ví dụ, nếu chúng ta muốn truyền một chuỗi 'Xin chào' sang một thành phần con, chúng ta sẽ sử dụng cú pháp <Child message='Xin chào' />. Khi đó, thành phần con có thể sử dụng props để truy cập vào giá trị 'Xin chào'. Điều này giúp chúng ta dễ dàng chia sẻ dữ liệu giữa các thành phần trong ứng dụng React.

Để tạo một form select control trong React-Bootstrap, bạn cần sử dụng thẻ <Form.Select>. Thẻ này sẽ tạo một lựa chọn dropdown cho người dùng. Ví dụ, bạn muốn tạo một form select với các lựa chọn là 1 và 2, bạn có thể sử dụng mã sau:

<Form.Select>
  <option>1</option>
  <option>2</option>
</Form.Select>

. Điều này sẽ tạo một form select với hai lựa chọn là 1 và 2. Ngoài ra, bạn cũng có thể sử dụng các thẻ khác như <Select>, <Form.Dropdown>, <Dropdown> nhưng chúng không phải là thẻ chính thức để tạo form select control trong React-Bootstrap.

Để tạo liên kết điều hướng trong Navbar của React-Bootstrap, bạn cần sử dụng thẻ <NavLink>. Thẻ này cho phép bạn tạo liên kết điều hướng với các thuộc tính như href, active, exact, và nhiều thuộc tính khác. Ví dụ, bạn có thể sử dụng <NavLink> như sau: import { NavLink } from 'react-bootstrap'; <NavLink to="/home">Trang chủ</NavLink> Trong ví dụ trên, <NavLink> được sử dụng để tạo liên kết điều hướng đến trang chủ với đường dẫn /home. Ngoài ra, bạn cũng có thể sử dụng thuộc tính active để chỉ định liên kết hiện tại. <NavLink active to="/home">Trang chủ</NavLink> Tóm lại, <NavLink> là một phần quan trọng trong việc tạo liên kết điều hướng trong Navbar của React-Bootstrap.

Trong JSX, các biểu thức hợp lệ phải tuân theo các quy tắc sau: - Các thẻ HTML phải được viết theo cú pháp mở và đóng đúng. - Các thuộc tính phải được viết theo cú pháp

<div class="my-class">. -

Các biểu thức JavaScript không được sử dụng trong JSX. - Các biểu thức JSX không được sử dụng trong JavaScript. - Các thẻ không được sử dụng trong JSX. Vậy, trong các lựa chọn trên, chỉ có "<div class="my-class">Hello</div> " là một biểu thức JSX hợp lệ.

Để hiển thị thông báo thành công trong React-Bootstrap, bạn cần sử dụng thẻ Alert với thuộc tính variant được đặt thành 'success'. Ví dụ, bạn có thể sử dụng thẻ Alert như sau: <Alert variant="success">Message</Alert>. Điều này sẽ hiển thị một thông báo thành công với nội dung 'Message'. Ngoài ra, bạn cũng có thể sử dụng các thuộc tính khác như type hoặc style để thay đổi màu sắc hoặc kiểu dáng của thông báo, nhưng variant là thuộc tính được khuyến nghị sử dụng trong React-Bootstrap.