# Tâche

Créer un profil utilisateur simple qui charge les données utilisateur à partir d'une fonction API en utilisant `useEffect`.

Le composant doit inclure :

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

2. Un hook `useEffect`.

* Appeler la fonction `fetchUser` à l'intérieur de l'effet.
* Utiliser `.then()` pour recevoir la réponse.
* Enregistrer la réponse dans l'état `user` en utilisant `setUser`.

3. Si `user` est `null`, afficher un paragraphe (élément `p`). Son contenu texte doit être `Loading user...`.

4. Si `user` existe, afficher :

* Un titre (élément `h2`) qui affiche le nom de l'utilisateur.
* Un paragraphe (élément `p`) qui affiche le métier de l'utilisateur.


## 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-06-starter-load-user-data-from-an-api?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-06-solution-load-user-data-from-an-api?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.

Défi : Charger les données utilisateur depuis une API

Tâche

Code de départ

Solution