Maîtrisez facilement React JS, les Hooks et plus encore

Bienvenue à la Formation React JS pour Tous – L’Ultime Formation.

La formation en Français qui vous permet de Maîtriser React JS, (avec les HOOKS), REDUX, FIREBASE, APIs et autres avec des exercices simples, accessibles à tous, ainsi qu’avec la réalisation d’une vraie application React JS qu’on codera ensemble, étape par étape, du début jusqu’à son déploiement sur Firebase !

Dans cette description, je préfère vous épargner la littérature. Si vous êtes ici c’est que vous savez déjà ce que c’est que React JS. Je vais donc aller droit au but et vous présenter concrètement le contenu de cette formation avec le plus de détails possible.

Pour un meilleur apprentissage, cette formation est composée de 3 sections:

Les bases de la librairie React JS: Cette première section est composée d’une bonne trentaine de vidéos qui vous expliquent, pas à pas, les concepts de base de React JS.

• Vidéo 1: La première vidéo est une petite introduction avant de nous lancer dans la formation.
• Vidéo 2: Comme indiqué dans la documentation de React, les composants permettent de découper l’interface utilisateur d’une application sous React en éléments indépendants et réutilisables. Cela nous permet de considérer chaque élément de manière isolée et réutilisable. C’est ce que nous allons étudier dans cette vidéo.
• Vidéo 3: Dans cette vidéo, j’aborde avec vous les points suivants: La création d’une application React JS via CDN. La notion des composants dans REACT. Le JSX et son intérêt comparé à la méthode via JavaScript. L’utilité d’un composant parent. L’attribut ‘Class’ qui devient un ‘className’. La logique d’affichage des différents composants React dans un seul composant parent ‘App’. Comment compiler notre code ES6 via Babel afin de pouvoir l’interpréter sur notre navigateur.
• Update: Exercice React avec CDN – Updated React 18.
• Vidéo 4: Dans cette vidéo, nous allons voir les différentes façons d’initialiser une application React.
• Vidéo 5: Dans cette vidéo, nous allons voir les différents éléments livrés dans notre application que nous avons installée via la ligne de commande ‘create-react-app’.
• Update vidéo 5: Présentation de l’application initialisée – Update React 18.
• Vidéo 6: 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.
• Vidéo 7: 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.
• Vidéo 7-2: Correction exercice sur les props et les states.
• Vidéo 7-3: Dans cette vidéo, nous allons voir la différence entre « Export Default » et « Named Exports »
• Vidéo 7-4: Exercice pour réviser les props et children.
• Vidéo 7-5: Correction de l’exercice sur les props et children.
• Vidéo 7-6: Notes sur les composants et les props.
• Vidéo 8: Dans cette vidéo nous allons apprendre à travailler sur les événements JavaScript dans React.
• Vidéo 9: Dans cette deuxième partie relative au changement de state, nous allons effectuer une incrémentation de la date existante dans un state.
• Vidéo 9-1: Destructuring array et callback function + invoquer une méthode dans les props.
• Vidéo 9-2: 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.
• Vidéo 9-3: Nous cette nouvelle vidéo, nous allons corriger l’exercice relatif aux événements dans un composant de type fonction.
• Vidéo 10: 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.
• Vidéo 10-1: Exercice – Passer une fonction dans props.
• Vidéo 10-2: Correction de l’exercice.
• Vidéo 11: Dans cette vidéo, nous allons étudier la notion de Fragments dans React et comprendre son utilité dans une application React.
• Vidéo 12: 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.
• Vidéo 13: Dans cette vidéo, nous allons appliquer ces connaissance relatives au destructuring dans React.
• Vidéo 14: Dans cette vidéo, je vous ai concocté quelques petits exercices pour vous expliquer les conditions dans React.
• Vidéo 15: Dans cette vidéo nous allons voir comment afficher des images dans une application React.
• Vidéo 16: Dans cette vidéo nous allons étudier les formulaires dans React.
• Vidéo 17: Dans cette vidéo, nous allons apprendre à faire du CSS dans une application React.
• Vidéo 17-2: Exercice 1 – CSS Bootstrap.
• Vidéo 17-3: Correction de l’exercice 1.
• Vidéo 17-4: Exercice 2 – CSS et Props d’un Custom Button.
• Vidéo 17-5: Correction de l’exercice 2.
• Vidéo 17-6: Exercice 3 – Gérer le onClick sur le custom button.
• Vidéo 17-7: Correction de l’exercice 3.
• Vidéo 17-8: Présentation du package React-Bootstrap.
• Vidéo 17-9: Exercice 4: React-Bootstrap.
• Vidéo 17-10: Correction de l’exercice 4.
• QUIZ 1: (10 Questions QCM)
• Vidéo 18: Dans cette vidéo, nous allons aborder les méthodes de cycle de vie d’un composant React.
• Vidéo 19: 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 ».
• Vidéo 20: 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 ».
• Vidéo 21: 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.
• Vidéo 22: Dans cette vidéo nous allons voir une des méthodes de cycle de vie d’un composant React qui s’appelle getDerivedStateFromProps.
• Vidéo 23: Dans cette vidéo nous allons voir une des méthodes de cycle de vie d’un composant React qui s’appelle shouldComponentUpdate().
• QUIZ 2: (20 Questions QCM)
• Vidéo 24: Dans cette video nous allons passer à un autre chapitre nommé ‘PureComponent’ qui est similaire à React.Component.
• Vidéo 25: 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.
• Vidéo 26: Dans cette vidéo nous allons étudier la notion de Portail dans React.
• Vidéo 28: Dans cette vidéo, nous allons faire un petit exercice afin de voir à quoi pourrait servir le ‘forwardRef’.
• Vidéo 29: Dans cette vidéo, je vais faire un petit exercice afin de vous présenter les composants d’ordre supérieur dans React.
• Vidéo 30: Dans cette vidéo nous allons voir les périmètres d’erreurs ou Error Boundaries dans React.
• Vidéo 31: 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.
• Vidéo 32: 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. On verra également comment afficher une page d’erreur dans une application React.
• Vidéo 33: Dans cette vidéo nous allons faire deux exercices afin de voir comment effectuer des redirections automatiques dans React.
• Vidéo 34: 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.
• Vidéo 35: 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.
• Vidéo 36: 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).

