diff --git a/D-poo-avancee.md b/D-poo-avancee.md index af0ddfca6fcda6f72c6e1a20206915fa5c24f1df..f7f7e74f166f013abf1e08d4cd89b6f261086059 100644 --- a/D-poo-avancee.md +++ b/D-poo-avancee.md @@ -57,7 +57,15 @@ _**L'objectif de cet exercice est d'utiliser une classe à l'intérieur d'une au > _vérifiez que votre classe `Component` ajoute bien la classe CSS `pizzaThumbnail`_ > _sur la balise `<article>`..._ -3. **Créez une classe `PizzaThumbnail`** (dans `src/components/PizzaThumbnail.js`) avec le code suivant : +3. **Grâce aux modifications que l'on vient de faire sur la classe `Component`,** + **on peut maintenant créer la classe `PizzaThumbnail`** (dans `src/components/PizzaThumbnail.js`). + + `PizzaThumbnail` est en fait un `Component` auquel on peut passer un objet "pizza" + (_une cellule du tableau `data`_) et qui est capable de générer le même code HTML + que ce que l'on avait fait dans le TP1. + + Je vous fourni son code car l'intérêt ici, est simplement de **s'assurer que votre classe `Component`** + **gère bien les différents cas limites** : ```js export default class PizzaThumbnail extends Component { @@ -84,7 +92,8 @@ _**L'objectif de cet exercice est d'utiliser une classe à l'intérieur d'une au Dans le `src/main.js`, testez votre classe avec le code suivant : ```js - const pizzaThumbnail = new PizzaThumbnail(data[0]); + const pizza = data[0]; + const pizzaThumbnail = new PizzaThumbnail(pizza); document.querySelector( '.pageContent' ).innerHTML = pizzaThumbnail.render(); ```