Le but de l'exercice est de créer une application "Todo List" en React.
- Télécharger le code source et ouvrir une invite de commande dans le dossier.
- Installer les dépendances avec la commande
npm install
- Démarrer le serveur de développement avec la commande
npm start
- Ouvrir la page
http://localhost:3000/doc
, elle contient la documentation de l'API qui va permettre de stocker les tâches faites et à faire.- Un serveur de susbstitution rend cette API fonctionnelle pour le développement uniquement.
- Cette page est interactive, vous pouvez essayer chaque route de l'API en cliquant sur le bouton, le résultat vous sera retourné au format JSON.
- Ouvrir le fichier
server/db.json
, vous pouvez y observer des données provisoires qui vont servir au test de notre application.- Les données vont être modifiées lors des tests que vous allez effectuer.
- Vous pouvez vous même ajouter/supprimer ou modifier des données dans ce fichier durant le développement.
Afin de vous familiariser avec l'API mise en place, mais également avec la méthode fetch()
du navigateur, vous allez coder des fonctions permettant de lire et modifier les données.
- Ouvrir le fichier
src/api.js
, il contient des fonctions à remplir. Chaque fonction a un bloc de documentation qui décrit succintement ce qu'elle est sensée accomplir, les paramètres qu'elle reçoit et la valeur qu'elle doit retourner. - Du code permettant de vérifier l'exécution de ces fonctions a été écrit. Pour vérifier le résultat de vos fonctions, décommentez le.
- Ouvrir la page
https://localhost:3000/
dans votre navigateur, et ouvrir la console pour voir les messages s'afficher (ctrl + maj + k
sous Firefox, sinon Menu > Outils supplémentaires > Outils de développement > Console). - Lancer la commande
npm test
dans un terminal. - Ouvrir le fichier
index.html
du dossiercoverage
dans un navigateur web. Des tests vont appraître à l'écran, essayez de résoudre chacun d'entre eux dans l'ordre où ils s'affichent.
Il s'agit de "connecter" l'API avec une interface d'application en React.
- Si vous avez une application de todo list déjà créée en React, vous pouvez copier/coller son code dans le dossier
src
(attention à ne pas supprimer votre fichierapi.js
, ni le dossiertest
). - Vous pouvez réutiliser le code créer dans
api.js
avec quelques modifications: au lieu de modifier le tableautodos
, il faudra se servir des Hooks que vous aurez mis en place.
- Récupérer des données du serveur, API web côté client, JavaScript, Apprendre le développement web, Mozilla Developers Network, https://developer.mozilla.org/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data
- Gérer les opérations asynchrones avec élégance grâce aux promesses, JavaScript asynchrone, JavaScript, Apprendre le développement web, Mozilla Developers, https://developer.mozilla.org/fr/docs/Learn/JavaScript/Asynchronous/Promises
- Démarrer avec React, Comprendre les frameworks Javascript côté client, Outils et tests, Apprendre le développement web, Mozilla Developers Network, https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started (EN-US)
- Apperçu des Hooks, Docs, reactjs.org, https://fr.reactjs.org/docs/hooks-overview.html