Ôn tập: Làm quen với React

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

Thử thách

Dễ

Tóm tắt chương: tạo một trang nhỏ bằng cách áp dụng mọi kiến thức trong chương này.

Bên trong thẻ bao ngoài <div>, thêm một thẻ <h1> có id="title" và nội dung My React Page.
Bên dưới đó, thêm một thẻ <p> có id="intro" và nội dung Built with components.
Thêm lớp CSS lead cho đoạn văn đó theo cách viết của JSX.

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