Bước 2: Thẻ với 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 40 trên 42.

Thử thách

Dễ

Hãy làm cho thẻ có thể tái sử dụng.

Định nghĩa ProfileCard nhận các thuộc tính name và bio, rồi hiển thị cấu trúc giống như ở bước 1 (thẻ div, id="profile-name", id="profile-bio") cùng các giá trị thuộc tính.
Trong App, hiển thị một ProfileCard với name Grace Hopper và bio Invented the compiler.

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 propsBướ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