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 comme Formik proposent une API simple pour cela.
Lisez le code lié à ce TP puis répondez aux questions.
1. Décrire le rôle de chaque fonction (une phrase par fonction).
2. Quelles sont les states et les props mis en jeu ? Indiquez leur valeur par défaut.
3. Que contient la variable event dans onChange={(event) => setName(event.target.value)}? Vous pouvez la scruter à l'aide de console.log.
4. Pourquoi doit-on encapsuler un espace avec {" "} ?
5. Peut-on transmettre une fonction dans un Props ?
6. Précisez étape par étape ce que fait React lorsque le champ nom est modifié.
7. Expliquez la regex pour valider un email. Vous pouvez la recopier dans regex101.com pour vous aider.
8. Un composant a été designé avec styled-components. En s'aidant de la documentation de cette librairie, expliquez en quoi consiste ce design.
Programmez un composant qui s'incrémente à chaque seconde. Vous aurez pour cela besoin d'utiliser la fonction setInterval.
Créez un bouton pour démarrer et arrêter le timer. Séparez les secondes des minutes. Réinitialisez le compteur lorsqu'il atteint la valeur 99:59. Ajoutez une image de fond pour que cela ressemble à un réveil. Utilisez la librairie react-seven-segment-display pour rendre votre réveil plus réaliste.
Rédigez un test pour vérifier que le timer fonctionne bien. Vous aurez pour cela besoin de mocker la fonction setInterval avec Jest.
Désignez au moins 1 composant avec styled-components.