Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Udfordring: Gengiv Et Element i React | Grundlæggende om React og Komponentbaseret UI
React Mastery

bookUdfordring: Gengiv Et Element i React

Bemærk

Alle udfordringer kan som udgangspunkt fremstå defekte, da de indeholder tomme felter, hvor du skal indsætte den nødvendige kode. Når du korrekt udfylder disse tomme felter, vises den færdige kode på live-siden.

Derudover har hver udfordring to knapper: Hint og Solution. Ved at klikke på Hint får du små tips til den aktuelle udfordring, mens valg af knappen Solution åbner en ny fane med den færdige løsning.

Sådan arbejder du med Code Sandbox

Opgave: Opret et produktkort

Opret produktkortet og render det til DOM'en. Produktkortet skal indeholde:

  1. Produktbilledet (img-element).
    • src-attributten skal være lig med variablen imageUrl.
    • alt-attributten skal være lig med strengen Computer.
    • width-attributten skal være lig med 256.
  2. Produkttitlen (h3-element).
    • Tekstindholdet skal være Computer.
  3. Produktprisen (span-element).
    • Tekstindholdet skal være Price: $129.99.
  4. Produktbeskrivelsen (p-element).
    • Tekstindholdet skal være New Model.
  1. src-attributten skal indeholde variablen imageUrl som værdi. Brug krøllede parenteser {}.
  2. alt-attributten skal indeholde strengen "Computer" som værdi. Indsæt den i dobbelte anførselstegn.
  3. width-attributten skal indeholde tallet 256 som værdi. Brug krøllede parenteser {}.
  4. Sørg for, at h3-, span- og p-elementerne har de korrekte værdier.

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 1. Kapitel 7

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

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

bookUdfordring: Gengiv Et Element i React

Stryg for at vise menuen

Bemærk

Alle udfordringer kan som udgangspunkt fremstå defekte, da de indeholder tomme felter, hvor du skal indsætte den nødvendige kode. Når du korrekt udfylder disse tomme felter, vises den færdige kode på live-siden.

Derudover har hver udfordring to knapper: Hint og Solution. Ved at klikke på Hint får du små tips til den aktuelle udfordring, mens valg af knappen Solution åbner en ny fane med den færdige løsning.

Sådan arbejder du med Code Sandbox

Opgave: Opret et produktkort

Opret produktkortet og render det til DOM'en. Produktkortet skal indeholde:

  1. Produktbilledet (img-element).
    • src-attributten skal være lig med variablen imageUrl.
    • alt-attributten skal være lig med strengen Computer.
    • width-attributten skal være lig med 256.
  2. Produkttitlen (h3-element).
    • Tekstindholdet skal være Computer.
  3. Produktprisen (span-element).
    • Tekstindholdet skal være Price: $129.99.
  4. Produktbeskrivelsen (p-element).
    • Tekstindholdet skal være New Model.
  1. src-attributten skal indeholde variablen imageUrl som værdi. Brug krøllede parenteser {}.
  2. alt-attributten skal indeholde strengen "Computer" som værdi. Indsæt den i dobbelte anførselstegn.
  3. width-attributten skal indeholde tallet 256 som værdi. Brug krøllede parenteser {}.
  4. Sørg for, at h3-, span- og p-elementerne har de korrekte værdier.

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 1. Kapitel 7
some-alt