Introduction aux événements dans l'application Gestionnaire de dépenses

Salut à toi, futurs développeurs React ! Aujourd'hui, nous allons plonger dans le monde passionnant des événements dans notre application Gestionnaire de dépenses. Ne t'inquiète pas si tu es nouveau dans le monde de la programmation – je vais te guider à chaque étape avec la patience d'une institutrice expliquant pourquoi le ciel est bleu. Alors, prend ta boisson favorite, installe-toi confortablement, et embarquons ensemble dans cette aventure de codage !

Qu'est-ce que les événements dans React ?

Avant de sauter dans le code, comprens ce que sont les événements. Imagine que tu es à une fête (une fête React, bien sûr), et chaque fois que tu tapes sur l'épaule de quelqu'un, ils réagissent. C'est essentiellement ce que sont les événements dans React – ce sont des actions qui déclenchent des réponses dans ton application.

Dans notre application Gestionnaire de dépenses, nous utiliserons des événements pour rendre notre application interactive et réactive aux actions des utilisateurs. Par exemple, lorsque'un utilisateur clique sur un bouton pour ajouter une nouvelle dépense, c'est un événement que nous devons gérer.

Gestion des événements dans l'application Gestionnaire de dépenses

Maintenant, mettons les mains à la pâte et ajoutons de l'interactivité à notre Gestionnaire de dépenses. Nous allons commencer par un exemple simple et progresser vers des interactions plus complexes.

1. Ajout d'un bouton "Ajouter une dépense"

Commençons par ajouter un bouton que les utilisateurs peuvent cliquer pour ajouter une nouvelle dépense. Nous allons créer un nouveau composant appelé AddExpenseButton.

import React from 'react';

const AddExpenseButton = () => {
const handleClick = () => {
console.log('Bouton Ajouter une dépense cliqué !');
};

return (
<button onClick={handleClick}>Ajouter une dépense</button>
);
};

export default AddExpenseButton;

Reprenons cela :

• Nous importons React (toujours nécessaire pour JSX).
• Nous définissons un composant fonctionnel appelé AddExpenseButton.
• À l'intérieur du composant, nous définissons une fonction appelée handleClick. Pour l'instant, elle ne fait que logger un message dans la console.
• Dans l'instruction return, nous rendons un bouton avec un attribut onClick. Cet attribut est celui par lequel nous attachons notre gestionnaire d'événements au bouton.

Maintenant, chaque fois que le bouton est cliqué, 'Bouton Ajouter une dépense cliqué !' sera logged dans la console. C'est comme enseigner à ton application à parler – chaque clic est un mot qu'elle apprend !

2. Création d'un formulaire de dépense

Ensuite, créons un formulaire où les utilisateurs peuvent saisir les détails de leur dépense. Nous appellerons ce composant ExpenseForm.

import React, { useState } from 'react';

const ExpenseForm = () => {
const [title, setTitle] = useState('');
const [amount, setAmount] = useState('');
const [date, setDate] = useState('');

const handleTitleChange = (event) => {
setTitle(event.target.value);
};

const handleAmountChange = (event) => {
setAmount(event.target.value);
};

const handleDateChange = (event) => {
setDate(event.target.value);
};

const handleSubmit = (event) => {
event.preventDefault();
console.log('Formulaire soumis:', { title, amount, date });
// Ici, tu enverrais habituellement ces données à un composant parent ou à une API
};

return (
<form onSubmit={handleSubmit}>
<input type="text" value={title} onChange={handleTitleChange} placeholder="Titre de la dépense" />
<input type="number" value={amount} onChange={handleAmountChange} placeholder="Montant" />
<input type="date" value={date} onChange={handleDateChange} />
<button type="submit">Ajouter une dépense</button>
</form>
);
};

export default ExpenseForm;

Whaou, c'est beaucoup à ingérer ! Reprenons étape par étape :

1. Nous importons useState de React pour gérer l'état de notre formulaire.
2. Nous créons des variables d'état pour title, amount, et date en utilisant le hook useState.
3. Nous définissons des fonctions de gestionnaires pour chaque champ d'entrée. Ces fonctions mettent à jour l'état lorsque l'utilisateur tape.
4. Nous créons une fonction handleSubmit qui empêche le comportement par défaut de soumission du formulaire et loggue les données du formulaire.
5. Dans le JSX, nous créons un formulaire avec des champs d'entrée pour le titre, le montant et la date. Chaque champ a une propriété value (contrôlée par l'état) et une propriété onChange (pointant vers sa fonction de gestionnaire).
6. Le formulaire a une propriété onSubmit qui pointe vers notre fonction handleSubmit.

