Schritt 1: Kartenstruktur
Teil des Abschnitts Grundlagen der React-Journey von Coddy — Lektion 39 von 42.
Aufgabe
EinfachBaue das Card-Skelett in App.jsx:
- Ein
<div>mitclassName="card". - Darin: ein
<h2>mitid="profile-name"und dem TextAda Lovelace. - Unter dem Namen: ein
<p>mitid="profile-bio"und dem TextFirst programmer.
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ücke5State & Events
Was ist State?Klick-ZählerIn Schritten zählenUmschalten mit StateUnabhängiger StateZusammenfassung: State & Events8Projekt: Profilkarte
Schritt 1: KartenstrukturSchritt 2: Karte mit PropsSchritt 3: Like-ButtonSchritt 4: Umschalter zum Folgen