Ôn tập: Biểu thức JSX

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

Thử thách

Dễ

Tóm tắt chương: bản tóm tắt đơn hàng nhỏ được hiển thị hoàn toàn bằng JavaScript. App.jsx đã định nghĩa item, price, quantity và hàm trợ giúp shout.

Để tiêu đề <h1> có id="header" hiển thị kết quả gọi shout(item): tiêu đề cần hiện COFFEE!.
Để đoạn văn có id="count" hiển thị 3 cups, dùng biến quantity, không dùng chữ số.
Để đoạn văn có id="total" hiển thị Total: 12. Tính số này từ price và quantity bằng *, đừng nhập 12.

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ạn Quy tắc một phần tử cha JSX không phải HTML Ôn tập: Làm quen với React

4Props

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

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

Hiển thị bằng toán tử ba ngôi Hiển thị với &&Hiển thị danh sách Khóa rất quan trọng Lọ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ọn Phép toán trong dấu ngoặc nhọn Dấu ngoặc nhọn trong thuộc tính Gọ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ước Bật tắt bằng trạng thái Trạ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 props Bước 3: Nút thích Bước 4: Bật/tắt theo dõi

3Thành phần

Các khối cấu thành Thành phần thứ hai Tái sử dụng thành phần Tạ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át Hiể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