# Oppgave
Lag et enkelt brukerprofilkort ved hjelp av JSX.
Profilkortet må inneholde:
1. Et bilde (`img`-element).
   * `src`-attributtet må være lik variabelen `avatarUrl`;
   * `alt`-attributtet må være lik strengen `User Avatar`;
   * `width`-attributtet må være lik `120`.
2. En overskrift (`h2`-element). Tekstinnholdet må være `Alex Johnson`.
3. Et avsnitt (`p`-element). Tekstinnholdet må være `Frontend Developer`.
4. Et annet avsnitt (`p`-element). Tekstinnholdet må være `Loves React and building UI projects`.

## Startkode
Åpne startprosjektet under og fullfør de manglende delene av 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 resultatet ditt med den endelige løsningen under.

[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)

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: Bygg et Brukerprofilkort

Oppgave

Startkode

Løsning