# Tâche

Créer une carte de publication sur les réseaux sociaux avec un compteur de likes fonctionnel en utilisant le hook `useState`.

Le composant doit inclure :

1. Une variable d'état appelée `likes`. Sa valeur initiale doit être `120`.

2. Un titre (`h2`). Son contenu textuel doit être `Exploring Iceland`.

3. Un paragraphe (`p`). Son contenu textuel doit être `One of the most beautiful trips I've ever had.`

4. Un autre paragraphe (`p`). Il doit afficher `Likes:` suivi de la valeur actuelle de `likes`.

5. Un bouton (`button`). Son contenu textuel doit être `Like Post`.

6. Lorsqu'on clique sur le bouton, augmenter l'état `likes` de `1`.


## Code de départ
Ouvrir le projet de départ ci-dessous et compléter les parties manquantes du composant.

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



## Solution

Vous pouvez comparer votre résultat avec la solution finale ci-dessous.

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

Découvrez les principes fondamentaux de la création d'interfaces utilisateur avec React. Concentrez-vous sur les composants, le JSX, le flux de données, l'état et les effets secondaires utilisés dans les applications React courantes.

Découvrez ce qu'est React et comment il génère des interfaces utilisateur. Mise en avant des composants, de la syntaxe JSX et de l'affichage des éléments à l'écran.

Quel hook est utilisé pour gérer l'état dans un composant fonctionnel ?

Quand un hook `useEffect` s'exécute-t-il par défaut (sans tableau de dépendances) ?

Approfondissement du passage de données entre les composants et du contrôle de l'affichage de l'interface utilisateur. Accent mis sur les props, le rendu conditionnel et le rendu de listes de données.

Découvrez comment les interactions utilisateur et les données externes modifient l'interface utilisateur au fil du temps. Accent mis sur la gestion de l'état et le traitement des effets secondaires avec les hooks React.

Explorer les méthodes courantes de stylisation des composants React. Mettre l'accent sur l'application des styles à l'aide de styles en ligne et de CSS externe.

Découvrez comment exécuter un projet React et comprendre sa structure. Concentrez-vous sur le démarrage d’un projet avec Vite et la navigation dans les fichiers du projet.

Challenge: Créer un Bouton J'aime pour une Publication sur les Réseaux Sociaux

Tâche

Code de départ

Solution