Les React Hooks par la pratique
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Les React Hooks par la pratique

Codeconcept
38,99€
3 paiements de 12,67€ avec Klarna. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Les hooks constituent une évolution MAJEURE de React.
Ils permettent enfin d'utiliser des functional components même lorsque vous avez besoin de disposer d'un state ou lorsque vous souhaitez exécuter du code à des moments très spécifiques (après le premier render, lorsque qu'une variable est mise à jour etc...). Autrement dit, lorsque vous avez besoin de lifecycle hooks. Le cas le plus typique étant le besoin d'effectuer une requête AJAX après le premier render.

Jusqu'à la version 16.8 de React, il vous fallait obligatoirement créer des classes plutôt de que des fonctions. Désormais, grâce aux hooks, vous pourrez créer des components moins verbeux - vos chers functional components - y compris dans les situations pré-citées.

Si l'on ajoute à cela la possibilité de créer des custom hooks, vos applications pourront devenir plus composables afin que des fonctionnalités requises par plusieurs components puissent être aisément partagées.

Sans doute avez-vous entendu dire que la combinaison de certains hooks permet de remplacer Redux. C'est le cas dans certaines situations. Ainsi, Redux a encore de beaux jours devant lui sur des gros projets mais pourra avantageusement être par l'association de certains hooks que nous découvriront ensemble dans cette formation résolument pratique entièrement consacrée aux React Hooks.

Les fichiers de travails sont fournis avec la formation.
Je reste disponible pour répondre à vos éventuelles questions.
Bon tuto.
 

Pré-requis de cette formation dédiée aux React Hooks :

Maîtriser les fondamentaux de React (avant l'apparition des hooks).
Vous pouvez les acquérir grâce à la formation "Devenir opérationnel rapidement avec React".

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Gestion de l'état avec useState()
Chapitre 2
Gestion des side effects avec useEffect()
Chapitre 3
Gestion de l'état à l'aide de useReducer()
Chapitre 4
Consommation de contexts à l'aide de useContext()
Chapitre 5
Interaction avec le DOM et useRef()
Chapitre 6
Exercice récapitulatif
Chapitre 7
Custom Hooks

Plan détaillé du cours

Chapitre 1 : Gestion de l'état avec useState()
27m20
 
Leçon 1Création d'une nouvelle application React
Leçon 2Utiliser le hook useState() pour incrémenter le nombre de likes
Leçon 3Utiliser plusieurs useState() dans un component
Leçon 4Afficher tous les frameworks
Chapitre 2 : Gestion des side effects avec useEffect()
28m18
 
Leçon 1Utiliser useEffect() pour effectuer une requête AJAX
Leçon 2Itérer sur nos blog posts
Leçon 3Afficher un indicateur de loading
Leçon 4Un useEffect() par fonctionnalité
Chapitre 3 : Gestion de l'état à l'aide de useReducer()
21m08
 
Leçon 1Création du component Calculator.js et de son reducer
Leçon 2Dispatcher des actions
Chapitre 4 : Consommation de contexts à l'aide de useContext()
30m06
 
Leçon 1Création de components imbriqués
Leçon 2UseContext() pour lire des messages depuis un component grand-parent
Leçon 3Passer des données complexes via "context"
Leçon 4Utilisation d'une fonction provenant du "context"
Chapitre 5 : Interaction avec le DOM et useRef()
23m09
 
Leçon 1S'abonner et se désabonner à l'écoute d'événements clavier
Leçon 2Gérer le focus à l'aide de useRef()
Chapitre 6 : Exercice récapitulatif
27m56
 
Leçon 1Application de côtisation pour un pot de départ
Leçon 2Afficher tous les participants et le total collecté
Leçon 3Gestion de l'état de la case à cocher 'show details'
Chapitre 7 : Custom Hooks
1h10
 
Leçon 1Utiliser un custom hook fourni par la communauté
Leçon 2Créer un custom hook qui utilise localStorage
Leçon 3Créer un custom hook qui vérifie la validité d'un champ texte
Leçon 4Créer un custom hook qui debounce un texte saisi
Leçon 5Debounce d'une requête AJAX

Aperçus

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 ?

intermédiaire

Que contient le fichier source ?

Le fichier source comporte le code que nous créerons ensemble durant cette formation.

Quelles connaissances préalables sont requises ?

Connaître les fondamentaux de React avant l'apparition des hooks. Idéalement, avoir suivi ma formation précédente "Devenir opérationnel rapidement en React".

Payer plus tard ou en 3x

Prix d'achat : 38,00 €
Pour payer plus tard ou en plusieurs versements échelonnés, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez plus tard ou en plusieurs fois

3 paiements de 12,67 €
tous les mois, sans intérêts
Total : 38,00 €
Afficher les conditions : Klarna
Klarna : conditions d'utilisation du paiement différé en 3 échéances.

Attendez ! 🤗

Accédez à plus de 1429 tutos gratuits

Notre politique de protection des données