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 et 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 :

$  npm install

• démarrer le serveur de développement de Webpack

$  npm run dev-server

Les versions

Il faut charger une version avec

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