Les bases de ReactJS #4/9 : Les hooks
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Les bases de ReactJS #4/9 : Les hooks

Carl Brison
25,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Précédemment, nous avons vu ensemble les composants issus d'une classe qui nous permettait de pouvoir mettre en place un ou plusieurs états. Et nous avions d'ailleurs vu, que seuls les composants issus d'une classe sont en mesure de gérer les états.
C'est sans compter sur l'évolution de ReactJS !
En effet, il est désormais possible de pouvoir mettre en place et de gérer des états pour les composants fonctionnels.
Pour cela, nous allons découvrir et utiliser les hooks. Nous allons voir ensemble: 

  • Le hook d'état, le useState.
  • Les cycles de vie, le useEffect

Nous ferons un exercice d'application qui reprendra les principes de l'exercice précédent afin de pouvoir comparer la mise en place d'un état au travers un composant issu de classe et un composant fonctionnel.

Épisodes précédents :

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Les états
Chapitre 2
Les cycles de vie
Chapitre 3
Application
Chapitre 4
Conclusion

Plan détaillé du cours

Chapitre 1 : Les états
39m02s
 
Leçon 1Retour sur les états
Leçon 2Le hook d'état
Leçon 3Plusieurs états
Leçon 4UseState, récapitulatif
Chapitre 2 : Les cycles de vie
15m09s
 
Leçon 1Introduction
Leçon 2Comment déclarer useEffect
Leçon 3Application de useEffect
Leçon 4Vérifier le cycle de vie
Chapitre 3 : Application
23m20s
 
Leçon 1Créer le fichier index.js
Leçon 2Déclarer un useState
Leçon 3Déclarer un useEffect
Leçon 4Mettre en forme le projet
Leçon 5Petite conclusion
Chapitre 4 : Conclusion
02m18s
 
Leçon 1Pour la prochaine fois

Avis des apprenants

Détail des avis
1
Apprenant
3
Commentaires
5/5
Note moyenne
5/5
3
4/5
0
3/5
0
2/5
0
1/5
0
Bernard Chabloz
Bernard Chabloz
Publié le 11/12/2023
Voilà qui me paraissait suffisamment clair pour que je puisse anticiper quelques gestes à partir des composants "classe". Un tout petit problème: j'ai dû identifier la div pour éviter que le css fasse aussi apparaître une autre div (qu'on voit dans l'inspecteur:
...
)
Carl Brison
Carl Brison
SI vous voulez cibler une div en particulier et que vous en avez d'autres, vous avez 2 possibilités, soit l'identifier via un id, soit la cibler via un sélecteur de type nth-child. Merci beaucoup pour votre commentaire. Pour info, après la formation React, je vous proposerais une formation sur Tailwind CSS, qui est beaucoup utiliser pour formater des composants fonctionnels.
Jean-Claude Warg-Briers
Jean-Claude Warg-Briers
Publié le 10/12/2023
Un tuto qui explique très bien des éléments pas forcément simples . Je continue à prendre du plaisir en suivant vos tutos et je suis confiant pour la suite de cette formation . Encore merci pour cet excellent travail . Didier
Carl Brison
Carl Brison
Merci beaucoup Didier, pour votre commentaire extrêmement gentil ;-)
Alain Tardif
Alain Tardif
Publié le 09/12/2023
Merci Carl, pour ce cours sur les Hooks. Bien que le sujet ne soit pas des plus simples, vos explications étaient claires et m'ont aidé à mieux les comprendre. J'ai particulièrement apprécié la partie pratique du cours qui a mis en lumière l'utilité et la puissance des Hooks, bien sûr, il est possible de faire plein d'autres choses, mais ça, ce sera l'objet d'un autre cours (je vous cite). Je suis conscient que maîtriser pleinement les Hooks demandera de la pratique de ma part, mais grâce à votre cours, je me sens mieux équipé pour explorer davantage et intégrer cet outil dans mes futurs projets. J'ai hâte de voir la suite.. Validé 100 % ReactJS #4/9
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire vraiment très gentil, Alain. Croyez-moi, les hooks (surtout useState) vont devenir de plus en plus familliés ! A suivre, donc ;-)

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

React

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1337 tutos gratuits

Notre politique de protection des données