React de A à Z (Hooks, Redux, Contexte inclus)
- Objectifs pédagogiques
- Sections du cours
- Avis
Dans cette formation tu vas apprendre à utiliser le Framework Javascript le plus populaire.
Il reste encore aujourd’hui le Framework le plus demandé.
Tu peux trouver des centaines de missions chaque jour sur les sites de Freelance liés au code.
Les agences web et les entreprises s’arrachent les développeurs qui ont cette compétence.
C’est simple, la demande est beaucoup plus grande que l’offre.
Alors qu’attends tu pour apprendre React ?
Dans cette formation tu vas :
-
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
-
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 l’API de contexte
-
Utiliser les « React Hooks »
-
Apprendre à utiliser Redux avec React
-
Consommer des APIs avec React
-
Créer un « dark light mode »
-
Faire des rendus conditionnels
-
Créer un blog
-
et bien d’autres choses !
Quels sont les prérequis ?
Il faut maîtriser JavaScript, avoir déjà utilisé des fonctions callback, du JavaScript moderne, bien comprendre le destructuring, let & const, la portée, etc …
Il faut également avoir des connaissances basiques en HTML CSS.
Enfin il faut de la volonté et une bonne dose de discipline.
Cette formation sera constamment mise à jour, car l’écosystème de React évolue très rapidement.
Ton instructeur, Enzo.
-
4Let, const et varLeçon vidéo
-
5Les template stringsLeçon vidéo
-
6Les différences entre les fonctions fléchées et les fonctions classiquesLeçon vidéo
-
7Le spread operatorLeçon vidéo
-
8Le destructuringLeçon vidéo
-
9Le rest operator et les paramètres par défautLeçon vidéo
-
10Les fonctions puresLeçon vidéo
-
11Les fonctions d'ordre supérieurLeçon vidéo
-
12Les méthodes des tableaux partie 1Leçon vidéo
-
13Les méthodes des tableaux partie 2Leçon vidéo
-
14Astuces syntaxiquesLeçon vidéo
-
15La méthode fetch()Leçon vidéo
-
16Utiliser les modules es6Leçon vidéo
-
21Mise en place du dossier et des extensionsLeçon vidéo
-
22Pourquoi faut-il toujours retourner un seul élément ?Leçon vidéo
-
23La syntaxe et les fonctionnalités JSXLeçon vidéo
-
24Notre premier composantLeçon vidéo
-
25Utiliser des évènementsLeçon vidéo
-
26Le stateLeçon vidéo
-
27Les propsLeçon vidéo
-
28Utiliser du CSSLeçon vidéo
-
29Créer une liste d'élémentsLeçon vidéo
-
30Utiliser des imagesLeçon vidéo
-
31Rendu conditionnel avec ifLeçon vidéo
-
32Rendu conditionnel avec une opération ternaireLeçon vidéo
-
33Rendu conditionnel avec une opération de court-circuitLeçon vidéo
-
34Exemple de toggle d'une classe htmlLeçon vidéo
-
35Utiliser useRef() pour une valeur persistanteLeçon vidéo
-
36Utiliser useRef() pour sélectionner un élémentLeçon vidéo
-
37Les inputs controllésLeçon vidéo
-
38Les inputs incontrollésLeçon vidéo
-
44Les FragmentsLeçon vidéo
-
45Les règles des hooksLeçon vidéo
-
46Le hook useEffectLeçon vidéo
-
47Le cycle de vie d'un composantLeçon vidéo
-
48La fonction de nettoyageLeçon vidéo
-
49Ajouter un évènement globalLeçon vidéo
-
50Appeler une APILeçon vidéo
-
51Utiliser un observateurLeçon vidéo
-
52Utiliser setIntervalLeçon vidéo
-
53Sélectionner plusieurs éléments statiquesLeçon vidéo
-
54Sélectionner une liste dynamiqueLeçon vidéo
-
55Comprendre les "props.children"Leçon vidéo
-
56Utiliser memo et useCallback()Leçon vidéo
-
57Le hook useMemoLeçon vidéo
-
58Comprendre useReducerLeçon vidéo
-
59Créer un hook personnaliséLeçon vidéo
-
60Utiliser des CSS ModulesLeçon vidéo
-
61Utiliser TailwindCSSLeçon vidéo
-
62Coder une fenêtre modaleLeçon vidéo
-
63Créer un système d'ongletsLeçon vidéo
-
64Coder une Navbar responsiveLeçon vidéo
-
65Mise en place d'un système de validationLeçon vidéo
-
66Contrôler les inputsLeçon vidéo
-
67Créer les conditions de validationLeçon vidéo
-
68Montrer les messages d'erreurLeçon vidéo
-
76Introduction et mise en placeLeçon vidéo
-
77Architecture classiqueLeçon vidéo
-
78Envoyer une action avec dispatchLeçon vidéo
-
79Créer l'UI du projet FruityLeçon vidéo
-
80Création de des données de l'inventaireLeçon vidéo
-
81Ajouter et enlever un fruitLeçon vidéo
-
82Afficher les fruits sélectionnésLeçon vidéo
-
83Comprendre les extraReducersLeçon vidéo
-
84Utiliser un custom middlewareLeçon vidéo
-
85Utiliser le middleware "logger"Leçon vidéo
-
86Appeler une API avec le thunk middlewareLeçon vidéo
-
87Afficher les donnéesLeçon vidéo
-
88Créer un chronoLeçon vidéo
-
89Mise en place du projetLeçon vidéo
-
90Création du panneau de configuration et des ongletsLeçon vidéo
-
91Mise en place du store redux et des statesLeçon vidéo
-
92Afficher les composants des propriétés de la boxLeçon vidéo
-
93Mettre en place les inputs range liés à la boîteLeçon vidéo
-
94Mettre en place l'input color lié à la boîteLeçon vidéo
-
95Afficher la liste des ombresLeçon vidéo
-
96Ajouter les inputs des ombresLeçon vidéo
-
97Gérer l'input color des ombresLeçon vidéo
-
98Gérer les inputs range des ombresLeçon vidéo
-
99Ajouter les checkboxesLeçon vidéo
-
100Petites rectifications d'UILeçon vidéo
-
101Ajouter la visualisationLeçon vidéo
-
102Donner les valeurs du state à la boxLeçon vidéo
-
103Activer la modaleLeçon vidéo
-
104Créer le contenu de la modaleLeçon vidéo
-
105Copier les valeurs et empêcher le scroll quand la modale est ouverteLeçon vidéo
-
106Gérer la suppression des ombresLeçon vidéo