Tuto React de A à Z (React Hooks inclus) avec React

Table des matières de cette formation React (durée : 15h05m)

• Introduction
  • Introduction 00:05:24
  • Code source 00:03:56
• Rappel ES6 et JavaScript moderne
  • Créer son dossier et Let & Const 00:11:23
  • Fonctions fléchées et fonctions classiques 00:06:48
  • Spread & Rest 00:04:36
  • Les fonctions pures 00:03:39
  • Les fonctions d'ordre supérieur 00:06:04
  • Les fonctions d'ordre supérieur des tableaux 00:02:59
  • Destructuring 00:03:37
• Les bases de React
  • Mettre en place une web app 00:07:48
  • Explication des fichiers 00:09:11
  • Qu'est ce que le JSX ? 00:07:03
  • Notre premier composant 00:04:18
  • Découverte de useState() 00:05:36
  • Modifier le state 00:06:36
  • Les "props" 00:06:56
  • Remonter le state 00:08:01
  • Utiliser du CSS avec React 00:08:08
  • Utiliser des images 00:08:49
  • Utiliser des inputs 00:04:59
• Les rendus conditionnels et les listes
  • Créer un rendu conditionnel avec "if" 00:04:18
  • L'opérateur ternaire 00:03:00
  • Faire un "toggle" de classes et de css 00:04:43
  • Créer des listes 00:08:08
• Créer une To-Do Liste
  • Créer l'interface 00:11:03
  • Afficher la liste 00:02:58
  • ID et suppression 00:07:27
  • Ajouter des éléments 00:06:40
• React dans le détail
  • Les règles des Hooks 00:06:06
  • Le hook "useEffect" 00:07:48
  • Un appel à une API avec useEffect 00:05:12
  • Utiliser "setInterval" avec React 00:08:55
  • La destruction d'un composant 00:05:50
  • Les "React fragments" 00:04:13
  • Le hook "useRef()" 00:07:21
  • Sélection un tableau d'éléments 00:02:46
  • Utiliser "addEventListener" 00:02:17
  • Ne jamais changer le state directement dans un tableau/objet 00:05:00
  • Comprendre "props.children" 00:05:01
  • Utiliser "usememo" et "react.memo" 00:04:49
  • Compléter le tout avec "useCallback" 00:05:31
  • Créer un "hook" personnalisé 00:05:11
• Créer des composants courants
  • Créer une fenêtre modale 00:11:18
  • Créer un accordéon 00:17:14
  • Coder une navbar responsive 00:12:53
• Créer un système de routes avec React-router
  • Installation et première route 00:05:27
  • Créer des chemins dynamiques 00:06:41
  • Créer une navigation 00:04:40
  • Utiliser des "Navlinks" 00:04:11
  • Faire des routes imbriquées 00:04:55
  • Les Hooks utilitaires "useParams" et "useLocation" 00:04:19
• Découverte de l'API de contexte de React
  • À quoi sert l'API de contexte ? 00:03:00
  • Mise en place 00:07:22
  • Notre premier contexte 00:07:17
  • Créer un "Dark-light mode" 00:05:31
• Apprendre à utiliser Redux avec React
  • Installation de Redux 00:05:49
  • Création du store 00:04:54
  • Utiliser "useSelector" 00:02:31
  • Créer un "Reducer" 00:04:51
  • Le "payload" avec un "dispatch" 00:06:22
  • Combiner plusieurs reducers 00:05:49
  • Qu'est ce qu'un middleware? 00:04:36
  • Appel asynchrone avec Redux 00:10:03
• Créer un blog avec React
  • Mise en place 00:06:37
  • Création de l'accueil et d'une carte 00:09:08
  • Création du store et du reducer 00:07:55
  • Afficher les articles 00:05:14
  • Créer le router 00:05:16
  • Créer le formulaire 00:06:53
  • Lier le formulaire au state 00:08:22
  • Lier le formulaire au store 00:02:39
  • Afficher un article 00:04:36
  • Ne pas lier son formulaire et son state 00:07:45
• Mettre une application React en ligne
  • Mettre une application React en ligne 00:08:14
• ANCIEN COURS Introduction
  • Introduction 00:02:39
  • Comment suivre ce cours ? 00:02:43
• ANCIEN COURS Rappel ES6
  • ES6 : Let et Const gratuit 00:04:28
  • ES6 : Les Fonctions Fléchées 00:03:50
  • ES6 : Spread et Destructuring 00:05:26
  • ES6 : Les Classes 00:04:04
