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ę.
Wyzwanie
ŁatwyZłóż stronę z dwóch komponentów.
- Zdefiniuj
Title: element<h1>zid="page-title", tekstCoddy Cooking. - Zdefiniuj
Footer: element<p>zid="page-footer", tekstMade with React. - 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>Ta lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.
Wszystkie lekcje w sekcji Podstawy
1Poznaj React
Czym jest React?Twój pierwszy komponentZasada jednego rodzicaJSX to nie HTMLPodsumowanie: poznaj React2Wyrażenia JSX
Nawiasy klamroweDziałania matematyczne w nawiasach klamrowychNawiasy klamrowe w atrybutachWywoływanie funkcji w JSXPodsumowanie: wyrażenia JSX3Komponenty
Elementy składoweTwój drugi komponentPonowne używanie komponentówTworzenie stronyPodsumowanie: komponenty