# Opgave
Opret et simpelt brugerprofilkort ved hjælp af JSX.
Profilkortet skal inkludere:
1. Et billede (`img`-element).
   * `src`-attributten skal være lig med variablen `avatarUrl`;
   * `alt`-attributten skal være lig med teksten `User Avatar`;
   * `width`-attributten skal være lig med `120`.
2. En overskrift (`h2`-element). Dens tekstindhold skal være `Alex Johnson`.
3. Et afsnit (`p`-element). Dets tekstindhold skal være `Frontend Developer`.
4. Endnu et afsnit (`p`-element). Dets tekstindhold skal være `Loves React and building UI projects`.

## Startkode
Åbn startprojektet nedenfor og udfyld de manglende dele af komponenten.

[Starter code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-01-starter-build-a-user-profile-card?file=src%2FApp.jsx)



## Løsning

Du kan sammenligne dit resultat med den endelige løsning nedenfor.

[Solution code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-01-solution-build-a-user-profile-card?file=src%2FApp.jsx)

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: Opbyg et Brugerprofilkort

Opgave

Startkode

Løsning