Tạo một trang

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

Một trang thông thường là sự kết hợp: App chỉ sắp xếp các khối có tên:

export default function App() {
    return (
        <div>
            <Title />
            <Content />
            <Footer />
        </div>
    );
}

Hãy đọc to câu lệnh return: nó mô tả chính xác trang theo thứ tự từ trên xuống dưới. Mỗi khối đều ẩn phần đánh dấu riêng, nên việc thay đổi chân trang không bao giờ có nguy cơ làm hỏng tiêu đề. Từ giờ trở đi, bạn sẽ dùng cấu trúc này để xây dựng mọi ứng dụng thực tế.

Thử thách

Dễ

Lắp ráp một trang từ hai thành phần.

Định nghĩa Title: một <h1> có id="page-title", văn bản Coddy Cooking.
Định nghĩa Footer: một <p> có id="page-footer", văn bản Made with React.
App hiển thị <Title /> trước, sau đó là <Footer />.

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>