Les Hooks Nouveaux.

• Vidéo 37: 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.
• Vidéo 38: 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.
• Vidéo 39: 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.
• Vidéo 40: 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.
• Vidéo 41: Dans cette vidéo nous allons continuer avec les Hooks d’effet et voir comment gérer cela via les conditions.
• Vidéo 42: 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().
• Vidéo 43: Dans cette vidéo nous allons continuer avec les Hooks d’effet dans React et voir comment nettoyer les données.
• Vidéo 44: 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.
• Vidéo 45: 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.
• Vidéo 46: 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.
• Vidéo 47: 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.
• Vidéo 48: 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.
• Vidéo 49: 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.
• Vidéo 50: 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 et c’est ce que nous allons voir dans cette vidéo.
• Vidéo 51: 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’.
• Vidéo 52: 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.
• Vidéo 53: 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.
• Vidéo 54: Custom Hooks – Partie 1. Dans ces 6 vidéos, nous allons apprendre à créer nos propre HOOKS.
• Vidéo 55: Custom Hooks – Partie 2.
• Vidéo 56: Custom Hooks – Partie 3.
• Vidéo 57: Custom Hooks – Partie 4.
• Vidéo 58: Custom Hooks – Partie 5.
• Vidéo 59: Custom Hooks – Partie 6.
• Vidéo 60: Dans cette vidéo, nous allons apprendre à travailler avec le hook useDebugValue.
• Vidéo 61: Dans cette deuxième vidéo, nous allons tester le useDebugValue afin de voir concrètement son lancement.
• Vidéo 62: Voir le Custom Hook useFetch avec Async/Await.
• Vidéo 63: Aborder le nouveau hook useTransition apporté à React dans la version 18.
• Vidéo 64: Dans cette vidéo, on continue notre exercice sur le hook useTransition.
• Vidéo 65: Aborder le nouveau hook useDeferedValue (React >=18.0.0)
• Vidéo 66: Aborder le nouveau hook useId (React >=18.0.0)

Concepts de React – Suite

• React.lazy & React.Suspense – Partie 1
• React.lazy & React.Suspense – Partie 2
• Présentation des PropsTypes
• Corriger les alertes EsLint via propTypes
• Exercice: CustomButton – CustomTable avec les propTypes
• Exercice pour transformer les composants class en fonctions dans Goku contre Vegeta.

