Zusammenfassung: JSX-Ausdrücke
Teil des Abschnitts Grundlagen der React-Journey von Coddy — Lektion 10 von 42.
Aufgabe
EinfachKapitelzusammenfassung: Eine kleine Bestellübersicht, die vollständig aus JavaScript gerendert wird. App.jsx definiert bereits item, price, quantity und eine shout-Hilfsfunktion.
- Lasse das
<h1>mitid="header"das Ergebnis des Aufrufs vonshout(item)rendern: Es sollteCOFFEE!anzeigen. - Lasse den Absatz mit
id="count"3 cupsrendern, verwende dabei die Variablequantity, nicht die Ziffer. - Lasse den Absatz mit
id="total"Total: 12rendern. Berechne die Zahl auspriceundquantitymit*, tippe nicht 12 ein.
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ücke