Menu
CoddyTech
Bắt đầu học

Bước 4: Bật/tắt theo dõi

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

challenge icon

Thử thách

Trung bình

Hoàn thiện thẻ hồ sơ.

  1. Thêm trạng thái boolean following (bắt đầu là false) cho ProfileCard.
  2. Thêm một nút có id="follow" để đảo trạng thái này khi nhấp.
  3. Nhãn của nút là Following khi giá trị là true và Follow khi giá trị là false.

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