Menu
CoddyTech
Bắt đầu học

Ôn tập: props

Thuộc phần Kiến thức cơ bản trong hành trình React của Coddy. Bài học 21 trên 42.

challenge icon

Thử thách

Dễ

Tóm tắt chương: một thực đơn nhỏ được tạo từ props và children.

  1. Để Item nhận props name và price, rồi hiển thị {name}: ${price} trong <li> của nó.
  2. Để Card hiển thị một <div> có className="card", bên trong hiển thị children của nó.
  3. Trong App, dùng <Card>...</Card> để bọc <ul id="menu">, rồi hiển thị hai Item bên trong: tên Tea với giá 3, sau đó tên Cake với giá 5 (giá phải là số!).

Tự làm thử

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>

Tất cả bài học trong Kiến thức cơ bản

1Làm quen với React

React là gì?Component đầu tiên của bạnQuy tắc một phần tử chaJSX không phải HTMLÔn tập: Làm quen với React

4Props

Props là gì?Truyền propsHai propsCùng một component, dữ liệu mớiProp childrenÔn tập: props

7Điều kiện và danh sách

Hiển thị bằng toán tử ba ngôiHiển thị với &&Hiển thị danh sáchKhóa rất quan trọngLọc rồi ánh xạÔn tập: Điều kiện và danh sách

2Biểu thức JSX

Dấu ngoặc nhọnPhép toán trong dấu ngoặc nhọnDấu ngoặc nhọn trong thuộc tínhGọi hàm trong JSXÔn tập: Biểu thức JSX

5Trạng thái và sự kiện

Trạng thái là gì?Bộ đếm lượt nhấpĐếm theo bướcBật tắt bằng trạng tháiTrạng thái độc lậpÔn tập: Trạng thái và sự kiện

8Dự án: Thẻ hồ sơ

Bước 1: Cấu trúc thẻBước 2: Thẻ với propsBước 3: Nút thíchBước 4: Bật/tắt theo dõi

3Thành phần

Các khối cấu thànhThành phần thứ haiTái sử dụng thành phầnTạo một trangÔn tập: thành phần

6Biểu mẫu và đầu vào

Đầu vào có kiểm soátHiển thị lại đầu vàoĐếm ký tựNút xóaÔn tập: Biểu mẫu và đầu vào