# Tâche
Créer une carte de profil utilisateur simple en utilisant JSX.
La carte de profil doit inclure :
1. Une image (élément `img`).
* L'attribut `src` doit être égal à la variable `avatarUrl` ;
* L'attribut `alt` doit être égal à la chaîne `User Avatar` ;
* L'attribut `width` doit être égal à `120`.
2. Un titre (élément `h2`). Son contenu textuel doit être `Alex Johnson`.
3. Un paragraphe (élément `p`). Son contenu textuel doit être `Frontend Developer`.
4. Un autre paragraphe (élément `p`). Son contenu textuel doit être `Loves React and building UI projects`.

## 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-01-starter-build-a-user-profile-card?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-01-solution-build-a-user-profile-card?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.

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 : Créer une Carte de Profil Utilisateur

Tâche

Code de départ

Solution