Gestion de l'état avec les Hooks de React

Salut à toi, futurs développeurs React ! Aujourd'hui, nous allons entreprendre un voyage passionnant à la découverte de la gestion de l'état en utilisant les Hooks de React. En tant que votre enseignant de science informatique bien-aimé, je suis ravi de vous guider à travers cette aventure. Ne vous inquiétez pas si vous êtes nouveau dans le développement informatique - nous avancerons pas à pas, et avant que vous ne vous en rendiez compte, vous gérerez l'état comme un pro !

Qu'est-ce que l'état dans React ?

Avant de plonger dans les détails, comprenons ce que signifie "état" dans React. Imaginez que vous construisez un château de sable. La forme et la taille actuelles de votre château de sable représentent son "état". Lorsque vous ajoutez ou retirez du sable, l'état de votre château de sable change. De même, dans React, l'état représente la condition actuelle d'un composant - ses données, son apparence ou son comportement à un moment donné.

Introduction aux Hooks de React

Maintenant, parlons des Hooks de React. Pensez aux hooks comme des outils magiques qui confèrent des superpuissances à vos composants. Ils permettent aux composants fonctionnels d'avoir un état et d'autres fonctionnalités de React sans écrire de classe. Le hook sur lequel nous nous concentrerons aujourd'hui est useState.

Créer un Composant avec État

Commençons par créer un composant simple avec état. Nous allons construire un compteur qui augmente lorsque vous cliquez sur un bouton.

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Vous avez cliqué {count} fois</p>
<button onClick={() => setCount(count + 1)}>
Cliquez-moi
</button>
</div>
);
}

Décomposons cela :

1. Nous importons useState de React.
2. À l'intérieur de notre fonction Counter, nous appelons useState(0). Cela crée une variable d'état count initialisée à 0, et une fonction setCount pour la mettre à jour.
3. Nous affichons le count actuel dans un paragraphe.
4. Lorsque le bouton est cliqué, nous appelons setCount(count + 1) pour incrémenter le compteur.

Chaque fois que vous cliquez sur le bouton, React re-rendre le composant avec le compteur mis à jour. C'est magique, n'est-ce pas ?

Introduction de l'État dans l'Application Gestionnaire de Dépenses

Maintenant que nous avons les pieds dans l'eau, plongons plus profondément avec un exemple plus pratique - une application gestionnaire de dépenses. Nous allons créer un composant qui permet aux utilisateurs d'ajouter des dépenses.

import React, { useState } from 'react';

function ExpenseManager() {
const [expenses, setExpenses] = useState([]);
const [newExpense, setNewExpense] = useState('');
const [newAmount, setNewAmount] = useState('');

const addExpense = () => {
if (newExpense && newAmount) {
setExpenses([...expenses, { name: newExpense, amount: parseFloat(newAmount) }]);
setNewExpense('');
setNewAmount('');
}
};

return (
<div>
<h2>Gestionnaire de Dépenses</h2>
<input
type="text"
value={newExpense}
onChange={(e) => setNewExpense(e.target.value)}
placeholder="Nom de la dépense"
/>
<input
type="number"
value={newAmount}
onChange={(e) => setNewAmount(e.target.value)}
placeholder="Montant"
/>
<button onClick={addExpense}>Ajouter une dépense</button>
<ul>
{expenses.map((expense, index) => (
<li key={index}>{expense.name}: ${expense.amount}</li>
))}
</ul>
</div>
);
}

Whaou, c'est beaucoup à ingurgiter ! Décomposons cela :

1. Nous avons trois variables d'état :

• expenses : Un tableau pour stocker toutes les dépenses
• newExpense : Une chaîne pour le nom d'une nouvelle dépense
• newAmount : Une chaîne pour le montant d'une nouvelle dépense

2. La fonction addExpense :

• Vérifie si newExpense et newAmount ne sont pas vides
• Ajoute un nouvel objet dépense au tableau expenses
• Efface les champs d'entrée

3. Dans le JSX :

• Nous avons deux champs d'entrée pour le nom et le montant de la dépense
• Un bouton pour ajouter la dépense
• Une liste qui affiche toutes les dépenses

souvenez-vous quand j'ai mentionné les châteaux de sable plus tôt ? C'est comme avoir un bac à sable où vous pouvez ajouter de nouveaux châteaux (dépenses) chaque fois que vous le souhaitez. Chaque château a un nom et une taille (montant), et vous pouvez voir tous vos châteaux énumérés ci-dessous.

Tableau des Méthodes

Voici un tableau pratique des méthodes que nous avons utilisées :

Conclusion

Félicitations ! Vous avez fait vos premiers pas dans le monde de la gestion de l'état avec les Hooks de React. Nous avons appris comment créer des composants avec état, mettre à jour l'état, et même construire une petite application gestionnaire de dépenses.

Souvenez-vous, apprendre React est comme construire des châteaux de sable - commencez petit, expérimentez, et n'ayez pas peur de les renverser et de recommencer. Avec la pratique, vous serez bientôt en train de construire des applications complexes et magnifiques en un rien de temps.

Continuez à coder, continuez à apprendre, et surtout, amusez-vous ! Jusqu'à la prochaine fois, c'est votre enseignant de science informatique bien-aimé qui signe. Bon codage !

Credits: Image by storyset