Dans cette formation en ligne, vous allez apprendre à utiliser le Framework Javascript le plus populaire : React.
Il reste encore en 2019 (aux coudes à coudes avec Angular), le Framework le plus demandé. Des sites de missions Freelance comme Malt ou Codeur proposent chaque jour des centaines de missions.
Les agences web et les entreprises s'arrachent les développeurs qui ont ces compétences.
C'est simple, la demande est beaucoup plus grande que l'offre.
Alors qu'attendez-vous pour apprendre React ?
Dans cette formation nous allons :
- Faire un rappel ES6, car nous allons utiliser beaucoup de JavaScript moderne (fonctions fléchées, const, let, destructuring...),
- Découvrir les bases de React,
- Maîtriser les différents types de composants,
- Gérer les données des composants avec State et Props,
- Créer une application qui contient plusieurs "pages" avec React-Router,
- Centraliser le State avec "Context API",
- Utiliser les "React Hooks",
- Réaliser 3 projets concrets en React,
- et bien d'autres choses !
Cette formation en vidéo sera constamment mise à jour, car l'écosystème de React évolue très rapidement.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.
Un QCM de fin vous permettra de valider vos nouvelles connaissances !
Bonne découverte de 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
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Enzo Ustariz
-
Très bien !!! Merci pour tes tutos, ils sont vraiment de bonne qualité avec de bonnes explications. Pour l'installation de uuid, petite modif : npm i react-uuid puis pour l'import: import uuid from 'react-uuid'
-
Excellentissime. Y-a rien à redire.
-
Super cours, clair, concis. merci
-
Avec quelle version de logiciel ce tuto est-il compatible ?React
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés