# 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.