> 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.

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

Lær at opbygge dynamiske, interaktive brugergrænseflader med React. Forstå kernekoncepter som JSX, det virtuelle DOM og genanvendelig komponentbaseret arkitektur. Anvend stylingteknikker ved hjælp af inline styles, ekstern CSS og CSS-moduler for skalerbart design. Håndter state og sideeffekter effektivt med React Hooks og del data på tværs af komponenter ved hjælp af Context.

Opnå forståelse for de centrale principper i React. Du vil lære om JSX (JavaScript XML), opbygning af genanvendelige UI-komponenter og rendering af elementer. Derudover vil du udforske vigtigheden af datainhentning og betinget rendering i React-applikationer. Ved afslutningen af dette afsnit vil du have et solidt fundament i Reacts væsentlige begreber, hvilket forbereder dig til succes med de mere avancerede emner i de følgende afsnit.

Undersøg de forskellige metoder til at tilføje styles til React-applikationer. Du vil lære, hvordan man anvender styles på individuelle komponenter, bruger dynamiske styles og opretholder en skalerbar og vedligeholdelsesvenlig stylingtilgang i projekter.

Kraftfulde funktioner i moderne React-udvikling. Hooks revolutionerer måden, vi skriver funktionelle komponenter på, ved at tilbyde en kortfattet og intuitiv metode til at håndtere tilstand og udføre sideeffekter. Omvendt gør Context det muligt at dele data gennem komponenttræet uden prop drilling. Kombinationen af hooks og Context muliggør effektiv tilstandshåndtering og forenklet datadeling i React-applikationer.

Trinvis vejledning i, hvordan man starter et virkeligt React-projekt. Fra opsætning af udviklingsmiljø til forståelse af projektorganisering og vigtige værktøjer opnås viden og selvtillid til at påbegynde arbejdet med React.

Udfordring: Gengiv Et Element i React

Sådan arbejder du med Code Sandbox

Opgave: Opret et produktkort

Awesome!

Udfordring: Gengiv Et Element i React

Sådan arbejder du med Code Sandbox

Opgave: Opret et produktkort