diff --git a/readme.md b/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..d8487ac9b75273935f68b3d7eb18e2715e582926
--- /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.
+
+