Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Herausforderung: Ein Element in React Rendern | Grundlagen von React und Komponentenbasierter UI
React Mastery

bookHerausforderung: Ein Element in React Rendern

Hinweis

Alle Herausforderungen können standardmäßig fehlerhaft erscheinen, da sie Leerstellen enthalten, in die der erforderliche Code eingefügt werden muss. Sobald diese Leerstellen korrekt ausgefüllt sind, wird der vollständige Code auf der Live-Seite angezeigt.

Zusätzlich verfügt jede Herausforderung über zwei Schaltflächen: Hinweis und Lösung. Ein Klick auf Hinweis liefert kleine Hinweise zur aktuellen Aufgabe, während die Auswahl der Schaltfläche Lösung die vollständige Lösung in einem neuen Tab öffnet.

Arbeiten mit Code Sandbox

Aufgabe: Erstellen einer Produktkarte

Die Produktkarte erstellen und im DOM rendern. Die Produktkarte benötigt:

  1. Das Produktbild (img-Element).
    • Das src-Attribut muss dem Wert der Variablen imageUrl entsprechen.
    • Das alt-Attribut muss dem String Computer entsprechen.
    • Das width-Attribut muss den Wert 256 haben.
  2. Den Produkttitel (h3-Element).
    • Der Textinhalt muss Computer sein.
  3. Den Produktpreis (span-Element).
    • Der Textinhalt muss Price: $129.99 sein.
  4. Die Produktbeschreibung (p-Element).
    • Der Textinhalt muss New Model sein.
  1. Das src-Attribut muss die Variable imageUrl als Wert enthalten. Verwenden Sie geschweifte Klammern {}.
  2. Das alt-Attribut muss den String "Computer" als Wert enthalten. In doppelte Anführungszeichen setzen.
  3. Das width-Attribut muss die Zahl 256 als Wert enthalten. Verwenden Sie geschweifte Klammern {}.
  4. Sicherstellen, dass die h3-, span- und p-Elemente die korrekten Werte enthalten.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 1. Kapitel 7

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you explain how to use the Hint and Solution buttons?

What should I do if the live page doesn't render after making changes?

Can you walk me through creating the product card step by step?

Awesome!

Completion rate improved to 2.17

bookHerausforderung: Ein Element in React Rendern

Swipe um das Menü anzuzeigen

Hinweis

Alle Herausforderungen können standardmäßig fehlerhaft erscheinen, da sie Leerstellen enthalten, in die der erforderliche Code eingefügt werden muss. Sobald diese Leerstellen korrekt ausgefüllt sind, wird der vollständige Code auf der Live-Seite angezeigt.

Zusätzlich verfügt jede Herausforderung über zwei Schaltflächen: Hinweis und Lösung. Ein Klick auf Hinweis liefert kleine Hinweise zur aktuellen Aufgabe, während die Auswahl der Schaltfläche Lösung die vollständige Lösung in einem neuen Tab öffnet.

Arbeiten mit Code Sandbox

Aufgabe: Erstellen einer Produktkarte

Die Produktkarte erstellen und im DOM rendern. Die Produktkarte benötigt:

  1. Das Produktbild (img-Element).
    • Das src-Attribut muss dem Wert der Variablen imageUrl entsprechen.
    • Das alt-Attribut muss dem String Computer entsprechen.
    • Das width-Attribut muss den Wert 256 haben.
  2. Den Produkttitel (h3-Element).
    • Der Textinhalt muss Computer sein.
  3. Den Produktpreis (span-Element).
    • Der Textinhalt muss Price: $129.99 sein.
  4. Die Produktbeschreibung (p-Element).
    • Der Textinhalt muss New Model sein.
  1. Das src-Attribut muss die Variable imageUrl als Wert enthalten. Verwenden Sie geschweifte Klammern {}.
  2. Das alt-Attribut muss den String "Computer" als Wert enthalten. In doppelte Anführungszeichen setzen.
  3. Das width-Attribut muss die Zahl 256 als Wert enthalten. Verwenden Sie geschweifte Klammern {}.
  4. Sicherstellen, dass die h3-, span- und p-Elemente die korrekten Werte enthalten.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 1. Kapitel 7
some-alt