Coder Une Application React de A à Z (MARVEL QUIZ)

La réalisation de projets étant la seule façon de progresser en programmation, j’ai donc décidé de compléter cette formation React JS pour débutants avec une nouvelle section dans laquelle nous allons réaliser, ensemble, étape par étape, une application React Js nommée « Marvel Quiz ».

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. A la fin de cette formation, vous serez parfaitement capables d’intervenir sur n’importe quel projet sous React JS sans difficulté.

Maîtriser REDUX avec React JS

Dans cette nouvelle section, je vous apprendrai tout ce que vous devez savoir sur REDUX et comment l’utiliser dans vos application REACT. Sans trop de bla-bla, je vais aller droit au but et vous indiquer clairement ce que vous allez apprendre:

• Vidéo 1: Dans la première vidéo d’introduction, je vous explique, d’une manière globale et théorique, le concept de Redux. On verra pourquoi utiliser cette bibliothèque, est-elle obligatoire? On abordera les notions indispensables à retenir, et on finira avec les prérequis et les outils indispensables avant de se lancer dans la formation.
• Vidéo 2: Dans cette vidéo, nous allons étudier principalement les actions dans Redux. On verra que ces actions sont des objets ayant la propriété type et qu’on peut générer vis des fonctions de création d’action « Action Creator ».
• Vidéo 3: Dans cette vidéo, nous allons voir le Reducer dans Redux. On verra que ce dernier est une fonction pure (pure function) qui accepte deux arguments (prevState et l’action). Ce Reducer est le moyen qui va nous permettre de manipuler notre Redux Store.
• Vidéo 4: Dans cette vidéo, nous allons créer notre Redux Store. Pour cela, on va devoir utiliser la méthode createStore() à laquelle nous allons devoir passer notre Reducer en tant que « argument ». createStore(monReducer).
• Vidéo 5: Dans cette vidéo, nous allons voir comment gérer deux actions au niveau de notre reducer (partie 1).
• Vidéo 6: Dans cette vidéo, nous allons continuer avec la gestion de plusieurs actions via différents reducers.
• Vidéo 7: Dans cette vidéo, nous allons mettre en pratique les notions de Redux étudiées jusqu’ici dans une application React JS. Pour cela, on aura besoin de la bibliothèque React-Redux que nous allons devoir installer dans nos dépendances via NPM.
• Vidéo 7-1: Maintenant que nous avons vu les composants dans React, les props et le state dans un composant de type class, nous allons revenir, dans cette vidéo, sur ces concepts pour les réviser une dernière fois avant d’attaquer un petit exercice.
• Vidéo 7.2: Dans cette vidéo, nous allons corriger notre petit exercice relatif aux props et states
• Vidéo 8: Dans cette vidéo, nous allons continuer la mise en pratique des notions Redux dans une application React. Nous allons donc obtenir Redux dans notre application React. Pour cela, nous allons devoir installer le package « redux » au niveau des dépendances. Cela va nous permettre de créer notre Redux Store dans notre application. Nous allons également devoir installer le package « react-redux » pour l’avoir dans nos dépendances React afin de nous permettre de connecter les deux librairies « React et Redux ». Cette dépendance va nous permettre via le « Provider » de passer le redux store via un props pour qu’il puisse être accessible partout dans notre application React. Cela vous semble compliquer? Ne vous inquiétez pas, c’est un véritable jeu d’enfant.
• Vidéo 9: Dans cette vidéo, nous allons continuer la mise en pratique des notions Redux dans une application React. Nous allons donc importer la méthode connect de react-redux qui va nous permettre de générer un composant d’ordre supérieur (Higher Order Component) afin de pourvoir accéder au Redux Store et y récupérer des données. Pour cela, nous allons devoir passer un argument « mapStateToProps » à la méthode connect. C’est une fonction qui va nous permettre de récupérer le state en tant que props.
• Vidéo 10: Dans cette vidéo, nous allons passer à la méthode connect un deuxième argument « mapDispatchToProps » qui est une fonction qui va nous permettre de passer la méthode dispatch en tant que props. Il suffit alors d’importer l’action qu’on souhaite dispatcher et la passer en tant que argument à notre dispatch.
• Vidéo 11: Dans cette vidéo, nous allons apprendre à utiliser le Hook useSelector comme alternative à mapStateToProps. Pour cela, on aura plus besoin de passer par le composant d’ordre supérieur connect().
• Vidéo 12: Dans cette vidéo, nous allons apprendre à utiliser le Hook useDispatch comme alternative à mapDispatchToProps. Là aussi, on aura plus besoin de passer par le composant d’ordre supérieur connect().
• Vidéo 13: Dans cette vidéo, nous allons jeter un coup d’oeil à la documentation Redux et celle de React-Redux et voir l’intérêt de la documentation en programmation.
• Vidéo 14: Dans cette vidéo, nous allons créer une nouvelle action qui sera gérée via un second reducer. Cela va nous permettre d’apprendre à combiner plusieurs reducers dans une application React.
• Vidéo 15: Dans cette vidéo, nous allons découvrir le payload dans les actions. En effet, jusqu’ici, nous avons vu simplement le type dans l’objet de notre action. En plus de ce payload, nous pouvons également spécifier une autre propriété.
• Vidéo 16: Dans cette vidéo, nous allons voir, d’une manière théorique, comment effectuer des « get requests » et gérer les actions asynchrones via le middleware thunk.
• Vidéo 17: Dans cette vidéo, nous allons voir concrètement comment effectuer des get request et gérer les actions asynchrones via le middleware thunk.
• Vidéo 18: Dans cette vidéo, nous allons voir comment installer et utiliser l’extension Redux Devtools.

