Schritt 2: Karte mit Props
Teil des Abschnitts Grundlagen der React-Journey von Coddy. Lektion 40 von 42.
Aufgabe
EinfachMach die Karte wiederverwendbar.
- Definiere
ProfileCard, das die Propsnameundbioempfängt und dieselbe Struktur wie in Schritt 1 rendert (Card-Div,id="profile-name",id="profile-bio") – mit den Werten der Props. - Rendere in App eine ProfileCard mit dem Namen
Grace Hopperund der BiografieInvented the compiler.
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