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å live-siden.

Hver udfordring indeholder to hjælpeknapper:
- **Hint**: viser små ledetråde for 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 CodeSandbox

## 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).
   - 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 `{}`.
3. Sørg for, at elementerne `h3`, `span` og `p` har de korrekte værdier.

Udforsk grundlæggende principper for opbygning af brugergrænseflader med React. Fokus på komponenter, JSX, dataflow, tilstand og sideeffekter anvendt i daglige React-applikationer.

Undersøg, hvad React er, og hvordan det gengiver brugergrænseflader. Fokus på komponenter, JSX-syntaks og visning af elementer på skærmen.

Dyk ned i overførsel af data mellem komponenter og styring af UI-output. Fokus på props, betinget rendering og rendering af datalister.

Lær, hvordan brugerinteraktioner og eksterne data ændrer brugergrænsefladen over tid. Fokus på håndtering af tilstand og håndtering af sideeffekter med React hooks.

Undersøg almindelige metoder til at style React-komponenter. Fokus på anvendelse af styles med inline-styles og ekstern CSS.

Lær, hvordan man kører et React-projekt og forstår dets struktur. Fokus på at starte et projekt med Vite og navigere i projektfilerne.

Udfordring: Gengiv Et Element i React

Sådan arbejder du med CodeSandbox

Opgave: Opret et produktkort

Udfordring: Gengiv Et Element i React

Sådan arbejder du med CodeSandbox

Opgave: Opret et produktkort