> Remarque
>
> Tous les défis peuvent sembler défectueux par défaut, car ils contiennent des espaces vides où vous devez saisir le code nécessaire. Une fois ces espaces correctement complétés, le code final s'affichera sur la page en direct.
>
> De plus, chaque défi propose deux boutons : `Indice` et `Solution`. Cliquer sur `Indice` fournit de petites indications pour le défi en cours, tandis que le bouton `Solution` ouvre un nouvel onglet avec le défi complété.

## Tâche : Création d'une carte produit
Créer la carte produit et l'afficher dans le DOM. La carte produit doit comporter :
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 de caractères `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.

Apprenez à créer des interfaces utilisateur dynamiques et interactives avec React. Comprenez les concepts fondamentaux tels que JSX, le DOM virtuel et l’architecture réutilisable basée sur les composants. Appliquez des techniques de mise en forme à l’aide de styles en ligne, de CSS externes et de modules CSS pour un design évolutif. Gérez efficacement l’état et les effets secondaires avec les Hooks React et partagez les données entre les composants grâce au Context.

Acquérir une compréhension des principes fondamentaux de React. Vous découvrirez le JSX (JavaScript XML), la création de composants d’interface utilisateur réutilisables et le rendu des éléments. De plus, vous explorerez l’importance de la collecte de données et du rendu conditionnel dans les applications React. À la fin de cette section, vous disposerez d’une base solide des concepts essentiels de React, vous préparant ainsi à aborder avec succès les sujets plus avancés des sections suivantes.

Découvrez les différentes méthodes d'ajout de styles aux applications React. Vous apprendrez à appliquer des styles aux composants individuels, à utiliser des styles dynamiques et à maintenir une approche de stylisation évolutive et maintenable dans vos projets.

Fonctionnalités puissantes dans le développement moderne avec React. Les hooks révolutionnent l'écriture des composants fonctionnels, offrant une méthode concise et intuitive pour gérer l'état et effectuer des effets secondaires. À l'inverse, Context permet de partager des données à travers l'arborescence des composants sans avoir recours au prop drilling. La combinaison des hooks et de Context permet une gestion d'état efficace et un partage de données simplifié dans les applications React.

Guide étape par étape pour démarrer un projet React en conditions réelles. De la configuration de votre environnement de développement à la compréhension de l'organisation du projet et des outils essentiels, vous acquerrez les connaissances et la confiance nécessaires pour débuter votre parcours React.

Défi : Afficher un Élément dans React

Comment utiliser Code Sandbox

Tâche : Création d'une carte produit

Awesome!

Défi : Afficher un Élément dans React

Comment utiliser Code Sandbox

Tâche : Création d'une carte produit