Merge branch 'master' of git.unistra.fr:W4a/w4ab

React/TP1.md

@@ -0,0 +1,32 @@
+Démarrage
+===
+
+Afin d'initialiser un dossier `tp1` contenant l'ensemble des outils nécessaires, vous pouvez utiliser le module `create-react-app` (https://create-react-app.dev/) :
+```
+npx create-react-app tp1
+```
+
+Toggle
+===
+
+Ecrire un composant `Toggle` qui stocke une valeur boolénne, affiche sa valeur courante ainsi qu'un bouton permettant de la modifier.
+
+Counter
+===
+
+Ecrire un composant `Counter` qui stocke une valeur entière, affiche sa valeur courante ainsi qu'un bouton permettant de l'incrémenter.
+
+Question
+--
+
+Comment faire pour compter et afficher le nombre de fois que la valeur du `Toggle` est passée à `true` ?
+
+Clock
+===
+
+Ecrire un composant `Clock` qui affiche l'heure (hh:mm:ss) courante.
+Le composant ne reçoit pas de propriété d'entrée et est autonome pour son rafraichissement régulier.
+
+Extraire la logique de l'horloge dans un custom hook `useClock`.
+
+Dans l'application principale, déclarer un composant `Clock` ainsi qu'une checkbox indiquant si oui ou non le composant Clock doit être rendu.

React/TP2.md

@@ -0,0 +1,23 @@
+# Items List
+
+L'objectif est d'écrire une application dans laquelle :
+ - on visualise une liste d'items (texte)
+ - chaque item peut être supprimé grâce à un bouton
+ - un formulaire permet de rajouter un nouvel item
+
+> Ecrire les composants suivants :
+
+>  - `ItemsApp` :
+>    - possède dans son `state` un tableau de chaînes `items`.
+>    - dispose d'une fonction `addItem` qui reçoit une chaîne et remplace le tableau `items` par un tableau contenant le nouvel item en plus des anciens items
+>    - dispose d'une fonction `removeItem` qui reçoit un nombre et remplace le tableau `items` par un tableau contenant les anciens items sauf celui dont l'index correspond au nombre reçu
+>    - retourne une interface composée d'un `AddItemForm` et d'une `ItemsList`. Le composant `AddItemForm` reçoit une prop `addItem` à laquelle on affecte la fonction `addItem`; le composant `ItemsList` reçoit une prop `items` à laquelle on affecte le tableau `items` du state, et une prop `removeItem` à laquelle on affecte la fonction `removeItem`
+
+>  - `ItemsList` :
+>    - props : tableau `items` (tableau de chaînes), fonction `removeItem`
+>    - retourne une interface composée d'une liste d'éléments; pour chaque item, on affiche son texte ainsi qu'un bouton dont l'événement `onClick` appelle la fonction `removeItem` en lui passant l'index de l'élément dans le tableau
+
+>  - `AddItemForm` :
+>    - props : fonction `addItem`
+>    - possède dans son state une chaîne `currentText`
+>    - retourne une interface composée d'un formulaire contenant un input et un bouton de validation; l'input est contrôlé et lié à la valeur `currentText` du state; à la soumission du formulaire, la fonction `addItem` est appelée en lui passant la valeur de `currentText` puis l'input est vidé

React/TP3.md

@@ -0,0 +1,14 @@
+# Liste de courses
+
+Reprendre l'application du TP précédent.
+
+Faire en sorte que chaque item de la liste ne soit plus simplement une chaîne de caractères, mais un objet avec les propriétés suivantes :
+ - `name`
+ - `cost`
+ - `quantity`
+
+Quand un item est ajouté à la liste, son coût et sa quantité sont initialisés à 1.
+
+Le nom, le coût et la quantité de chaque item sont modifiables grâce à des `input` de type `text`et `number`.
+
+Le coût total de l'ensemble des éléments de la liste (toujours à jour) est affiché en-dessous de la liste.