CATALOGUE Code & Data Formation ReactJS Apprendre ReactJS 2018 - Les fondamentaux Ajoutez des fonctionnalités de Favoris avec Feather Icon dans React

Ajoutez des fonctionnalités de Favoris avec Feather Icon dans React

Modifier dynamiquement les données
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre ReactJS 2018 - Les fondamentaux
Revoir le teaser Je m'abonne
3,0
Transcription
Cette leçon fait partie de la formation
49,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
3,0
Cette leçon fait partie de la formation
49,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Intégration de Feather Icon et gestion des états dans les composants React

Objectifs

Les objectifs de cette vidéo sont de:
- Apprendre à intégrer la bibliothèque Feather Icon dans une application React.
- Transformer un composant fonctionnel en composant stateful.
- Gérer l'état des composants pour ajouter des fonctionnalités d'interactivité.

Résumé

Découvrez comment ajouter des icônes Feather à vos composants React pour permettre aux utilisateurs de marquer leurs films favoris.

Description

Dans cette leçon, nous allons enrichir notre application React en ajoutant une fonctionnalité de favoris. Nous apprendrons comment utiliser la bibliothèque Feather Icon pour intégrer des icônes élégantes à notre interface utilisateur. Nous transformerons notre composant Movie en un composant stateful pour gérer l'état des films favoris. En utilisant les icônes plusCircle et checkCircle, nous permettrons aux utilisateurs de marquer et de démarquer les films de leur liste de favoris par simple clic. Cette leçon mettra l'accent sur l'importation des icônes, la transformation du composant, la gestion des états avec setState, et l'implémentation d'un toggle pour la fonctionnalité de favoris. Vous apprendrez aussi l'importance de réutiliser les bibliothèques existantes pour gagner du temps et améliorer l'efficacité du développement.

Voir plus

Questions fréquentes

Pourquoi utiliser Feather Icon dans une application React ?
Feather Icon permet d'ajouter des icônes élégantes et légères à votre application, ce qui améliore l'interface utilisateur et l'expérience utilisateur sans alourdir la performance de l'application.
Comment transformer un composant React fonctionnel en un composant stateful ?
Pour transformer un composant fonctionnel en composant stateful, vous devez créer une classe qui étend React.Component, gérer les états dans le constructeur et utiliser this.setState pour mettre à jour l'état.
Qu'est-ce qu'un toggle en programmation React ?
Un toggle en programmation React est une fonction qui inverse l'état d'un booléen. Par exemple, si une variable booléenne est initialement false, le toggle la changera en true et vice versa.
1 commentaire
3,0
1 vote
5
4
3
2
1
gregory_jarrige
Il y a 4 ans
Cette formation est géniale, mais je ne peux pas lui mettre la note maximale en l'état, car il y a deux problèmes qu'il faudrait signaler à l'auteur :
- la vidéo du chapitre 4.1 ne correspond pas à l'intitulé
- la vidéo du chapitre 6.3 ne correspond pas non plus à l'intitulé
Les deux vidéos erronées correspondent manifestement à un autre cours décrivant la création d'une TODO List.
charlene.bleuse_1
Il y a 4 ans
Bonjour Monsieur Jarrige,

Je vous remercie de votre retour, je fais part de vos remarques au service technique.
Bien à vous, Charlène