# Tâche

Créer un composant réutilisable `StatusCard` qui affiche différents messages selon la prop `online`.

Le composant `StatusCard` doit inclure :

1. Un titre (élément `h2`). Son contenu textuel doit afficher la prop `name`.

2. Un paragraphe (élément `p`).

* Si la prop `online` est `true`, afficher `Online` ;
* Sinon, afficher `Offline`.

Le composant `App` affiche déjà plusieurs composants `StatusCard` avec différentes props.


## 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-03-starter-show-user-status-messages?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-03-solution-show-user-status-messages?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 est le principal objectif des props dans React ?

Quelle méthode est la plus couramment utilisée pour afficher une liste d’éléments dans React ?

Pourquoi la prop key est-elle importante lors de l’affichage de listes ?

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.

Défi : Afficher les messages d'état de l'utilisateur

Tâche

Code de départ

Solution