Alle udfordringer kan som standard fremstå ufuldstændige. De indeholder tomme sektioner, hvor du skal tilføje den nødvendige kode. Når alle manglende dele er udfyldt korrekt, vil den færdige kode blive vist på den levende side.

Hver udfordring indeholder to hjælpeknapper:
- **Hint**: viser små ledetråde til at guide dig;
- **Solution**: åbner den færdige version i en ny fane.

Bemærk

Du kan også se den korte videotutorial nedenfor for at lære, hvordan du arbejder med CodeSandbox.

## Sådan arbejder du med Code Sandbox

## Opgave: Opret et produktkort
Opret et simpelt produktkort ved hjælp af JSX 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).
   - Dens tekstindhold skal være `Computer`.
3. Produktprisen (`span` element).
   - Dens tekstindhold skal være `Price: $129.99`.
4. Produktbeskrivelsen (`p` element).
   - Dens tekstindhold 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 `{}`.
3. Sørg for, at elementerne `h3`, `span` og `p` har de korrekte værdier.

Undersøg, hvordan React anvendes til at opbygge dynamiske brugergrænseflader ved hjælp af komponenter, JSX og props. Håndtering af tilstand og sideeffekter med hooks, rendering af lister og betinget UI samt anvendelse af styling på reelle komponenter. Opsætning af et React-projekt med Vite og forståelse af, hvordan applikationer er struktureret.

Udfordring: Gengiv et Element i React

Sådan arbejder du med Code Sandbox

Opgave: Opret et produktkort