Coder une application BOOKS avec React, Redux, Google Books API, Axios, LocalStorage

A partir de cette vidéo, nous allons attaquer une nouvelle section afin de coder ensemble une petite application REACT avec REDUX afin de mettre en pratique les concepts étudiés tout au long de cette formation.

• On verra donc comment dispatcher des actions pour créer un livre dans notre bibliothèque BOOKS.
• On verra comment dispatcher une autre action pour supprimer un livre bien spécifique ou effacer tous les livres existants.
• Ces actions dispatchées seront gérées via des reducers.
• On verra comment récupérer les livres au niveau de l’API Google Books. Pour cela, on aura besoin de axios et du MiddleWare « Thunk ».
• Pour pouvoir interroger l’API Google Books, nous allons devoir préciser le sujet du livre dans un moteur de recherche.
• Une fois la requête envoyée, on affiche un spinner pour indiquer à l’utilisateur qu’on est en train d’interroger l’API.
• Tout cela va être géré via le Reducer qui capte une action bien spécifique par rapport à ce cas.
• Une fois les livres récupérés, on dispachera une autre action pour enregistrer les livres et les afficher dans une liste désordonnée.
• En cliquant sur un élément dans cette liste, on va déployer une section pour accéder aux informations du livre sélectionné.
• On affichera un thumbnail de la couverture du livre, le titre du livre, l’auteur, et une petite description.
• Sous cette section, on aura deux boutons. Le premier bouton permet d’ouvrir un nouvel onglet afin de nous donner accès au livre directement sur Google Books. Le deuxième, nous permet de l’enregistrer dans notre bibliothèque. Là aussi on dispachera une action on passant un objet dans le type pour que le Reducer puisse mettre à jour le state et inclure le livre parmi ceux déjà existants dans la bibliothèque Books.
• Pour ne pas perdre les livres enregistrés, ces derniers seront enregistrés dans le localStorage.

UPDATE: React Router v6

• Infos téléchargement application
• Application et Node Modules
• Révisions React Router v5 avant mise à jour vers v6
• Routes et Route
• Link et NavLink
• Navigate
• Redirection programmée
• Navigate avec replace
• Gérer les routes inexistants via ErrorPage
• Exercice 1
• Correction Exercice 1
• Exercice 2
• Correction Exercice 2
• Routes imbriques (Nested Routes)
• Route Index
• Récupérer la data dans l’URL
• Récupérer une data d’une API via paramètres Route
• Paramètres de requêtes
• Lazy Loading Routes
• Télécharger le projet React-Router 6

INFOS, UPDATES & AUTRES

Dans cette section, je vous présente les mises à jours et autres contenus supplémentaires apportés à cette formation.

Je vous souhaite une très bonne formation 😉

DonkeyGeek.

PS: Je ferai de mon mieux pour répondre à vos questions ayant un lien direct au contenu de cette formation. En revanche, je ne suis pas habilité à intervenir sur vos projets personnels ou ceux sur lesquels vous travaillez en entreprise.