# Taak

Maak een eenvoudige social media postkaart met een werkende like-teller met behulp van de `useState` hook.

De component moet het volgende bevatten:

1. Een statusvariabele genaamd `likes`. De beginwaarde moet `120` zijn.

2. Een koptekst (`h2`-element). De tekst moet zijn: `Exploring Iceland`.

3. Een paragraaf (`p`-element). De tekst moet zijn: `One of the most beautiful trips I've ever had.`

4. Nog een paragraaf (`p`-element). Deze moet `Likes:` weergeven gevolgd door de huidige waarde van `likes`.

5. Een knop (`button`-element). De tekst moet zijn: `Like Post`.

6. Wanneer op de knop wordt geklikt, verhoog de `likes` status met `1`.


## 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-05-starter-build-a-social-media-post-like-button?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-05-solution-build-a-social-media-post-like-button?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.

Welke hook wordt gebruikt om de status te beheren in een functioneel component?

Wanneer wordt een `useEffect`-hook standaard uitgevoerd (zonder afhankelijkheidsarray)?

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 Like-Knop voor een Social Media Post

Taak

Startcode

Oplossing