ES6 : Let et Const | École du Web

Lecture automatique
Autocomplete

Session précédente Terminez et continuez

React de A à Z

Introduction

Introduction (5:23)
Code source (3:56)
Astuce pour suivre le cours (0:58)

Rappel ES6 et JavaScript moderne

Créer son dossier et Let & Const (11:22)
Fonctions fléchées et fonctions classiques (6:47)
Spread & Rest (4:36)
Les fonctions pures (3:38)
Les fonctions d'ordre supérieur (6:03)
Les fonctions d'ordre supérieur des tableaux (2:59)
Destructuring (3:37)

Les bases de React

Mettre en place une web app (7:48)
Explication des fichiers (9:11)
Qu'est ce que le JSX ? (7:03)
Notre premier composant (4:17)
Découverte de useState() (5:35)
Modifier le state (6:36)
Les "props" (6:55)
Remonter le state (8:00)
Utiliser du CSS avec React (8:08)
Utiliser des images (12:17)
Utiliser des inputs (4:58)

Les rendus conditionnels et les listes

Créer un rendu conditionnel avec "if" (4:18)
L'opérateur ternaire (2:59)
Faire un "toggle" de classes et de css (4:42)
Créer des listes (8:07)

Créer une To-Do Liste

Créer l'interface (11:03)
Afficher la liste (2:58)
ID et suppression (7:26)
Ajouter des éléments (6:39)

React dans le détail

Les règles des Hooks (6:05)
Le hook "useEffect" (7:47)
Un appel à une API avec useEffect (5:11)
Utiliser "setInterval" avec React (8:54)
La destruction d'un composant (5:49)
Les "React fragments" (4:12)
Le hook "useRef()" (7:21)
Sélection un tableau d'éléments (2:46)
Utiliser "addEventListener" (2:17)
Ne jamais changer le state directement dans un tableau/objet (4:59)
Comprendre "props.children" (5:01)
Utiliser "usememo" et "react.memo" (4:48)
Compléter le tout avec "useCallback" (5:30)
Créer un "hook" personnalisé (5:10)

Créer des composants courants

Créer une fenêtre modale (11:17)
Créer un accordéon (17:14)
Coder une navbar responsive (12:52)

Créer un système de routes avec React-router

Installation et première route (5:27)
Créer des chemins dynamiques (6:40)
Créer une navigation (4:40)
Utiliser des "Navlinks" (4:11)
Faire des routes imbriquées (4:55)
Les Hooks utilitaires "useParams" et "useLocation" (4:19)

Découverte de l'API de contexte de React

À quoi sert l'API de contexte ? (2:59)
Mise en place (7:22)
Notre premier contexte (7:16)
Créer un "Dark-light mode" (5:30)

Apprendre à utiliser Redux avec React

Installation de Redux (5:48)
Création du store (4:54)
Utiliser "useSelector" (2:31)
Créer un "Reducer" (4:50)
Le "payload" avec un "dispatch" (6:22)
Combiner plusieurs reducers (5:49)
Qu'est ce qu'un middleware? (4:36)
Appel asynchrone avec Redux (10:03)

Créer un blog avec React

Mise en place (6:36)
Création de l'accueil et d'une carte (9:07)
Création du store et du reducer (7:54)
Afficher les articles (5:13)
Créer le router (5:16)
Créer le formulaire (6:52)
Lier le formulaire au state (8:21)
Lier le formulaire au store (2:38)
Afficher un article (4:35)
Ne pas lier son formulaire et son state (7:44)

Mettre une application React en ligne

Mettre une application React en ligne (8:13)

ANCIEN COURS Introduction

Introduction (2:38)
Comment suivre ce cours (2:42)
Ressources
Astuce pour suivre le cours (0:58)
Mise à jour

ANCIEN COURS Rappel ES6

ES6 : Let et Const (4:28)
ES6 : Les Fonctions Fléchées (3:50)
ES6 : Spread et Destructuring (5:26)
ES6 : Les Classes (4:03)

ANCIEN COURS Les Bases de React