Ce formulaire est comme un secrétaire bien entraîné – il écoute attentivement tout ce que vous lui dites et se souvient de tout !

3. Élever l'état vers le haut

Maintenant, disons que nous voulons ajouter la nouvelle dépense à une liste de dépenses. Nous devons élever notre état vers un composant parent. Créons un composant ExpenseManager :

import React, { useState } from 'react';
import ExpenseForm from './ExpenseForm';
import ExpenseList from './ExpenseList';

const ExpenseManager = () => {
const [expenses, setExpenses] = useState([]);

const addExpense = (expense) => {
setExpenses((prevExpenses) => [...prevExpenses, expense]);
};

return (
<div>
<ExpenseForm onAddExpense={addExpense} />
<ExpenseList expenses={expenses} />
</div>
);
};

export default ExpenseManager;

Et modifions notre ExpenseForm pour utiliser la propriété onAddExpense :

import React, { useState } from 'react';

const ExpenseForm = ({ onAddExpense }) => {
// ... définitions de l'état et des gestionnaires précédents ...

const handleSubmit = (event) => {
event.preventDefault();
onAddExpense({ title, amount, date });
setTitle('');
setAmount('');
setDate('');
};

// ... reste du composant ...
};

export default ExpenseForm;

Maintenant, lorsque le formulaire est soumis, il appelle la fonction onAddExpense transmise par le parent, ajoutant la nouvelle dépense à la liste. C'est comme une famille qui travaille ensemble – l'enfant (ExpenseForm) informe le parent (ExpenseManager) de la nouvelle dépense, et le parent la souvient pour tout le monde !

4. Ajout de la fonctionnalité de suppression

Enfin, ajoutons la capacité de supprimer des dépenses. Nous allons modifier notre composant ExpenseList :

import React from 'react';

const ExpenseList = ({ expenses, onDeleteExpense }) => {
return (
<ul>
{expenses.map((expense, index) => (
<li key={index}>
{expense.title} - ${expense.amount} ({expense.date})
<button onClick={() => onDeleteExpense(index)}>Supprimer</button>
</li>
))}
</ul>
);
};

export default ExpenseList;

Et mettons à jour notre ExpenseManager :

import React, { useState } from 'react';
import ExpenseForm from './ExpenseForm';
import ExpenseList from './ExpenseList';

const ExpenseManager = () => {
const [expenses, setExpenses] = useState([]);

const addExpense = (expense) => {
setExpenses((prevExpenses) => [...prevExpenses, expense]);
};

const deleteExpense = (index) => {
setExpenses((prevExpenses) => prevExpenses.filter((_, i) => i !== index));
};

return (
<div>
<ExpenseForm onAddExpense={addExpense} />
<ExpenseList expenses={expenses} onDeleteExpense={deleteExpense} />
</div>
);
};

export default ExpenseManager;

Maintenant, nous avons un Gestionnaire de dépenses fonctionnel avec des capacités d'ajout et de suppression !

Conclusion

Félicitations ! Vous venez de construire une application Gestionnaire de dépenses réactive. Vous avez appris à gérer les événements, à gérer l'état et à transmettre des données entre les composants. Souvenez-vous, apprendre React est comme apprendre à faire du vélo – cela peut sembler instable au début, mais avec de la pratique, vous serez bientôt en train de rouler sans problème !

Voici un tableau récapitulatif des gestionnaires d'événements que nous avons utilisés :

Gestionnaire d'événements	Composant	Objectif
handleClick	AddExpenseButton	Logs un message lorsque le bouton est cliqué
handleTitleChange	ExpenseForm	Met à jour l'état du titre lorsque l'entrée change
handleAmountChange	ExpenseForm	Met à jour l'état du montant lorsque l'entrée change
handleDateChange	ExpenseForm	Met à jour l'état de la date lorsque l'entrée change
handleSubmit	ExpenseForm	Empêche la soumission par défaut du formulaire et ajoute une nouvelle dépense
onAddExpense	ExpenseManager	Ajoute une nouvelle dépense à la liste des dépenses
onDeleteExpense	ExpenseManager	Supprime une dépense de la liste des dépenses

Continuez à pratiquer, continuez à coder, et surtout, continuez à vous amuser ! React est un voyage, et vous êtes bien sur le chemin pour devenir un maître de React. Jusqu'à la prochaine fois, bon codage !

Credits: Image by storyset