# Taak

Maak een herbruikbare `UserCard`-component die gebruikersinformatie weergeeft via props.
De `UserCard`-component moet het volgende bevatten:

1. Een koptekst (`h2`-element). De tekstinhoud moet de `name`-prop weergeven.

2. Een paragraaf (`p`-element). De tekstinhoud moet de `job`-prop weergeven.

De `App`-component rendert al meerdere `UserCard`-componenten met verschillende props.


## Startcode
Open het startproject hieronder 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-02-starter?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-02-solution?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.

Wat is het belangrijkste doel van props in React?

Welke methode wordt het meest gebruikt om een lijst met items in React weer te geven?

Waarom is de key-prop belangrijk bij het weergeven van lijsten?

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 Herbruikbare Gebruikerskaarten

Taak

Startcode

Oplossing