CATALOGUE
Code & Data
Formation
ReactJS
Apprendre ReactJS - Les fondamentaux
Transformation d'un Composant React en Composant Stateful
DescriptionProgrammeAvis
Cette leçon fait partie de la formation
49,90€
Paiement unique • Accès à vie
Acheter cette formation
Formation incluse dans l'abonnement Elephorm
Je m'abonne à Elephorm
Ajout d'une Fonctionnalité de Suppression à un Composant
Objectifs
L'objectif de cette vidéo est de vous montrer comment :
- Transformer un composant stateless en composant stateful.
- Utiliser des événements de survol et de clic pour modifier l'état de l'application.
- Mettre à jour l'interface utilisateur en fonction de l'état des composants.
- Supprimer dynamiquement des éléments d'une liste renderisée.
Résumé
Dans cette leçon, nous apprenons à transformer un composant stateless en un composant stateful afin de gérer des événements de hover et de clic pour supprimer des tweets dans une application React.
Description
Cette leçon vous guide étape par étape pour transformer un composant React stateless en un composant stateful afin d'ajouter la fonctionnalité de suppression de tweets. Nous y abordons les points suivants :
- L'importation de la classe Component.
- Modification de la structure du composant pour inclure des props dynamiques.
- Inclusion de la bibliothèque Font Awesome pour les icônes.
- Gestion des événements de souris pour changer l'état de l'application.
- Mise à jour de l'état de l'application pour refléter les changements d'interface utilisateur.
- Suppression de tweets via l'accès à l'index du tableau des tweets.
A la fin de cette leçon, vous saurez manipuler l'état de vos composants React pour ajouter des fonctionnalités interactives enrichies.
Questions fréquentes
Questions réponses
Pourquoi transformer un composant stateless en stateful ?
Transformer un composant stateless en stateful permet de gérer des états internes et de répondre aux interactions utilisateur de manière dynamique.
Quelles sont les étapes pour ajouter une icône avec Font Awesome dans un projet React ?
Les étapes incluent l'installation de la dépendance, l'importation du CSS de Font Awesome dans le fichier index.html, puis l'ajout de l'icône dans le composant en utilisant les props et le state.
Comment supprimer un tweet en utilisant l'index de l'élément dans un tableau ?
En passant l'index du tweet à supprimer dans une méthode de suppression définie dans le parent, puis en filtrant le tableau des tweets pour enlever l'élément correspondant.
Programme détaillé
Module 1 - Installation de l'environnement de travail
Module 2 - Rappels sur Ecma Script v6
Module 3 - Présentation de React
Module 4 - Architecture d'un projet React
Package.json
03:58
Dossier public
00:52
Module 5 - Mon premier composant React (Tweet)
Module 6 - Mon premier container React (Home)
Module 7 - Composant stateful
Structure du code
04:53
Life cycle
03:40
Module 8 - Two way data binding
Module 9 - React-router
Module 10 - Outils et publication
React Devtools
03:33
Publier son application
03:39
1 commentaire
5,0
1 vote
5
4
3
2
1
Il y a 1 an
b