From 4d106cc69d5893f52c091a7d5dfd06c8a2b9211c Mon Sep 17 00:00:00 2001 From: Jean-Christophe <> Date: Fri, 26 Jan 2024 10:23:15 +0100 Subject: [PATCH] restore readme --- readme.md | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 readme.md diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..d8487ac --- /dev/null +++ b/readme.md @@ -0,0 +1,71 @@ +# Introduction à React + +Ce dépôt contient le code utilisé en exemple dans le cours [https://www.fil.univ-lille.fr/~routier/enseignement/licence/js-s4/html/react.html](https://www.fil.univ-lille.fr/~routier/enseignement/licence/js-s4/html/react.html) et [https://www.fil.univ-lille.fr/~routier/enseignement/licence/js-s4/html/react-2.html](https://www.fil.univ-lille.fr/~routier/enseignement/licence/js-s4/html/react-2.html). + +Plusieurs versions progressives du dépôt pour accompagner le cours. + + +## Mise en place + * récupérer le dépôt + * installer les paquets *Node.js* : + ```bash + $ npm install + ``` + * démarrer le serveur de développement de *Webpack* + ```bash + $ npm run dev-server + ``` + +## Les versions + +Il faut charger une version avec + +```bash +$ git checkout **tag** +``` +où `tag` peut prendre comme valeur : + +* `v0` : premier exemple basique avec *React* + voir `/src/scripts/main.js` et le point d'insertion `#insertReactHere` dans `/src/index.html` +* `v0.5` : second exemple avec création d'un emboitement d'éléments +* `v1` : premier exemple avec la syntaxe JSX +* `v2` : premiers composants sans état + voir `/src/components/first.jsx`, `/src/components/second.jsx` et son utilisation dans `/src/mains.js` +* `v3` : utilisation des propriétés + voir `/src/components/person.jsx`, `/src/components/personListing.jsx` et son utilisation dans `/src/mains.js` +* `v3.1` : utilisation de la syntaxe de pattern matching sur les objets pour destructurer l'objet `props` dans le paramètre du constructeur du composant. +* `v3.2` : la propriété `children` +* `v4` : définition des composants à l'aide de classes + voir `/src/components/person_class.jsx`, `/src/components/personListing_class.jsx` et son utilisation dans `/src/mains.js` +* `v4.5` : définitions locales et valeurs par défaut + voir `/src/components/person.jsx` et son utilisation dans `/src/mains.js` +* `v4.6-problem` : génération d'une liste de composants, à l'aide de `map()` + voir `/src/components/personListing.jsx` + /!\\ mais **cette version pose problème** car il manque la gestion de la propriété `key` : voir dans la console +* `v4.6` : génération d'une liste de composants avec gestion de la propriété `key` +* `v5` : premier composant à état + voir `/src/components/person.jsx` +* `v5.1` : gestion d'événements + voir `/src/components/star.jsx` et `onClick` +* `v5.2` : modification et état courant : mise en évidence du problème + voir `/src/components/star.jsx` +* `v5.3` : modification et état courant : utilisation d'une fonction en argument de `setOn` pour modifier l'état à partir de la valeur précédente + voir `/src/components/star.jsx` (et `/src/components/person.component.jsx`) +* `v5.5` : cycle de vie du composant : utilisation du hook `useEffect` pour agir au moment de la création du composant : juste après le premier rendu. + voir `/src/components/personListing.component.jsx` ainsi que `/src/components/person.component.jsx` +* `v 5.6` : utilisation des dépendances du hook `useEffect` pour déclencher son effet + voir `/src/components/person.component.jsx` +* `v5.7` : utilisation du hook `useRef` et complément dépendances de `useEffect` + voir `/src/components/person.component.jsx` +* `v5.8` : mise en oeuvre de la fonction de nettoyage du `useEffect` + voir `/src/components/person.component.jsx` +* `v5.9` : mise en oeuvre de la fonction de nettoyage du `useEffect`, appel à chaque exécution du hook + voir `/src/components/person.component.jsx` +* `v6` : il faut remonter l'état et inversion du flux + voir `/src/components/delayButton.component.jsx` et `/src/components/personListingController.component.jsx` +* `v6.1` : restructuration des composants, suite de "placer l'état au plus haut" et de l'inversion du flux + voir `/src/components/personListingControls.component.jsx` et `/src/components/personListingController.component.jsx` + +Faire ```git checkout main``` pour revenir à la version finale. + + -- GitLab