Améliorer la Structure et la Lisibilité du Code
Objectifs
Objectifs de cette vidéo :
- Apprendre à créer des composants réutilisables.
- Réduire le code dupliqué.
- Améliorer la lisibilité et la maintenabilité du projet.
Résumé
Apprenez à refactoriser des composants React pour réduire le code dupliqué et améliorer leur réutilisabilité. Cette vidéo vous guidera étape par étape.
Description
Dans cette leçon, nous procédons à la refactorisation de nos composants React afin de rendre notre code plus maintenable et réutilisable. Nous commençons par créer un composant FilterButton pour éviter la duplication du code des boutons. Ce nouveau composant prend en charge les propriétés OnClick et Filter, permettant ainsi de le réutiliser avec différentes valeurs.
Ensuite, nous créons deux autres composants : ToDo et ToDoList. Le composant ToDo est responsable de l'affichage des tâches individuelles avec leurs propriétés spécifiques (Id, Text, Completed, OnClick). La ToDoList, quant à elle, gère la liste des tâches et les renvoie sous forme de composants ToDo individuels. Nous assurons également une bonne gestion des clés avec l'utilisation de l'index lors du rendu des éléments de liste.
En refactorisant de cette manière, nous réduisons considérablement la duplication de code et améliorons la clarté et la maintenabilité du projet. Enfin, nous vérifions le bon fonctionnement des composants refactorisés en effectuant des tests après l'actualisation de notre page.
Questions - réponses
Programme détaillé
Module 1 - Pré-requis
Module 2 - Utiliser Redux
Module 3 - Créer une TODO List - Configurer les reducers
Module 4 - Créer une TODO List - Utiliser Redux avec React
Module 5 - Utiliser l'API Context
Module 6 - Améliorer son projet
Facebook
Twitter
Linkedin
Email
