Sayfa Oluşturma

Coddy'nin React Journey'sinin Temeller bölümünün bir parçası — ders 14 / 42.

Tipik bir sayfa bir bileşimdir (composition): `App` yalnızca isimlendirilmiş blokları düzenler:

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

Bu return ifadesini yüksek sesle okuyun: kelimenin tam anlamıyla sayfayı yukarıdan aşağıya tanımlar. Her blok kendi işaretlemesini gizler, bu nedenle Footer bileşenini değiştirmek hiçbir zaman Title bileşenini bozma riski taşımaz. Bu yapı, bundan sonra her gerçek uygulamayı nasıl inşa edeceğinizin temelidir.

Görev

Kolay

İki bileşenden oluşan bir sayfa birleştirin.

Title tanımlayın: id="page-title" olan ve Coddy Cooking metnini içeren bir <h1>.
Footer tanımlayın: id="page-footer" olan ve Made with React metnini içeren bir <p>.
App önce <Title />, ardından <Footer /> render eder.

Kendin dene

<!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>