Zusammenfassung: Komponenten
Teil des Abschnitts Grundlagen der React-Journey von Coddy — Lektion 15 von 42.
Aufgabe
EinfachKapitelzusammenfassung: Baue eine Seite aus zwei Komponenten auf und nutze dabei alles aus diesem Kapitel.
- Definiere eine
Header-Komponente: ein<h1>mitid="title"und dem TextCoddy Shop. Rendere sie als Erstes innerhalb des äußeren<div>von App. - Definiere eine
Badge-Komponente, die<span>★</span>zurückgibt. - Rendere innerhalb des bestehenden
<div id="badges">den Badge zweimal: eine Definition, zwei Verwendungen.
Probier es selbst
<!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>Alle Lektionen in Grundlagen
1Lerne React kennen
Was ist React?Deine erste KomponenteDie Regel des einen Eltern-ElementsJSX ist nicht HTMLZusammenfassung: Lerne React kennen2JSX-Ausdrücke
Geschweifte KlammernMathematik in KlammernKlammern in AttributenFunktionsaufrufe in JSXZusammenfassung: JSX-Ausdrücke3Komponenten
BausteineDeine zweite KomponenteKomponenten wiederverwendenEine Seite erstellenZusammenfassung: Komponenten