# Taak
Maak een eenvoudige gebruikersprofielkaart met behulp van JSX.
De profielkaart moet het volgende bevatten:
1. Een afbeelding (`img`-element).
   * Het `src`-attribuut moet gelijk zijn aan de variabele `avatarUrl`;
   * Het `alt`-attribuut moet gelijk zijn aan de string `User Avatar`;
   * Het `width`-attribuut moet gelijk zijn aan `120`.
2. Een koptekst (`h2`-element). De tekstinhoud moet `Alex Johnson` zijn.
3. Een paragraaf (`p`-element). De tekstinhoud moet `Frontend Developer` zijn.
4. Nog een paragraaf (`p`-element). De tekstinhoud moet `Loves React and building UI projects` zijn.

## Startcode
Open het onderstaande startproject en vul de ontbrekende delen van de component aan.

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



## Oplossing

Je kunt je resultaat vergelijken met de uiteindelijke oplossing hieronder.

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

Ontdek de basisprincipes van het bouwen van gebruikersinterfaces met React. Focus op componenten, JSX, gegevensstroom, toestand en neveneffecten die worden gebruikt in alledaagse React-toepassingen.

Ontdek wat React is en hoe het gebruikersinterfaces rendert. Focus op componenten, JSX-syntaxis en het weergeven van elementen op het scherm.

Verdieping in het doorgeven van gegevens tussen componenten en het aansturen van de UI-uitvoer. Focus op props, conditionele weergave en het weergeven van lijsten met gegevens.

Leer hoe gebruikersinteracties en externe gegevens de gebruikersinterface in de loop van de tijd veranderen. Focus op het beheren van toestand en het afhandelen van neveneffecten met React hooks.

Ontdek gangbare methoden om React-componenten te stylen. Focus op het toepassen van stijlen met inline stijlen en externe CSS.

Leer hoe u een React-project uitvoert en de structuur ervan begrijpt. Focus op het starten van een project met Vite en het navigeren door de projectbestanden.

Uitdaging: Bouw een Gebruikersprofielkaart

Taak

Startcode

Oplossing