Créer une application React JS (Todo List)

Dans ce TP, vous allez créer une Single Page Application (SPA) avec React dans le but de découvrir différentes notions telles que les composants, les states et props, la gestion des modules et du bundling, les appels HTTP et les promesses, le routage et bien sur les tests unitaires qui assureront la qualité et la non régression de vos codes.

Mettre en place le projet en local

Clonez ce dépôt où bon vous semble :

git clone https://github.com/liorchamla/amu-tp-react-todo.git

Ouvrez le dossier dans votre éditeur de code favoris !

Travailler directement sur le navigateur

Plutôt que de cloner le dépôt, vous pouvez aussi travailler directement en ligne via Gitpod.

Pour cela il vous faudra forker le dépôt sur votre propre compte (bouton Fork en haut à droite de GitHub). Une fois sur la page du fork (la copie de ce dépôt sur votre propre compte), vous pourrez simplement ajouter gitpod.io/# juste devant l'URL du dépôt.

Par exemple, le lien suivant ouvrira ce dépôt dans Gitpod : https://gitpod.io/#https://github.com/liorchamla/amu-tp-react-todo

Attention : le travail ne sera pas sauvegardé d'une session de travail à l'autre, vous devrez systématiquement commit et push vos modifications si vous espérez les retrouver ensuite !

Attention au départ !

Une fois que le projet est mis en place, vous pouvez tout simplement suivre le TP étape par étape :

• Installation des outils de développement
  • Initialiser la gestion de dépendances dans le projet
  • Installer le module bundler Webpack
  • Lancer l'application dans le navigateur
  • Vérification de l'outillage et des liens
  • L'avantage du watch avec Wepback
  • Ce que vous avez appris
• Premier composant React
  • But de l'exercice
  • Dépendances à installer
  • Vérifions le fonctionnement avec un premier composant React
  • A la découverte du JSX
  • Babel, l'acteur obligé
  • Ce que vous avez appris
• Afficher une liste dynamique
  • But de l'exercice
  • Modéliser une liste de tâches dans le JS
  • Impossibilité d'agir sur les checkbox
  • Dynamisme des composants : la notion d'état (state)
  • Flux de données dans un composant
  • Dynamisons la liste des tâches
  • Refactoring avant de continuer
  • Ce que vous avez appris
• Ajout d'une nouvelle tâche
  • But de l'exercice
  • Afficher le formulaire
  • Suivre la valeur de l'input à tout moment grâce à un état
  • Gestion de la soumission et ajout de la tâche
  • Ce que vous avez appris
• Remontée d'état : communication entre composants
  • But de l'exercice
  • Extraction du code du formulaire vers un composant TaskForm
  • Le problème du partage d'état
  • (Re)Découverte des props
  • La limite des props
  • La solution : lifting state up
  • Ce que vous avez appris
• Appels HTTP et API REST
  • But de l'exercice :
  • Créer un projet sur Supabase :
  • Comprendre comment fonctionne l'API de Supabase
  • Insérer une nouvelle tâche (Requêtes HTTP et Promesses)
    • Système de Promesses
    • Enchaînement de comportements
    • La fonction fetch()
  • Afficher la liste lors du chargement de la page
  • Passer les éléments à "fait" ou "pas fait"
  • Ce que vous avez appris
• Refactoring des appels HTTP et système de modules
  • But de l'exercice
  • Créer un fichier http.js qui contiendra les appels HTTP
  • Ce que vous avez appris
• Routing et affichage dynamique
  • But de l'exercice
  • Installation des dépendances (react-router-dom)
  • Un composant pour afficher le détail d'une tâche
  • Mise en place du routeur
  • Récupérer un paramètre dans l'URL
  • Récupérer la tâche dans l'API et l'afficher
  • Le problème du rechargement de page
  • Ce que vous avez appris
• Tester ses composants React
  • But de l'exercice
  • Installation de Jest
  • Premier test avec Jest
  • Installation de React Testing Library
  • Tester le composant TodoList
  • Tester le composant TaskForm
  • Enfin, on teste l'intégration entre TodoList et TaskForm !