3.3 Présentation du projet

Bonjour à tous et à toutes ! Dans cette vidéo, je vous présente l'exemple du projet que nous allons construire ensemble tout au long de cette section du cours React. Le but est de réaliser une petite application web concrète qui nous servira de fil rouge pour découvrir les principales fonctionnalités de la bibliothèque : composants, props, états, événements, listes dynamiques, et bien plus encore.

Un outil de suivi des dépenses

Le projet est un outil de suivi des dépenses. Concrètement, l'application affiche une liste de mes achats regroupés par année. Par exemple, en consultant la barre de l'année 2021, je peux voir qu'en mars j'ai acheté une nouvelle télévision, et qu'en juin j'ai payé l'assurance de ma voiture. Chaque dépense apparaît sous forme d'un composant individuel — c'est exactement le type d'éléments que nous allons créer étape par étape pour bâtir cette interface.

Mais l'application ne se contente pas d'afficher des données existantes : elle permet aussi d'ajouter de nouvelles dépenses. Par exemple, je peux saisir que j'ai dépensé 1000 € pour un PC, en indiquant la date d'achat — disons le 10 août 2021. Une fois la dépense ajoutée, elle apparaît automatiquement dans la liste de l'année correspondante, ici août 2021, avec son titre et son montant.

Nous allons construire tout cela petit à petit, en abordant chaque concept React au fur et à mesure que le besoin se présente. Je vais vous expliquer en détail comment chaque morceau du projet fonctionne, depuis la structure des composants jusqu'à la gestion de l'état applicatif. Je vous invite à passer au prochain cours pour commencer notre projet et créer notre premier composant.