Fullstack JS - Développez un site eCommerce - React, Node, Express, MongoDB & Stripe
Fullstack JS - Développez un site eCommerce - React, Node, Express, MongoDB & Stripe
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()
Gestion de l'état avec useState()
Chapitre 2
Gestion des side effects avec useEffect()
Gestion des side effects avec useEffect()
Chapitre 3
Gestion de l'état à l'aide de useReducer()
Gestion de l'état à l'aide de useReducer()
Chapitre 4
Consommation de contexts à l'aide de useContext()
Consommation de contexts à l'aide de useContext()
Chapitre 5
Interaction avec le DOM et useRef()
Interaction avec le DOM et useRef()
Chapitre 6
Exercice récapitulatif
Exercice récapitulatif
Chapitre 7
Custom Hooks
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
