Ce projet a été conçu pour mettre en pratique les patterns fondamentaux de React. L'objectif était de créer une application modulaire respectant le principe de responsabilité unique.
L'application respecte strictement le flux de données descendant de React :
- Parents vers Enfants : Les données (
tickets) descendent via les Props. - Enfants vers Parents : Les événements remontent via des fonctions de callback (
onAddTicket,onDeleteTicket). - Pourquoi ? Cela rend l'application prédictible et facilite le débogage.
Plutôt que de gérer les tickets dans TicketList ou TicketForm, l'état a été remonté dans le composant parent App.jsx.
- Code :
const [tickets, setTickets] = useState([])est situé dansApp. - Intérêt : Cela permet de partager la même "Source Unique de Vérité" entre deux composants frères (le formulaire qui ajoute et la liste qui affiche).
Aucune modification directe du tableau (ex: push ou splice) n'est effectuée. L'application utilise des méthodes créant de nouvelles références mémoires pour déclencher les rendus React efficacement.
- Ajout : Utilisation du Spread Operator
[...tickets, newTicket]. - Suppression : Utilisation de
.filter()pour recréer un tableau sans l'élément supprimé.
Le formulaire TicketForm n'utilise pas le DOM direct. Ses champs sont entièrement pilotés par React :
- La valeur affichée (
value={title}) vient du State. - Chaque frappe déclenche une mise à jour (
onChange). - Avantage : Validation et manipulation des données en temps réel possibles avant la soumission.
Utilisation de la méthode .map() pour transformer le tableau de données en éléments JSX.
- Gestion stricte de la propriété
key(key={t.id}) pour optimiser l'algorithme de réconciliation de React (Virtual DOM) lors des ajouts/suppressions.
- App.jsx : Conteneur "intelligent" (Smart Component). Il détient la logique métier et le State.
- TicketList.jsx & Navbar.jsx : Composants "bĂŞtes" (Dumb Components). Ils ne font qu'afficher ce qu'on leur donne via les Props.
- TicketForm.jsx : Composant avec état local (pour gérer la saisie temporaire de l'utilisateur).