Tous les défis peuvent apparaître incomplets par défaut. Ils comportent des sections vides où il est nécessaire d’ajouter le code requis. Une fois toutes les parties manquantes correctement complétées, le code final sera affiché sur la page en direct.

Chaque défi comprend deux boutons d’aide :
- **Indice** : affiche de petits indices pour vous guider ;
- **Solution** : ouvre la version complétée dans un nouvel onglet.

Remarque

Vous pouvez également regarder le court tutoriel vidéo ci-dessous pour apprendre à utiliser CodeSandbox.

## Comment utiliser CodeSandbox

## Tâche : Création d’une fiche produit
Créer une fiche produit simple en utilisant JSX et l’afficher dans le DOM. La fiche produit doit inclure :
1. L’image du produit (élément `img`).
   - L’attribut `src` doit être égal à la variable `imageUrl`.
   - L’attribut `alt` doit être égal à la chaîne `Computer`.
   - L’attribut `width` doit être égal à `256`.
2. Le titre du produit (élément `h3`).
   - Son contenu textuel doit être `Computer`.
3. Le prix du produit (élément `span`).
   - Son contenu textuel doit être `Price: $129.99`.
4. La description du produit (élément `p`).
   - Son contenu textuel doit être `New Model`.

1. L’attribut `src` doit contenir la variable `imageUrl` comme valeur. Utiliser des accolades `{}`.
2. L’attribut `alt` doit contenir la chaîne `"Computer"` comme valeur. L’entourer de guillemets doubles.
3. L’attribut `width` doit contenir le nombre `256` comme valeur. Utiliser des accolades `{}`.
3. Vérifier que les éléments `h3`, `span` et `p` ont les valeurs correctes.

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 : Rendre un Élément dans React

Comment utiliser CodeSandbox

Tâche : Création d’une fiche produit