Menu
Coddy logo textTech

Tworzenie strony

Część sekcji Podstawy ścieżki React w Coddy. Lekcja 14 z 42.

Typowa strona to kompozycja: App po prostu układa nazwane bloki:

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

Przeczytaj tę instrukcję return na głos: dosłownie opisuje stronę od góry do dołu. Każdy blok ukrywa własny znacznik, więc zmiana stopki nigdy nie grozi uszkodzeniem tytułu. Właśnie w ten sposób będziesz odtąd tworzyć każdą prawdziwą aplikację.

challenge icon

Wyzwanie

Łatwy

Złóż stronę z dwóch komponentów.

  1. Zdefiniuj Title: element <h1> z id="page-title", tekst Coddy Cooking.
  2. Zdefiniuj Footer: element <p> z id="page-footer", tekst Made with React.
  3. App renderuje najpierw <Title />, a potem <Footer />.

Spróbuj swoich sił

<!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>
quiz iconSprawdź się

Ta lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.

Wszystkie lekcje w sekcji Podstawy