React Js Pour Tous - L'Ultime Formation [Plus De 45 Heures]

Maîtrisez REACT avec les HOOKS, REDUX, FIREBASE, APIs etc dans des exercices simples et des applications codées de A à Z

What you'll learn
Apprendre les bases de la librairie React JS (versions 16, 17, 18 …) en commençant des bases pour une meilleure maîtrise
Comprendre et maîtriser les composants React de type Classe et type fonction
Comprendre et maîtriser le JSX.
Coder avec React en JavaScript ES6.
Comprendre et maîtriser les cycles de vie d'un composant React de type classe.
Comprendre et maîtriser les props dans React
Utiliser les props pour passer des données entre les composants d'une application React et les afficher.
Maîtriser la gestion du States dans un composant React de type classe et fonction.
Maîtriser les événements dans une application React
Apprendre à afficher des images et des icônes dans une application React
Maîtriser la gestion des routes dans une application React.
Maîtriser les redirections dans une application React
Maîtriser le destructuring ES6 dans vos applications React.
Débogguer une application React et comprendre les mutations du states.
Maîtriser le CSS dans une application React.
Utiliser Vanilla Bootstrap ainsi que le package React-Bootstrap dans vos applications React.
Comprendre et maîtriser les Hooks nouveaux de React 16, 17 et 18 !!!
Coder une application, étape par étape, de A à Z jusqu'au déploiement sur Firebase
Apprendre à travailler avec Axios
Apprendre à travailler avec Firebase dans React
Apprendre à gérer l'authentification via Firebase dans React
Gérer la connexion et la déconnexion via Firebase dans une application React
Apprendre à gérer la session utilisateur avec Firebase dans une application React.
Apprendre et maîtriser les règles de sécurité Cloud FireStore
Apprendre à modifier le mot de passe via firebase dans une application React
Gestion de base de données via Firebase Firestore (Enregistrement et récupération des données).
Apprendre à utiliser plusieurs package NPM dans vos applications React comme Axios, React-Tooltip, React Toastify, React Icons etc..
Apprendre à travailler avec des API dans vos applications React. On verra plusieurs exemples concrets comme l'API Marvel dans une vraie application.
L'utilisation des variables d'environnement dans vos applications React
Le déploiement d'une application React JS sur Firebase pour la présenter au monde entier sur Internet!
Maîtriser les deux versions de React-Router (version 5 et version 6)
Et bien plus encore …
Requirements
Notions en HTML/CSS
JavaScript ES6+ (Pas besoin d'être un expert)
Description
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 - SuiteReact.lazy & React.Suspense - Partie 1React.lazy & React.Suspense - Partie 2Coder 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 JSDans 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 statesVidé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, LocalStorageA 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 v6Infos téléchargement applicationApplication et Node ModulesRévisions React Router v5 avant mise à jour vers v6Routes et RouteLink et NavLinkNavigateRedirection programméeNavigate avec replaceGérer les routes inexistants via ErrorPageExercice 1Correction Exercice 1Exercice 2Correction Exercice 2Routes imbriques (Nested Routes)Route IndexRécupérer la data dans l'URLRécupérer une data d'une API via paramètres RouteParamètres de requêtesLazy Loading RoutesTélécharger le projet React-Router 6INFOS, UPDATES & AUTRESDans 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.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Adaptez la formation à votre rythme

Lecture 3 L'art de poser des questions ou de demander de l'aide

Section 2: Info importante relatives aux Packages NPM

Lecture 4 Info Packages dépendances et mises à jour

Lecture 5 Note 2

Section 3: Les composants (Components) dans React JS

Lecture 6 Les composants React JS

Lecture 7 Les composant React JS - Exercice React avec CDN

Lecture 8 Exercice React avec CDN - Updated React 18

Lecture 9 Note REACT version 17 et plus & ES6+

Lecture 10 Note Utilisateurs Ubuntu

Lecture 11 Les composants React JS - Initialiser une app via create-react-app

Lecture 12 Les composants React JS - Présentation de l'application initialisée

Lecture 13 Note concernant React.StrictMode

Lecture 14 Slides vidéos suivantes

Lecture 15 Présentation de l'application initialisée - Update React 18

Lecture 16 Note: Utilisation de createRoot dans React 18

Section 4: Les concepts de React JS

Lecture 17 Props et State - Partie 1

Lecture 18 Props et State - Partie 2

Lecture 19 Révisions : Composants, Props et States

Lecture 20 Correction exercice sur les props et les states

Lecture 21 Export Default VS Named Exports

Lecture 22 Exercice pour réviser les props et les childrens

Lecture 23 Correction de l'exercice sur les props et children

Lecture 24 Notes sur les composants et les props

Lecture 25 Les événements dans React et changement de state

Lecture 26 Note sur le constructor

Lecture 27 Fichiers de la vidéo suivante

Lecture 28 Exercice: Incrémenter un state dans React

Lecture 29 Destructuring array et callback function + invoquer une méthode dans les props.

Lecture 30 Exercice événements React dans un composant fonction

Lecture 31 Correction de l'exercice sur les événements dans un composant fonction

Lecture 32 Passer une fonction dans Props

Lecture 33 Fichiers de l'exercice suivant

Lecture 34 Exercice - Passer une fonction dans props

Lecture 35 Correction Exercice - Passer une fonction dans props

Lecture 36 React Fragment

Lecture 37 Le Destructuring - Partie1

Lecture 38 Le Destructuring dans React - Partie 2

Lecture 39 Les Conditions dans React JS

Lecture 40 Les Images dans React

Lecture 41 Les Formulaires dans React

Lecture 42 Infos Packages NPM - Bootstrap et Styled-Components

Lecture 43 Note relative à la vidéo suivante

Lecture 44 Le CSS dans React

Lecture 45 Exercice 1 - CSS Bootstrap

Lecture 46 Correction de l'exercice CSS Bootstrap

Lecture 47 Exercice 2 - CSS et Props d'un Custom Button

Lecture 48 Correction de l'exercice 2 - Custom Button

Lecture 49 Exercice 3 - Gérer le onClick sur le custom button

Lecture 50 Correction de l'exercice 3 - onClick sur custom button

Lecture 51 Présentation du package React-Bootstrap

Lecture 52 Exercice 4: Utiliser le package React-Bootstrap

Lecture 53 Correction de l'exercice 4

Section 5: Quiz 1

Section 6: Le Cycle de Vie d'un Composant React avec les Classes

Lecture 54 Introduction aux méthodes de cycle de vie

Lecture 55 La Phase de Montage

Lecture 56 La Phase de Mise à Jour

Lecture 57 La Phase de Démontage

Lecture 58 La méthode getDerivedStateFromProps

Lecture 59 La méthode shouldComponentUpdate

Section 7: Quiz 2

Section 8: Les Concepts de React JS - Suite

Lecture 60 Le PureComponent

Lecture 61 Note avant de visualiser la vidéo suivante

Lecture 62 React Memo

Lecture 63 Note concernant la vidéo suivante

Lecture 64 Les Portails : Création d'un modal

Lecture 65 Les Refs

Lecture 66 Le Forward Ref

Lecture 67 Les Composant d'Ordre Supérieur - HOC

Lecture 68 La Gestion d'Erreurs dans React

Lecture 69 Les Props de Rendu

Lecture 70 Note pour React Router

Lecture 71 BrowserRouter, Route, Switch, Nav, NavLink, Strict et Exact

Lecture 72 Les Redirections

Lecture 73 Paramètres Route

Lecture 74 React Contexte

Lecture 75 React Contexte 2

Section 9: Les HOOKS NOUVEAUX (React version 16.8+)

Lecture 76 C'est quoi ces Hooks?

Lecture 77 Hook d’état – useState – Partie 1

Lecture 78 Update UUID

Lecture 79 Hook d’état – useState – Partie 2

Lecture 80 Hook d’effet – useEffect après Render

Lecture 81 Hook d’effet – useEffect avec Condition

Lecture 82 Hook d’effet – useEffect comme ComponentDidMount

Lecture 83 Note - Update React 18

Lecture 84 Hook d’effet – useEffect avec Nettoyage

Lecture 85 Hook de Contexte – useContext

Lecture 86 useReducer – Introduction

Lecture 87 useReducer – Partie 2

Lecture 88 useReducer – Partie 3

Lecture 89 useCallback – Partie 1

Lecture 90 useCallback – Partie 2

Lecture 91 useMemo

Lecture 92 useRef

Lecture 93 useImperativeHandle

Lecture 94 Note useLayoutEffect

Lecture 95 useLayoutEffect

Lecture 96 Custom Hooks - Partie 1

Lecture 97 Note concernant la vidéo suivante

Lecture 98 Custom Hooks - Partie 2

Lecture 99 Custom Hooks - Partie 3

Lecture 100 Custom Hooks - Partie 4

Lecture 101 Custom Hooks - Partie 5

Lecture 102 Custom Hooks - Partie 6

Lecture 103 useDebugValue

Lecture 104 useDebugValue (Suite)

Lecture 105 Custom Hook useFetch avec Async/Await

Lecture 106 Nouveaux Hooks de React 18.0.0 +.

Lecture 107 Note: Document à télécharger

Lecture 108 useTransition (React >=18)

Lecture 109 useTransition (React >=18) - Suite

Lecture 110 Alternative au hook useTransition

Lecture 111 useDeferedValue (React >=18)

Lecture 112 useId (React >=18)

Section 10: Concepts de React - Suite 3

Lecture 113 Application à télécharger

Lecture 114 React.lazy & React.Suspense - Partie 1

Lecture 115 React.lazy & React.Suspense - Partie 2

Section 11: Coder Une Application React de A à Z jusqu'au déploiement sur Firebase

Lecture 116 1- Introduction et présentation de l'application.

Lecture 117 2- Installation de notre application

Lecture 118 3- Création des composants Header, Landing et Footer

Lecture 119 4- Les boutons sur Landing et animation Wolverine

Lecture 120 5- Les évènements onMouseOver et onMouseOut

Lecture 121 6- Route, Link, Exact, et Switch dans React

Lecture 122 Note React Router Dom version 6

Lecture 123 7- Les images et le inline CSS dans React.js

Lecture 124 Instructions mise à jour Firebase 9

Lecture 125 8- Configuration Firebase

Lecture 126 8- Configuration Firebase - Firebase 9

Lecture 127 9- Instancier la class Firebase via le Contexte

Lecture 128 9- Instancier la class Firebase via le Contexte - Firebase 9

Lecture 129 10- Authentification via Firebase

Lecture 130 10- Authentification via Firebase - Firebase 9

Lecture 131 11- Inscription via Firebase

Lecture 132 11- Inscription via Firebase - Firebase 9

Lecture 133 Note concernant la vidéo suivante

Lecture 134 12- Les redirections dans React

Lecture 135 12- Les redirections dans React (React Router Dom v6)

Lecture 136 13- Connexion via Firebase

Lecture 137 13- Connexion via Firebase - Firebase 9

Lecture 138 14- Déconnexion via Firebase

Lecture 139 14- Déconnexion via Firebase - Firebase 9

Lecture 140 15- Gestion de la session utilisateur via Firebase

Lecture 141 15- Gestion de la session utilisateur via Firebase - Firebase 9

Lecture 142 16- Changer un mot de passe oublié via Firebase

Lecture 143 16- Changer un mot de passe oublié via Firebase - Firebase 9

Lecture 144 17- Firebase – Cloud Firestore

Lecture 145 17- Firebase – Cloud Firestore - Firebase 9

Lecture 146 18- Récupérer de la data de Cloud Firestore

Lecture 147 18- Récupérer de la data de Cloud Firestore - Firebase 9

Lecture 148 19- Composant Quiz, Levels et Progressbar

Lecture 149 20- Récupérer les questions à poser dans le quiz

Lecture 150 21- Récupérer les questions à poser dans le quiz – 2

Lecture 151 22- Valider une réponse & activer le bouton

Lecture 152 23- Validation de la réponse et gestion du score

Lecture 153 24- Affichage des Notifications via React Toastify

Lecture 154 25- Terminer un niveau et accéder aux réponses

Lecture 155 26- Bouton de validation et le composant ProgressBar

Lecture 156 27- Travailler le JSX du composant QuizOver

Lecture 157 28- Gestion des affichages sur le composant QuizOver

Lecture 158 29- Chargement des questions du niveau suivant

Lecture 159 30- Correction Bug pourcentage de réussite

Lecture 160 31- Le package react-stepper-horizontal

Lecture 161 32- Les icônes via le package React-icons

Lecture 162 33- Destructuring et création du composant Loader

Lecture 163 34- Afficher une info-bulle via react-tooltip

Lecture 164 35- Afficher un Modal (PopUp) dans React

Lecture 165 36- API MARVEL

Lecture 166 37- Axios et Marvel API

Lecture 167 38- LocalStorage pour stocker la datas de Marvel API

Lecture 168 39- Affichage de la data dans le Modal

Lecture 169 40- Les règles de sécurité Cloud Firestore

Lecture 170 41- Variables d’environnement pour Firebase config

Lecture 171 42- Déploiement de notre application sur Firebase

Section 12: Maîtriser Redux avec React!

Lecture 172 C'est quoi Redux?

Lecture 173 2 – Actions dans Redux

Lecture 174 3 – Reducer dans Redux

Lecture 175 4 – Redux Store via createStore

Lecture 176 5 – Gestion de plusieurs actions

Lecture 177 6 – Combiner plusieurs Reducers

Lecture 178 7 - React-Redux, Action et Reducer

Lecture 179 8 – React-Redux Store Provider

Lecture 180 9 – Connect HOC et mapStateToProps

Lecture 181 10 – Connect HOC et mapDispatchToProps

Lecture 182 11 – useSelector Hook

Lecture 183 12 – useDispatch Hook

Lecture 184 13 – La documentation Redux et React-Redux

Lecture 185 14 – combineReducers dans une app React

Lecture 186 15 – Redux Action Payload

Lecture 187 16 – Middleware – applyMiddleware

Lecture 188 17 – Thunk Middleware

Lecture 189 18 – L’extension Redux DevTools

Section 13: Coder une Application React avec Redux, API Google Books, Axios et Localstorage

Lecture 190 19-0 Présentation de notre application React Redux

Lecture 191 19-1 Initialisation de notre application

Lecture 192 19–2 Validation du formulaire

Lecture 193 19-3 Dispatch de l’action addBook

Lecture 194 19-4 Affichage des livres

Lecture 195 19-5 React-Flip-Move

Lecture 196 19-6 Effacer un livre

Lecture 197 19-7 Effacer tous les livres

Lecture 198 19-8 React Router Dom

Lecture 199 19-9 Container Search Books

Lecture 200 19-10 Formulaire Search Books

Lecture 201 19-11 FetchBooks Action Reducer

Lecture 202 19–12 Affichage Data Google API

Lecture 203 19–13 AddBook Google API

Section 14: UPDATE: React Router v6

Lecture 204 Infos téléchargement application

Lecture 205 Application et Node Modules

Lecture 206 Révisions React Router v5 avant mise à jour vers v6

Lecture 207 Routes et Route

Lecture 208 Link et NavLink

Lecture 209 Navigate

Lecture 210 Redirection programmée

Lecture 211 Navigate avec replace

Lecture 212 Gérer les routes inexistants via ErrorPage

Lecture 213 Exercice 1

Lecture 214 Correction Exercice 1

Lecture 215 Exercice 2

Lecture 216 Correction Exercice 2

Lecture 217 Routes imbriques (Nested Routes)

Lecture 218 Route Index

Lecture 219 Récupérer la data dans l'URL

Lecture 220 Récupérer une data d'une API via paramètres Route

Lecture 221 Paramètres de requêtes

Lecture 222 Fichiers à télécharger

Lecture 223 Lazy Loading Routes

Lecture 224 Télécharger le projet React-Router 6

Section 15: INFOS, UPDATES & AUTRES

Lecture 225 Mises à jours & Nouveaux Contenus

Section 16: Remerciements

Lecture 226 Remerciements

Développeurs JavaScript qui souhaitent maîtriser les concepts de la librairie REACT JS.,Intégrateurs web qui aimeraient passer à la vitesse supérieur et acquérir de nouvelles compétences.,Toute personne ayants des connaissances en JavaScript et qui est motivée pour comprendre réellement les concepts de React JS pour bien le maîtriser.