Menu
CoddyTech
Bắt đầu học

Bước 1: Cấu trúc thẻ

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

challenge icon

Thử thách

Dễ

Tạo khung cơ bản của thẻ trong App.jsx:

  1. Một <div> có className="card".
  2. Bên trong: một <h2> có id="profile-name" và văn bản Ada Lovelace.
  3. Bên dưới tên: một <p> có id="profile-bio" và văn bản First programmer.

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