Các khối cấu thành

Cho đến nay, App đã làm mọi việc. Các ứng dụng React thực tế chia trang thành nhiều thành phần nhỏ, và dùng một thành phần trông giống hệt như dùng thẻ HTML:

function Header() {
    return <h1>My Blog</h1>;
}

export default function App() {
    return (
        <div>
            <Header />
        </div>
    );
}

Khi React gặp <Header />, React gọi hàm của bạn và hiển thị nội dung mà hàm trả về. Có hai quy tắc:

• Tên thành phần bắt đầu bằng chữ cái viết hoa: nhờ vậy, React phân biệt <Header /> (thành phần của bạn) với <header> (thẻ HTML)
• Dùng thành phần như một thẻ tự đóng: <Header />

Tại sao phải làm vậy? Vì một trang được tạo từ các khối có tên (<Header />, <Menu />, <Footer />) trông như một mục lục, và bạn có thể tái sử dụng mỗi khối ở bất cứ đâu.