diff --git a/sujets/sujet1.md b/sujets/sujet1.md new file mode 100644 index 0000000000000000000000000000000000000000..46245218c8ba956c5e339957022c5f5a93a56a33 --- /dev/null +++ b/sujets/sujet1.md @@ -0,0 +1,33 @@ +Toggle +=== + +Ecrire un composant `Toggle` qui stocke une valeur boolénne, affiche sa valeur courante ainsi qu'un bouton permettant de la modifier. + +Counter +=== + +Ecrire un composant `Counter` qui stocke une valeur entière, affiche sa valeur courante ainsi qu'un bouton permettant de l'incrémenter. + +Question +-- + +Comment faire pour compter et afficher le nombre de fois que la valeur du `Toggle` est passée à `true` ? + +Clock +=== + +Ecrire un composant `Clock` qui affiche l'heure (hh:mm:ss) courante. +Le composant ne reçoit pas de propriété d'entrée et est autonome pour son rafraichissement régulier. + +Extraire la logique de l'horloge dans un custom hook. + +Dans l'application principale, déclarer un composant `Clock` ainsi qu'une checkbox indiquant si oui ou non le composant Clock doit être rendu. + +TodoList +=== + +Ecrire une petite application de TodoList. +Il doit être possible d'ajouter un nouvel item, de supprimer un item existant, et de marquer un item comme `fait` (qui s'affiche alors en texte barré). + +Faire en sorte que les items soient sauvegardés dans le `localStorage`. +Ecrire un custom hook pour déclarer du `state` sauvegardé dans le `localStorage`. diff --git a/sujets/sujet2.md b/sujets/sujet2.md new file mode 100644 index 0000000000000000000000000000000000000000..9621c6b0e7d219da3949640fab7d86093c593585 --- /dev/null +++ b/sujets/sujet2.md @@ -0,0 +1,60 @@ +Requêtes HTTP et tableaux de données +=== + +Ecrire une application qui récupère des données de l'API `swapi.dev` et les affiche. + +V1 +--- + +Le composant principal de l'application affiche un bouton qui, au clic, déclenche une requête à l'URL `https://swapi.dev/api/people/`. En réponse, le serveur renvoie un objet composé des champs : + - `results` : tableau d'objets contenant des informations sur les personnages + - `next` : URL permettant de récupérer les personnages suivants + - `previous` : URL permettant de récupérer les personnages précédents + +En attendant la réponse du serveur, le composant affiche le texte "Loading...". +En cas d'erreur, il affiche le message d'erreur correspondant. + +Une fois les données arrivées, il rend : + - un bouton `previous` permettant de récupérer les personnages précédents + - un bouton `next` permettant de récupérer les personnages suivants + - un composant `CharactersList` en lui passant le tableau de personnages. Ce dernier affiche une liste des noms des personnages. + +Bien déterminer les différents éléments devant être stockés sous forme de `state` dans le composant principal. + +V2 +--- + +Faire en sorte que le composant principal de l'application récupère la liste de personnages dès son chargement. + +Permettre à l'utilisateur de sélectionner un personnage dans la liste. +Ce dernier est alors affiché en gras. + +Quand un personnage est sélectionné, un composant `CharacterDetail`, ajouté sous la liste principale, affiche des détails concernant ce personnage (nom, genre, taille, couleur des cheveux et des yeux, ...). + +Parmi les données obtenues sur un personnage, on trouve un champ `films` qui est un tableau d'URL pointant vers les ressources film correspondantes. +Faire en sorte que le composant `CharacterDetail` récupère l'ensemble des films associés au personnage sélectionné et affiche leur titre dans une liste. +Comme pour la liste de personnages, en attendant la réponse du serveur, le composant affiche le texte "Loading...", et en cas d'erreur, il affiche le message d'erreur correspondant. + +S'assurer que la liste de films est bien mise à jour lors de la sélection d'un nouveau personnage. + +V3 +--- + +Ecrire un custom hook `useDataFromUrl`. +Ce dernier prend en paramètre une URL et retourne un objet contenant 3 champs : `loading`, `error` et `data`. + +En interne, cette fonction déclare les éléments de `state` nécessaire, et déclenche si besoin la requête à destination de l'URL reçue. + +Utiliser ce custom hook dans l'ensemble des composants qui font des requêtes. + +Comment faire pour que l'on puisse passer un tableau d'URL à la fonction `useDataFromUrl`, et que le champ `data` obtenu soit un tableau contenant les données obtenue depuis chaque URL ? + +V4 +--- + +Utiliser la bibliothèque [react-query](https://react-query.tanstack.com/) pour gérer les requêtes à l'API (à la place de notre custom hook). +Bien lire la documentation sur les requêtes (https://react-query.tanstack.com/docs/guides/queries) et s'assurer d'avoir compris le fonctionnement des `keys` et le passage de paramètres à la fonction asynchrone de récupération des données. + +> ___Indication___ : pour récupérer un tableau d'identifiants de films à partir d'un tableau d'URL du type `https://swapi.dev/api/films/3` -> `const filmsId = filmsUrl.map(u => u.split('/').filter(Boolean).pop());`. + +Utiliser `react-query-devtools` pour observer le comportement de cette bibliothèque.