feat: add tps

tps/form.md

@@ -0,0 +1,27 @@
+# Les formulaires avec React
+
+Ce TP permet de créer un formulaire avec React. Nous allons voir comment récupérer des informations pour inscrire un utilisateur dans notre application.
+En pratique, des librairies externent facilitent ce travail, mais nous ne les utiliserons pas pour se forcer à bien comprendre le fonctionnement des formulaires.
+
+# Pour ceux qui partent de zéro
+
+L'objectif est d'obtenir une page HTML ressemblant à cette capture d'écran :
+
+# Pour ceux qui codent une variante du projet
+
+Créez un formulaire avec la librairie [Formik](https://formik.org/).
+
+# Pour ceux qui partent du code existant
+
+**1. Dans quel fichier se situe le formulaire ?**
+
+**2. A quoi sert la fonction handleChange ?**
+
+**3. Où sont stockés les informations ajoutées par l'utilisateur ?**
+
+**4. Ajoutez la fonction handleChange dans les champs du formulaire**
+
+**5. Ajoutez une fonction handleSubmit pour afficher les résultats de l'utilisateur avec la fonction alert**
+
+**6. Ajoutez une valeur par défaut à travers les props**
+

tps/list_user.md

@@ -0,0 +1,22 @@
+# TP liste d'utilisateurs
+
+## Objectif du TP
+
+Vous devez charger écrire un composant User pour afficher le profil d'un utilisateur et afficher les utilisateurs stockés dans un fichier JSON depuis ce composant.
+
+
+## Pour ceux qui partent du projet existant
+
+**1. Trouvez dans le code comment charger le fichier JSON**
+
+**2. Où se situe le composant User ?**
+
+**3. Importez le composant dans l'application et instanciez le sur la liste d'utilisateurs**
+
+## Pour ceux qui souhaitent partir de zéro
+
+ vous pouvez [juste télécharger le fichier JSON](https://randomuser.me/api/?results=10).
+
+## Pour ceux aui souhaitent faire un projet différent
+
+Vous pouvez [télécharger une liste de films](https://imdb-api.com/).

tps/reveil.md

@@ -0,0 +1,15 @@
+# TP réveil
+
+Pour ce TP, vous pouvez partir de votre code écrit dans le [TP précédent](./tps/form.md).
+
+## Questions
+
+**1. Créer un formulaire pour ajouter une date.**
+
+**2. Convertisser cette date en timestamp et écrire une fonction pour comparer la [date actuelle](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date) avec la date ajoutée par l'utilisateur.**
+
+**3. Exécuter cette fonction toutes les secondes grâce à la fonction [setInterval](https://www.w3schools.com/jsref/met_win_setinterval.asp).**
+
+**4. Si la date actuelle est supérieure à la date de l'utilisateur, ajouter un message dans la page pour indiquer que le compteur est terminé.**
+
+

tps/semantic.md

@@ -0,0 +1,7 @@
+# Semantic UI
+
+Semantic UI est un framework de design, dont le développement s'est terminé en 2018. Depuis, un fork appelé Fomantic UI et géré par la communauté open-source a pris la suite.
+
+## Pour ceux qui partent de zéro
+
+L'installation est un peu délicate.