Lecture automatique
Autocomplete
Session précédente
Terminez et continuez
React de A à Z
Introduction
Introduction (5:03)
Mise en place de l'éditeur de code et conseils (5:29)
1. Rappel JavaScript moderne
Let, const et var (15:17)
Les template strings (4:31)
Les différences entre les fonctions fléchées et les fonctions classiques (16:53)
Le spread operator (6:11)
Le destructuring (15:14)
Le rest operator et les paramètres par défaut (1:35)
Les fonctions pures (5:58)
Les fonctions d'ordre supérieur (7:15)
Les méthodes des tableaux partie 1 (8:44)
Les méthodes des tableaux partie 2 (8:11)
Astuces syntaxiques (2:31)
La méthode fetch() (11:03)
Utiliser les modules es6 (11:11)
2. Créer une app avec React
Qu'est-ce qu'une application web ? (4:49)
Utiliser react sans un bundler (8:45)
Un bundler, qu'est-ce que c'est ? (7:06)
Création d'une app web avec Vite et explication de l'architecture du dossier (12:55)
3. Les bases de React
Mise en place du dossier et des extensions (6:50)
Pourquoi faut-il toujours retourner un seul élément ? (5:43)
La syntaxe et les fonctionnalités JSX (12:52)
Notre premier composant (2:42)
Utiliser des évènements (4:39)
Le state (9:39)
Les props (9:46)
Utiliser du CSS (2:57)
Créer une liste d'éléments (5:58)
Utiliser des images (8:09)
Rendu conditionnel avec if (4:27)
Rendu conditionnel avec une opération ternaire (6:24)
Rendu conditionnel avec une opération de court-circuit (3:43)
Exemple de toggle d'une classe html (4:58)
Utiliser useRef() pour une valeur persistante (5:10)
Utiliser useRef() pour sélectionner un élément (5:42)
Les inputs controllés (6:41)
Les inputs incontrollés (3:14)
4. Projet : To-do list
Mise en place (10:55)
Création du contenu (9:10)
Explication de React.strictMode (2:06)
Création et suppression d'éléments (9:11)
Ajouter un élément et validation (8:16)
5. React dans le détail
Les Fragments (3:16)
Les règles des hooks (6:15)
Le hook useEffect (6:00)
Le cycle de vie d'un composant (3:45)
La fonction de nettoyage (7:26)
Ajouter un évènement global (5:09)
Appler une API (14:57)
Utiliser un observateur (9:14)
Utiliser setInterval (8:07)
Sélectionner plusieurs éléments statiques (5:01)
Sélectionner une liste dynamique (10:53)
Comprendre les "props.children" (3:16)
Utiliser memo et useCallback() (9:16)
Le hook useMemo (12:17)
Comprendre useReducer (7:52)
Créer un hook personnalisé (18:11)
Utiliser des CSS Modules (5:16)
Utiliser TailwindCSS (9:48)
Créer des composants courants
Coder une fenêtre modale (10:48)
Créer un système d'onglets (7:06)
Coder une Navbar responsive (10:39)
Mise en place d'un système de validation (10:24)
Contrôler les inputs (3:38)
Créer les conditions de validation (7:42)
Montrer les messages d'erreur (7:05)
React router
Mettre en place React Router (4:43)
Les routes dynamiques (2:25)
Créer une "page 404" (1:14)
Utiliser les liens et les Navlinks (7:35)
Créer des routes imbriquées (12:01)
L'API de contexte
Mise en place (9:01)
Création du contexte (11:10)
Redux Toolkit
Introduction et mise en place (4:53)
Architecture classique (11:52)
Envoyer une action avec dispatch (9:20)
Créer l'UI du projet Fruity (5:15)
Création de des données de l'inventaire (6:47)
Ajouter et enlever un fruit (8:23)
Afficher les fruits sélectionnés (6:26)
Comprendre les extraReducers (4:25)
Utiliser un custom middleware (5:43)
Utiliser le middleware "logger" (1:44)
Appeler une API avec le thunk middleware (10:22)
Afficher les données (5:41)
Créer un chrono (10:35)
Projet : Boxy-generator
Mise en place du projet (9:04)
Mise en place du store redux et des states (10:05)
Création du panneau de configuration et des onglets (14:05)
Afficher les composants des propriétés de la box (3:56)
Mettre en place les inputs range liés à la boîte (7:23)
Mettre en place l'input color lié à la boîte (2:52)
Afficher la liste des ombres (7:18)
Ajouter les inputs des ombres (10:31)
Gérer l'input color des ombres (4:20)
Gérer les inputs range des ombres (1:45)
Ajouter les checkboxes (9:02)
Petites rectifications d'UI (2:54)
Ajouter la visualisation (3:56)
Donner les valeurs du state à la box (9:43)
Activer la modale (3:14)
Créer le contenu de la modale (7:22)
Copier les valeurs et empêcher le scroll quand la modale est ouverte (6:03)
Gérer la suppression des ombres (4:48)
Astuces
Mettre en ligne une app React gratuitement
Exemple de toggle d'une classe html
Contenu de la session verrouillé
Si vous êtes déjà inscrit,
vous aurez besoin de vous connecter
.
Achetez le cours pour déverrouiller