Dans ce troisième volet sur l'apprentissage du framework ReactJS, nous allons voir ensemble les états ainsi que les cycles de vie des composants..
- Nous allons voir comment nous pouvons définir des états par défaut et comment les modifier par la suite.
- Nous étudierons l'ordre de la modification de ces états effectués par le DOM de React.
- Pour cela, nous découvrirons les méthodes de montage et de démontage, componentDidMount et componentWillUnmount.
- Nous terminerons ce troisième volet par la mise en place d'un exercice complet afin de mettre en pratique ce que nous aurons appris dans ce tutoriel. Vous verrez comment afficher l'heure en temps réel sur une page.
Un petit QCM viendra conclure cette formation pour valider vos nouvelles connaissances sur les composants dans React.
Épisodes précédents :
Table des matières de cette formation React (durée : 54m29s)
-
Théorie
- Théorie sur les états d'un composant 00:06:47
- Le cycle de vie 00:04:29
- Changer la valeur d'un état 00:02:35
- Etude du cycle de vie d'un composant monté 00:12:05
- Etude du cycle de vie d'un composant démonté 00:04:48
-
Application: Afficher l'heure en temps réel
- Ecrire les fichiers index.js et index.css 00:08:18
- Ecrire le fichier Heure.js 00:05:41
- Incrémenter l'heure toutes les secondes 00:07:24
-
Pour la prochaine fois
- Pour la prochaine fois 00:02:22
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Merci Carl pour ses explications sur componentDidMount() et componentWillUnmount(). Le TP pour terminer la théorie, de l'heure en direct, a été particulièrement pratique sur l'utilisation de ces méthodes dans React. Pas forcément simple à comprendre au départ, que componentDidMount() est utilisée pour exécuter du code une fois que le composant est complètement chargé et intégré dans le DOM, tandis que componentWillUnmount() sert à exécuter du nettoyage ou des actions juste avant que le composant soit retiré du DOM. Vous avez su expliquer tout cela simplement, bravo à vous. Validé 100%
-
Très bien expliqué , je commence à comprendre la portée de React grâce à cet exercice. J'attends la suite avec impatience. Didier
-
Avec quelle version de logiciel ce tuto est-il compatible ?React
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés