React JS pour TOUS - L'Ultime Formation | 71 heures | 2025

Dans cette vidéo, je continue avec l’application précédemment installée (cars) afin de continuer notre étude sur la notion des Composants dans React tout en abordant les notions de PROPS et STATE dans React.

Dans cette vidéo, je continue avec l’application précédemment installée (cars) afin de finaliser notre étude sur les notions de PROPS et STATE dans React.

Maintenant que nous avons vu les composants dans React, les props et le state dans un composant de type class, nous allons revenir sur ces concepts pour les réviser une dernière fois avant d'attaquer un petit exercice.

Dans cette vidéo, nous allons corriger notre petit exercice relatif aux props et aux states

Dans cette vidéo, nous allons voir la différence entre Export Default et les Named Exports

Dans cette vidéo, je vous propose un nouvelle exercice afin de réviser quelques notions déjà étudiées.

Dans cette vidéo, nous allons corriger notre exercice sur les props et children

Dans cette vidéo, nous allons voir comment définir plusieurs composants dans un même fichier et comment muter nos props (Pas recommandé par React)

Trois fichiers que vous pouvez télécharger.

Dans cette vidéo nous allons apprendre à travailler sur les événements JavaScript dans React (Exemple: onCopy, onMouseOver, onClick, onSubmit, onChange). Nous allons également apprendre à modifier les datas existantes dans notre State. Pour cela, nous allons utiliser la méthode setState().

Notes sur la mutation du state dans un composant class et quelques mauvaises pratiques à éviter.

Dans cette deuxième partie relative au changement de state, nous allons effectuer une incrémentation de la date existante dans un state.

Dans cette vidéo, je vais reprendre l'exercice précédent afin de vous expliquer comment effectuer le destructuring d'un array ainsi qu'au niveau les arguments d'une callback function. Ensuite, on verra comment invoquer une méthode directement dans les props.

Dans cette vidéo, nous allons faire un petit exercice afin de réviser les événements React et plus précisément dans un composant fonction.

Nous cette nouvelle vidéo, nous allons corriger l'exercice relatif aux événements dans un composant React de type fonction.

Dans cette vidéo, nous allons continuer avec nos exercices sur les Props dans React et nous allons voir comment passer une fonction dans un props.

Nous cette vidéo, je vous propose un petit exercice pour réviser ce que nous avons étudié dans la vidéo précédente avec un petit challenge afin de vous inviter à réfléchir un peu ;-)

Correction de l'exercice de la vidéo précédente.

Dans cette vidéo, nous allons étudier la notion de Fragments dans React et comprendre son utilité dans une application React. Pour cela, nous allons procéder avec un petit exercice afin de vous montrer d’autres alternatives à l’élément Parent que nous avons l’habitude d’utiliser sous forme de ‘DIV’.

Dans cette vidéo, nous allons faire une petite révision afin de bien comprendre cette notion d’affectation par décomposition ou Destructuring en JavaScript ES6.

Maintenant que nous avons révisé la notion de Destructuring dans la vidéo précédente, nous allons appliquer ces connaissance dans React et voir comment profiter de cette nouveauté dans nos projets.

Les conditions dans React sont inévitables et vous devez parfaitement les maîtriser pour mener à bien vos projets. Pour cela, je vous ai concocté quelques petits exercices que, j’espère, vous aideront dans la compréhension de ce chapitre.

Dans cette vidéo nous allons voir comment afficher des images dans une application React.

Dans cette vidéo nous allons étudier les formulaires dans React. Nous allons donc faire quelques exercices pour étudier le cas d’un Input de type text, un select, et un textarea.

Dans cette vidéo, nous allons apprendre à faire du CSS dans une application React. Pour cela, nous allons faire quelques exercices afin d’évoquer le Inline CSS, les CSS dans des fichiers externes (External Style Sheets), les Modules CSS, avant de terminer par quelques Frameworks. Exemple: Nous allons apprendre à importer Bootstrap dans nos dépendances pour pourvoir l’utiliser dans notre application React. Ensuite, on verra la formidable librairie «Styled Components».

Dans ce premier exercice nous allons réviser le CSS avec Bootstrap dans React JS.

Dans cette vidéo, nous allons corriger notre premier exercice avec le CSS Bootstrap avec React JS.

Dans ce deuxième exercice, nous allons créer un Custom Button tout en profitant pour réviser le CSS et les props dans React JS.

Dans cette vidéo, nous allons corriger notre deuxième exercice relatif au custom button, le CSS et les Props dans React JS.

Dans cette vidéo, je vous présente l'exercice que vous allez devoir réaliser pour pouvoir gérer l'évènement onClick sur le custom button. 

Dans cette vidéo, nous allons corriger le troisième exercice concernant l'évènement onClick sur le custom button.

Dans cette vidéo, je vous présente le package React-Bootstrap qui vous permet d'utiliser une version Bootstrap en mode "Components" bien plus adaptée à React JS.

Dans cette vidéo, nous allons attaquer un nouvel exercice afin d'appliquer le package React-Bootstrap à notre précédent exercice.

Dans cette vidéo, nous allons corriger l'exercice 4 et voir comment l'adapter au package React Bootstrap.

Dans cette vidéo, nous allons aborder les méthodes de cycle de vie d’un composant React. En effet, chaque composant React a plusieurs « méthodes de cycle de vie » que vous pouvez surcharger pour exécuter du code à des moments précis du processus sur votre application React. Cependant, avant de rentrer dans les détails, nous allons d’abord étudier les différentes phases d’un composant React qui sont: La phase de montage, la phase de mise à jour et la phase de démontage.

Dans cette vidéo nous allons continuer avec le chapitre des méthodes de cycle de vie d’un composant React et commencer avec la première phase qui est « la phase de Montage ». Dans cette phase de montage, nous avons les méthodes suivantes qui sont appelées dans cet ordre lorsqu’une instance d’un composant est créée puis insérée dans le DOM : constructor() – static getDerivedStateFromProps() – render() – componentDidMount().

Dans cette vidéo nous allons continuer avec le chapitre relatif aux méthodes de cycle de vie d’un composant React et attaquer la deuxième phase qui est « la phase de Mise à jour ». Une mise à jour est déclenchée par des changements dans les props ou l’état local. Les méthodes suivantes sont appelées dans cet ordre quand un composant se rafraîchit. Voici les méthodes accessibles au niveau de cette phase: static getDerivedStateFromProps() – shouldComponentUpdate() – render() – getSnapshotBeforeUpdate() – componentDidUpdate().

Dans cette vidéo nous allons continuer avec le chapitre relatif aux méthodes de cycle de vie d’un composant React et étudier la troisième et dernière phase qui est « la phase de Démontage » d’un composant React. Lors du démontage d’un composant React (quand un composant est retiré du DOM), la seule méthode suivante est appelée : componentWillUnmount().

Dans cette vidéo nous allons voir une des méthodes de cycle de vie d’un composant React qui s’appelle ‘getDerivedStateFromProps’. Elle est appelée juste avant d’appeler la méthode render(), aussi bien pour le montage initial d’un composant que lors des mises à jour ultérieures. Elle doit renvoyer un objet qui mette à jour l’état, ou null faute de mise à jour.

Dans cette vidéo nous allons voir une des méthodes de cycle de vie d’un composant React qui s’appelle ‘shouldComponentUpdate()’. Cette méthode est appelée avant le rendu quand de nouvelles props ou un nouvel état local sont reçues. Par défaut, elle renvoie true et pour la vaste majorité des cas vous devriez en rester là. La méthode shouldComponentUpdate() doit être utilisée pour indiquer à React que la sortie d’un composant n’est pas affectée par la modification en cours de l’état local ou des props.

Dans cette video nous allons passer à un autre chapitre nommé ‘PureComponent’ qui est similaire à React.Component. La seule différence est que React.Component n’implémente pas la méthode shouldComponentUpdate(), alors que React.PureComponent l’implémente en réalisant une comparaison de surface de l’état et des propriétés.

Dans cette nouvelle vidéo nous allons étudier la méthode memo() dans React et qui permet de transformer un composant de type fonction en un composant qui a le même comportement qu’un PureComponent. En effet, dans la vidéo précédente, nous avons appris l’utilité d’un composant class qui extends un PureComponent afin de ne pas recharger inutilement un composant dans le cas où nous n’avons pas de nouvelle data. Pour avoir le même rendu via un composant de type Fonction, nous devons alors passer par la méthode React.memeo(). Nous allons essayer de comprendre cela via quelques petits exercices.

Dans cette vidéo nous allons étudier la notion de Portail dans React. Dans la documentation de React, les Portails sont définis comme étant une excellente solution pour afficher des composants enfants dans un nœud DOM qui existe en dehors de la hiérarchie DOM du composant parent. Le but de cette vidéo est de vous expliquer cela avec un exemples de Pop-Up afin que vous puissiez comprendre cela très facilement.

Dans cette vidéo, nous allons faire quelques exercices afin de voir à quoi pourrait servir les Refs dans React et principalement le ‘createRef’. Exemple: Gérer le focus, la sélection du texte, ou la lecture de média. Lancer des animations impératives etc.

Dans cette vidéo, nous allons faire un petit exercice afin de voir à quoi pourrait servir le ‘forwardRef’. Nous allons donc reprendre l’exercice précédant et voir comment effectuer un focus sur le input directement du composant parent, sans passer par une fonction déjà existante dans le composant enfant. Pour cela, nous allons devoir expédier le ref vers le composant enfant via le React.forwardRef().

Dans cette vidéo, je vais faire un petit exercice afin de vous présenter les composants d’ordre supérieur dans React. Un composant d’ordre supérieur, Higher-Order Component ou HOC est une technique avancée dans React Js qui permet de réutiliser la logique de composants dans un seul composant super puissant. Concrètement, un composant d’ordre supérieur est une fonction qui accepte un composant et renvoie un nouveau composant plus puissant.

Dans cette vidéo nous allons voir les périmètres d’erreurs ou Error Boundaries dans React. En effet, au lieu de casser toute notre application et afficher l’horrible page d’erreur à chaque fois que nous avons un bug ou une erreur dans notre code, grâce aux périmètres d’erreurs nous allons pouvoir intercepter les erreurs JavaScript n’importe où au sein de l’arbre de composants enfants, enregistrer ces erreurs, et afficher une UI de repli à la place de l’arbre de composants qui a planté. Les périmètres d’erreurs interceptent donc les erreurs survenant au rendu, dans les méthodes de cycle de vie, ainsi que dans les constructeurs de tous les éléments de leur arborescence.

Les props de rendu permettent de partager du code entre des composants React en utilisant une prop dont la valeur est une fonction et c’est ce que nous allons voir dans cette vidéo. Nous allons donc faire un exercice pour vous démontrer comment un composant avec une prop de rendu peut prendre une fonction qui renvoie un élément React et l’appelle au lieu d’implémenter sa propre logique de rendu.

Dans cette vidéo nous allons essayer de reproduire la page des docs de React afin d’étudier le notion de Route tout en abordant Link, NavLink, Switch, Strict et Exact. Pour finir, nous verrons également comment afficher une page d’erreur dans une application React. En effet, jusqu’à présent nous avons l’habitude d’afficher tous nos composants ensembles. A présent, nous allons essayer d’afficher les composants en fonction des Routes que nous préciserons dans les URL. Cela nous permettra de créer notre première «Single-page application ». Pour rappel, une SPA (single-page application) est une application qui charge une seule et unique page HTML dans laquelle s’afficheront toutes les ressources nécessaires (telles que du JavaScript et des CSS) requises pour le bon fonctionnement de l’application. En outre, aucune interaction sur la page ou les pages ultérieures ne nécessitera d’aller-retour vers le serveur, évitant ainsi le rafraîchissement de notre application.

Dans cette vidéo nous allons faire deux exercices afin de voir comment effectuer des redirections automatiques dans React. Premièrement nous allons faire cela directement au niveau du composant parent via un propos de rendu, un Redirect et une condition. Ensuite, nous allons effectuer une autre redirection au niveau du composant qu’on ne souhaite pas afficher. Pour cela, nous allons utiliser un setTimeout() qui va se charger le lancer la redirection après 5 secondes.

Dans cette vidéo nous allons continuer avec la notion de Route dans React et voir comment les paramétrer afin d’obtenir des extensions d’URL qui, en changeant, vont nous permettre d’afficher des data spécifiques. Nous allons donc, dans cet exercice, récupérer le ID d’utilisateur passé dans l’url. Une fois cela fait, on pourra accéder aux données relative à ce dernier. Comme nous n’avons pas de data dans notre application, nous allons donc utiliser un service qui s’appelle « FakeJSON » et qui nous permettra de générer de la ‘fake data’ avec laquelle on pourra travailler. Pour pouvoir récupérer les data de fakeJSON, on aura également besoin d’installer Axios au niveau de nos dépendances.

Dans cette vidéo nous allons aborder un nouveau concept dans React qui nous permet de passer des données à travers l’arborescence du composant sans avoir à passer manuellement les props à chaque niveau. pour cela, nous allons devoir utiliser la méthode React.createContext() qui va nous permettre d’accéder aux deux objets Consumer et Provider.

Dans cette deuxième vidéo en rapport avec la notion de Context dans React nous allons revoir l’argument « defaultValue » qu’on passe comme paramètre à la méthode React.createContext(defaultValue). En effet, cet argument est uniquement utilisé lorsqu’un composant n’a pas de Provider correspondant au-dessus de lui dans l’arborescence. Ça peut être utile pour tester des composants de manière isolée sans les enrober. Vous remarquerez également que passer undefined comme valeur au Provider n’aboutit pas à ce que les composants consommateurs utilisent defaultValue. Dans cette même vidéo nous allons également voir la notion de « class.contextType » dans le cas d’une class. Nous allons donc appliquer notre context à la propriété « contextType » de notre class afin de pouvoir accéder au « Provider » et au « Consumer » dans le « this.context » de la class en question.. Notez également que nous pouvons appliquer notre context au contextType de notre class soit à l’extérieur de celle-ci, comme je l’ai démontré dans cette vidéo, [NotreClass.contextType = MyContext;] ou bien directement dans la class car il s’agit là de la propriété Static de notre class. Pour cela on fait [static contextType = MyContext;] directement dans la class.

Cette première vidéo est une rapide introduction aux nouveaux Hooks apportés à React dans sa version 16.8 nous permettant de bénéficier d’un état local et d’autres fonctionnalités de React sans devoir passer par un composant de type class.

Dans cette vidéo, nous allons aborder le premier HOOK qui nous permet désormais d’avoir un état local (State) dans un composant de type fonction. Pour cela, nous allons donc faire appel à la fonction useState qu’on importera de React. Celle-ci va nous permettre d’avoir un état local ainsi qu’une fonction qui va agir sur ce dernier pour lui apporter des modifications. Pour illustrer cela dans cette vidéo, je vais d’abord, via un simple exercice, revenir sur l’état local dans un composant de type ‘class’ avant de refaire le même exercice dans un composant de type ‘fonction’ en faisant appel au Hook d’état useState(). De cette manière, nous allons voir, non seulement la création d’un état local dans ces deux types de composants, mais aussi la manière de leur apporter des mises à jour.

Dans cette vidéo, nous allons continuer avec les Hooks d’états. Dans la précédente vidéo nous avons passé un nombre entier comme paramètre à la fonction useState() pour initialiser notre compteur. Dans la présente vidéo nous allons d’abord passer un « Array » dans lequel on aura des objets. Ensuite, on créera un autre état local avec un bootean.

Dans cette vidéo, nous allons continuer notre apprentissage des Hooks dans React et voir les Hooks d’effets qui nous permettent de créer des effets de bords dans les composants de type fonction. En d’autres termes, pensez au Hook useEffect comme à une combinaison de componentDidMount, componentDidUpdate, et componentWillUnmount. Nous avons vu cela dans les chapitres relatifs aux méthodes de cycle de vie des classes React. Pour cela, nous allons devoir importer la fonction useEffect de React et la déclarer dans le corps de notre composant de type fonction. Pour démarrer, nous allons donc créer un effet de bord après render et ne nécessitent pas de nettoyage.

Dans cette vidéo nous allons continuer avec les Hooks d’effet et voir comment gérer cela via les conditions. En effet, dans certains cas, le lancement récurrent de la fonction useEffect() peut ne pas être utile. Dans le cas, on doit trouver un moyen pour empêcher son exécution et ainsi éviter les problème de performance qui peuvent en résulter. Pour cela, je vous ai créer un petit exercice afin de vous montrer un cas de figure qui pourrait causer quelques soucis de performances à notre application et nous allons voir comment y remédier.

À présent, nous avons appris comment invoquer la fonction useEffect que lorsqu’on souhaite que celle-ci s’exécute, évitant ainsi les éventuels problèmes de performances. En effet, dans l’exemple précédent nous avons vu que l’ajout d’un Array comme deuxième argument à la fonction useEffect, celle-ci prend en considération l’état local qu’on lui passe et fait en sorte que la fonction fléchée ne s’exécute que si cet état a subit un modification. Dans cette vidéo, nous allons aller plus loin en essayant de reproduire le comportement de la méthode de cycle de vie « ComponentDidMount » via la fonction useEffect(). Ainsi, cette dernière ne s’exécutera qu’une seule fois (lors du montage du composant). Vous allez voir, on va revenir sur le Array qu’on passe comme deuxième paramètre.

Dans cette vidéo nous allons continuer avec les Hooks d’effet dans React et voir comment nettoyer les données. On va pas les laver mais, les supprimer En effet, souvent, les effets de bord créent des ressources qui nécessitent d’être nettoyées avant que le composant ne soit démonté et c’est justement le sujet du présent exercice. Pour ce faire, nous allons retourner une fonction de nettoyage dans useEffect.

Nous avons fait quelques exercices sur les Contextes dans React. Nous avons vu qu’on pouvait avoir plusieurs contextes dans un composant de type fonction. Cependant, dans les cas où on importe plusieurs contextes, ces derniers s’imbriqueront les uns dans les autres créant ainsi un code pas facile à lire et à maintenir. Bref, ce n’est pas une technique à recommander dans certains cas et c’est là qu’intervient le Hook de Contexte.

Cette vidéo est une petite introduction au hook useReducer qui, comme useState, nous permet d’avoir un state dans un composant de type fonction. La fonction useReducer(), comme la méthode reduce() en JavaScript, accepte 2 paramètres: Premièrement, un reducer sous forme de fonction qui accepte ‘un state et une action’. Deuxièmement, un état initial. la méthode useReducer, renvoie l’état actuel accompagné de la méthode dispatch.

Dans cette vidéo nous allons mettre en pratique les connaissances théorique acquises dans la vidéo d’introduction à la notion du Hook useReducer. Pour cela, nous allons commencer avec un premier exercice qui consiste à incrémenter et décrémenter un count en utilisant le Hook useReducer.

Dans cette vidéo nous allons aller un peu plus loin avec le concept du Hook useReducer et voir comment incrémenter et décrémenter deux compteurs en utilisant le Hook useReducer.

Dans cette première vidéo nous allons réviser quelques concepts déjà étudiés tout en réalisant notre petite application sur laquelle on utilisera le HOOK useCallback.

Dans cette vidéo nous allons enfin utiliser le HOOK useCallback sur l’application que nous avons créée dans la vidéo précédente. On remarquera que lors du chargement d’un composant ayant des fonctions, celles-ci effectuent une mutation et se transforment en de nouvelles fonctions. Ce changement génère quelques soucis d’optimisation que nous pouvons corriger via la Hook useCallback qui va mémoriser la fonction et évite son rechargement si les dépendances qu’on y passe, comme deuxième paramètres, ne le permettent pas.

Contrairement au Hook useCallback qui permet de mémoriser une fonction, le Hook useMemo, lui, mémorise la valeur déjà calculée par une fonction. En effet, le Hook useMemo recalculera la valeur mémorisée seulement si une des passées comme deuxième paramètres sous forme de tableau a changé. Cette optimisation permet d’éviter des calculs coûteux à chaque rendu. Vous noterez que si vous ne fournissez aucun tableau, comme deuxième paramètre à useMemo, une nouvelle valeur sera calculée à chaque appel. En outre, les effets de bord doivent passer par useEffect, et non par useMemo.

Dans cette vidéo nous allons étudier le Hook useRef qui nous permet d’accéder aux éléments que nous souhaitons manipuler au niveau du DOM ainsi que pour y stocker des valeurs dans sa propriété ‘current’. Pour illustrer cela, nous allons faire 4 exercices: Effectuer un focus sur un Input. Récupérer la valeur passée dans un Input et l’afficher dans le JSX. Incrémenter un compteur sans causer le rechargement du composant. Mettre en place un setInterval pour incrémenter un compteur et, en cliquant sur un bouton, on fait appel à clearInterval pour stopper l’incrémentation. Durant ce process, on aura besoin de faire appel à la propriété ‘current’ de notre objet généré via useRef() pour remédier à une problématique …

Le HOOK useImperativeHandle est conçu pour être utilisé en conjonction avec le HOOK forwardRef. Il permet de personnaliser l’instance qui est exposée au composant parent lors de l’utilisation de ref et c’est ce que nous allons voir dans cette vidéo.

Dans cette vidéo, nous allons voir que le look useLayoutEffect est presque identique au look useEffect. La seule différence réside dans le fait que useLayoutEffect s’exécute de manière synchrone après que toutes les mutations du DOM ont eu lieu. useLayoutEffect peut être utilisé pour inspecter la mise en page du DOM et effectuer un nouveau rendu de manière synchrone. En outre, les mises à jour planifiées dans useLayoutEffect seront traitées de manière synchrone avant que le navigateur ait pu procéder à l’affichage, ce qui n’est pas le cas avec le hook useEffect qui, lui, s’enclenche uniquement après que l’affichage a eu lieu ce qui, dans certains cas, pourrait causer des soucis d’affichage.

Dans cette vidéo, nous allons apprendre à utiliser le hook useDebugValue

Dans cette deuxième vidéo relative au hook useDebugValue, nous allons effectuer un test afin de démontrer le lancement du hook seulement si on est en mode DEV et que React Dev Tools ouvert et inspecte le hook. Cela permet de gagner en terme de performance quand on code.   

Dans cette vidéo, je réponds à un inscrit qui me demande une alternative via le Async/Await pour effectuer le fetch API au niveau de notre Custom Hook useFetch.

Dans cette vidéo, nous allons étudier le Hook useDeferedValue approté à React dans la version 18.

Dans cette vidéo, nous allons aborder le nouveau hook useId() disponible avec React 18.

La réalisation de projets étant la seule façon de progresser en programmation, j’ai donc décidé de compléter ma formation React JS avec cette nouvelle section dans laquelle nous allons réaliser, ensemble, étape par étape, une petite application Marvel Quiz avec la librairie React JS. Cette longue section de 42 vidéos détaillées (Plus de 10 heures de cours) vous aidera à la fois à mettre en pratique quelques-unes des notions acquises lors de ma formation sur React JS tout en vous permettant de vous lancer dans un vrais projet React JS.