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.
En résumé
Cette leçon présente un projet de gestionnaire de dépenses personnelles qui sera construit progressivement. Le projet permet de visualiser les dépenses organisées par mois et année, ainsi que d'ajouter de nouvelles dépenses en spécifiant le type, le montant et la date. L'instructeur montre un exemple concret avec les dépenses de 2021 et invite les apprenants à débuter la construction dans la leçon suivante.
Points clés
- Le projet consiste à créer un gestionnaire/tracker de dépenses personnelles
- Visualisation des dépenses organisées par mois et année (ex : mars 2021, août 2021)
- Fonctionnalité d'ajout de dépenses avec date, description et montant
- Construction progressive du projet avec explications détaillées des mécanismes
- Basé sur un exemple pratique montrant achat de télévision, assurance auto, et ordinateur
Questions fréquentes
Quel est l'objectif du projet présenté dans cette leçon ?
Le projet consiste à créer un gestionnaire de dépenses permettant de visualiser les dépenses par mois et année, et d'ajouter de nouvelles entrées avec date, description et montant.
Comment les dépenses sont-elles organisées dans ce projet ?
Les dépenses sont visualisées par mois et année. Par exemple, on peut consulter toutes les dépenses du mois de mars 2021, juin 2021 ou août 2021, avec le détail de chaque transaction.
Quelles informations faut-il fournir pour ajouter une dépense ?
Pour ajouter une dépense, il faut spécifier la description de la dépense (par exemple « PC »), le montant en euros, et la date d'achat (jour, mois, année).