Quy tắc một phần tử cha

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

Một component có thể trả về lượng JSX tùy ý, chỉ cần tuân theo một quy tắc: mọi thứ phải nằm bên trong một phần tử cha. Ví dụ sau là hợp lệ:

return (
    <div>
        <h1>My Page</h1>
        <p>Welcome!</p>
    </div>
);

Nhưng trả về hai phần tử cạnh nhau mà không có phần tử bao quanh là lỗi. Hàm chỉ có thể trả về một thứ:

// LỖI: có hai phần tử cấp cao nhất
return (
    <h1>My Page</h1>
    <p>Welcome!</p>
);

Cách khắc phục thường dùng là bọc mọi thứ trong một <div>. Hãy xem phần xem trước: nếu bạn vi phạm quy tắc, lỗi build sẽ cho bạn biết chính xác vị trí.

Thử thách

Người mới

Tạo phần đầu trang nhỏ: hai phần tử nằm dưới một phần tử cha.

Giữ nguyên <div> bên ngoài.
Thêm một <h1> bên trong, có id="heading" và văn bản My First App.
Bên dưới tiêu đề, thêm một <p> có id="tagline" và văn bản Built with React.

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>