• ANCIEN COURS Les Bases de React
  • Utiliser "create-react-app" pour mettre en place son dossier. 00:06:43
  • Explication des fichiers présents 00:09:09
  • Introduction aux composants et à JSX 00:07:03
  • Créer notre premier Composant 00:05:45
  • Les propriétés "props" 00:03:21
  • Qu'est ce que "state" ? 00:03:33
  • Les composants de type fonction 00:02:40
  • Vérifier ses props avec "proptypes" 00:02:13
  • Du CSS avec React 00:04:17
  • Mettre en place Bootstrap 00:02:50
• ANCIEN COURS Comprendre State et Props en créant notre AppContacts
  • Création du Header gratuit 00:04:52
  • Création de l'interface des contacts 00:02:22
  • Mieux comprendre State et Props 00:08:08
  • Extension React Chrome 00:01:54
  • Les Évenements avec React 00:07:38
  • Changer le State depuis un autre composant 00:09:14
  • Comprendre les "React Fragment" 00:06:16
• ANCIEN COURS Gérer des Inputs avec React : To do List
  • Création du dossier To do-List 00:02:43
  • Création de l'interface des contacts 00:06:47
  • Gérer "onChange" et "onSubmit" 00:04:09
  • Créer les éléments de la To Do List 00:07:04
  • Supprimer un élément de la liste 00:03:41
• ANCIEN COURS Découvrons la "Context APi"
  • Qu'est ce que l'API de contexte ? gratuit 00:02:49
  • Mise en place du "context" 00:04:21
  • Wrapper avec "Provider" et "Consumer" 00:03:21
  • Création du "Reducer" 00:02:47
  • Changez le state grâce à "Dispatch" 00:02:54
  • Lier un événement d'un composant et notre "Dispatch" 00:04:40
  • Récapitulons 00:02:34
• ANCIEN COURS Input + Context : Créer un formulaire pour AppContacts
  • Créer l'interface du formulaire gratuit 00:06:49
  • Gérer "onChange" et "onSubmit" 00:03:47
  • Créer l'Action 00:02:04
  • Créer le Contact 00:06:14
  • Ajouter un article 00:19:56
• ANCIEN COURS Le React Router
  • Créer une Route et un Link 00:03:55
  • Rajouter des Pages 00:06:01
  • Faire une redirection et une page "Erreur 404" 00:03:45
• ANCIEN COURS Les méthodes du Cycle de vie d'un composant
  • Les "Lifecycle Methods" 00:02:52
  • Découvrons ces méthodes concretement 00:04:42
• ANCIEN COURS Requêtes HTTP avec une API
  • Intro requêtes HTTP 00:02:22
  • Requête "GET" 00:03:06
  • Afficher les articles 00:04:15
  • Réduire les articles et rajouter une propriété 00:02:37
  • Rendre un article cliquable 00:03:38
  • Récupérer le contenu 00:04:12
  • Afficher un article 00:02:27
  • Boucle infinie 00:04:04
  • Fermer un article 00:04:09
  • Requête "POST" 00:05:52
• ANCIEN COURS Redux
  • Comprendre l'utilisation de Redux 00:01:36
  • Fichiers de départ 00:01:09
  • Création du Store et du Reducer 00:03:21
  • Connecter un composant au store 00:03:01
  • Changer le state d'un composant avec le Store et connect() 00:06:13
• ANCIEN COURS Mettre notre Application en ligne !
  • Mettre notre application en ligne, créer un repo github. 00:08:08
• ANCIEN COURS Comprendre et utiliser les React Hooks
  • Introduction aux React Hooks et UseState 00:06:59
  • Règle des Hooks et multiple State 00:02:11
  • Le Hook "UseEffect" 00:05:53
  • Appel d'une API 00:04:55
  • Faire un "Custom Hook" 00:03:15
  • Utiliser UseMemo 00:11:37
  • Utiliser le Hook "UseCallback" 00:05:35
  • Créer une fenêtre modale 00:12:58
  • Faire une "Cleanup function" 00:09:42
  • Créer une navbar responsive 00:15:50
  • Comprendre UseReducer 00:07:42
  • Créer des onglets 00:09:59
  • Utiliser UseRef 00:10:59
• ANCIEN COURS Utiliser Redux avec les React Hooks
  • Mise en place 00:06:17
  • Créer un compteur 00:08:08
  • Combiner plusieurs "Reducer" 00:09:51
• ANCIEN COURS Utiliser l'API de contexte avec les React Hooks
  • Mise en place 00:03:08
  • Premier contexte. 00:07:48
  • Creer un light mode / Dark mode 00:13:15
  • Mettre une application React en ligne 00:08:14