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
Copier les valeurs et empêcher le scroll quand la modale est ouverte
Contenu de la session verrouillé
Si vous êtes déjà inscrit,
vous aurez besoin de vous connecter
.
Achetez le cours pour déverrouiller