Alle utfordringer kan vises som ufullstendige som standard. De inneholder tomme seksjoner hvor du må legge til nødvendig kode. Når alle manglende deler er fylt ut korrekt, vil den fullførte koden vises på den levende siden.

Hver utfordring inkluderer to hjelpeknapper:
- **Hint**: viser små ledetråder for å veilede deg;
- **Solution**: åpner den fullførte versjonen i en ny fane.

Merk

Du kan også se den korte videotutorialen nedenfor for å lære hvordan du arbeider med CodeSandbox.

## Hvordan bruke Code Sandbox

## Oppgave: Lage et produktkort
Lag et enkelt produktkort ved hjelp av JSX og gjengi det til DOM-en. Produktkortet må inkludere:
1. Produktbilde (`img`-element).
   - `src`-attributtet må være lik variabelen `imageUrl`.
   - `alt`-attributtet må være lik strengen `Computer`.
   - `width`-attributtet må være lik `256`.
2. Produkttittel (`h3`-element).
   - Tekstinnholdet må være `Computer`.
3. Produktpris (`span`-element).
   - Tekstinnholdet må være `Price: $129.99`.
4. Produktbeskrivelse (`p`-element).
   - Tekstinnholdet må være `New Model`.

1. `src`-attributten må inneholde variabelen `imageUrl` som verdi. Bruk krøllparenteser `{}`.
2. `alt`-attributten må inneholde strengen `"Computer"` som verdi. Sett den i doble anførselstegn.
3. `width`-attributten må inneholde tallet `256` som verdi. Bruk krøllparenteser `{}`.
3. Sørg for at elementene `h3`, `span` og `p` har riktige verdier.

Utforsk grunnleggende prinsipper for å bygge brukergrensesnitt med React. Fokuser på komponenter, JSX, dataflyt, tilstand og sideeffekter brukt i daglige React-applikasjoner.

Utforsk hva React er og hvordan det gjengir brukergrensesnitt. Fokus på komponenter, JSX-syntaks og visning av elementer på skjermen.

Fordypning i overføring av data mellom komponenter og kontroll av UI-utdata. Fokus på props, betinget rendering og rendering av lister med data.

Lær hvordan brukerinteraksjoner og ekstern data endrer brukergrensesnittet over tid. Fokus på håndtering av tilstand og sideeffekter med React-hooks.

Utforsk vanlige metoder for å style React-komponenter. Fokus på bruk av inline-stiler og ekstern CSS.

Lær hvordan du kjører et React-prosjekt og forstår dets struktur. Fokuser på å starte et prosjekt med Vite og navigere i prosjektfilene.

Utfordring: Gjengi Et Element I React

Hvordan bruke Code Sandbox

Oppgave: Lage et produktkort

Utfordring: Gjengi Et Element I React

Hvordan bruke Code Sandbox

Oppgave: Lage et produktkort