Conseils
Utiliser "create-react-app" pour mettre en place son dossier. (6:43)
Explication des fichiers présents (9:08)
Introduction aux composants et à JSX (7:02)
Créer notre premier Composant (5:45)
Les propriétés "props" (3:20)
Qu'est ce que "state" ? (3:33)
Les composants de type fonction (2:39)
Vérifier ses props avec "proptypes" (2:13)
Du CSS avec React (4:16)
Mettre en place Bootstrap (2:50)

ANCIEN COURS Comprendre State et Props en créant notre AppContacts

Création du Header (4:52)
Création de l'interface des contacts (2:21)
Mieux comprendre State et Props (8:08)
Extension React Chrome (1:53)
Les Évenements avec React (7:37)
Changer le State depuis un autre composant (9:14)
Comprendre les "React Fragment" (6:16)

ANCIEN COURS Gérer des Inputs avec React : To do List

Création du dossier To do-List (2:43)
Création de l'interface (6:47)
Gérer "onChange" et "onSubmit" (4:08)
Créer les éléments de la To Do List (7:04)
Comment utiliser le code source
Supprimer un élément de la liste (3:41)

ANCIEN COURS Découvrons la "Context APi"

Qu'est ce que l'API de contexte ? (2:49)
Mise en place du "context" (4:20)
Wrapper avec "Provider" et "Consumer" (3:21)
Création du "Reducer" (2:47)
Changez le state grâce à "Dispatch" (2:53)
Lier un événement d'un composant et notre "Dispatch" (4:39)
Récapitulons (2:34)

ANCIEN COURS Input + Context : Créer un formulaire pour AppContacts

Créer l'interface du formulaire (6:48)
Gérer "onChange" et "onSubmit" (3:47)
Créer l'Action (2:03)
Créer le Contact (6:14)

ANCIEN COURS Le React Router

Créer une Route et un Link (3:55)
Rajouter des Pages (6:01)
Faire une redirection et une page "Erreur 404" (3:44)

ANCIEN COURSLes méthodes du Cycle de vie d'un composant

Les "Lifecycle Methods" (2:51)
Découvrons ces méthodes concretement (4:42)

ANCIEN COURS Requêtes HTTP avec une API

Mise en place du Projet (2:21)
Le requête "GET" (3:06)
Afficher les articles (4:14)
Réduire les articles et rajouter une propriété (2:37)
Rendre un Article cliquable (3:38)
Récupérer le contenu (4:12)
Afficher un article (2:27)
Éviter la boucle infinie (4:04)
Fermer un article (4:08)
Faire une 'POST' request (5:52)

ANCIEN COURS Redux

Comprendre l'utilisation de Redux (1:36)
Fichiers de départ (1:08)
Création du Store et du Reducer (3:21)
Connecter un composant au store (3:01)
Changer le state d'un composant avec le Store et connect() (6:12)

ANCIEN COURSMettre notre Application en ligne !

Mettre notre application en ligne, créer un repo github. (8:07)
Conseils pour bien mettre en ligne votre app.

ANCIEN COURS Les React Hooks

Introduction aux React Hooks et UseState (6:58)
Règle des Hooks et multiple State (2:10)
Le Hook "UseEffect" (5:52)
Appel d'une API (4:54)
Faire un "Custom Hook" (3:15)
Utiliser UseMemo (11:37)
Utiliser le Hook "UseCallback" (5:35)
Créer une fenêtre modale (12:57)
Faire une "Cleanup function" (9:42)
Créer une navbar responsive (15:50)
Comprendre UseReducer (7:41)
Créer des onglets (9:59)
Utiliser UseRef (10:59)

ANCIEN COURS Utiliser Redux avec les React Hooks

Mise en place (6:16)
Créer un compteur (8:08)
Combiner plusieurs "Reducer" (9:51)

ANCIEN COURS Utiliser l'API de contexte avec les React Hooks

Mise en place (3:07)
Premier contexte. (7:47)
Creer un light mode / Dark mode (13:14)

ES6 : Let et Const

Terminez et continuez

Discussion

0 commentaires