Qu'est ce que REACT ? | Ecole H2PROG

Lecture automatique
Terminé automatiquement

Lecture précédente Terminer et continuer

REACT 2020 par la pratique, de A à Z (évolution progressive)

L'introduction

Présentation (1:47)
Installations VSCode & Node.js (8:18)
Qu'est ce que REACT ? (5:42)

Initialisation

Avant de démarrer (2:40)
Création de la première application (7:39)
Le JSX (5:24)

Les composants

Les composants simples (6:56)
Des composants plus "complexes" (5:42)
Des composants dans des composants (4:41)
Passage d'information (4:26)
Classes (8:11)
Synthèse (1:45)

Les states

Le principe (6:30)
Cycle de vie (6:18)
L'horloge & setState (6:19)
setState (5:46)
Synthèse (1:32)

Structuration (Dossier, CSS ...)

Restructuration du dossier SRC (5:15)
Le CSS dans REACT (10:52)
Les tests et les ternaires (9:19)
Synthèse (2:29)

Les événements

Le clic sur un bouton (7:04)
Evénements et states (7:51)
Modifier une personne (10:27)
Synthèse (1:21)

Propriété "children"

L'utilisation de la propriété "children" (5:26)
Synthèse (0:59)

Les listes

Listes et fonction map (5:16)
La propriété "key" (7:18)
Synthèse (1:07)

Projet 1 : Les livres et un CRUD Front-End

Présentation du projet et choix des composants (3:15)
Création du projet (4:54)
Ajout de bootstrap (4:54)
Composant "Titre" (8:02)
Créer un Snippet (10:53)
Changer la police (6:54)
Composant Bouton (8:03)
Composant Livres (8:38)
Liste de livres (5:03)
Composant Livre (5:18)
Suppression d'un livre (7:55)
Bouton d'ajout d'un livre (5:37)
Composant formulaire d'ajout (6:26)

Les formulaires dans REACT

Création du formulaire d'ajout (9:57)
Soumission du formulaire (7:16)
Ajout du livre dans les states (6:00)
Fermer le formulaire (3:16)
La modification d'un livre (25:04)
Composant Alert (10:02)
Synthèse (1:09)

La validation des formulaires

Le formulaire d'ajout d'un livre avec Formik (11:11)
La validation des saisies avec Formik (8:58)
La validation des saisies avec YUP (11:00)

Projet 2 : Créateur de personnage (Ajout de firebase)

Présentation du projet (3:37)
Préparation du projet (5:07)
Composants bouton et titre (9:11)
Composant CreateurPersonnage (8:47)
Composant ImagePerso (7:16)
Les flèches (6:48)
Changer d'image (8:23)
Points de caractéristiques (5:45)
Les boutons liés aux caractéristiques (9:38)
La mise à jours des points de caractéristiques dans les states (11:15)
Affichage des armes (10:04)
Sélectionner une arme (8:12)
Bouton "créer" et "réinitialiser" (2:14)

Firebase & Database

Création de la DB (5:00)
Axios & Firebase (13:12)
Enregistrer les personnages (12:06)
Lister les personnages créés (17:34)
Rafraîchissement des données (8:45)

Projet 3 : API REST & Axios

Présentation du projet (2:32)
Création du projet (7:47)
Utilisation de l'API REST (15:39)
Filtrer la liste des pays (8:42)
La pagination (15:07)

Routage

Attention : compatibilité V5 - V6
Les bases du routage (11:17)
NavBar (8:15)
Afficher un pays (étape 1) (10:25)
Afficher un pays (étape 2) (17:52)
Erreur 404 (7:40)
Paramétrage des Navlinks (6:08)
Mise en ligne (7:35)
Synthèse routage (0:57)

Projet 4

Présentation du projet (1:44)
Structure du site (7:57)
REACT Router (6:00)
NavBar avec React-Bootstrap et React-Router (9:50)
La page d'accueil (7:21)
Erreur 404 (8:48)
Page contact et formulaire (12:14)
Validation du formulaire avec Formik et Yup (11:22)
Page localisation (étape 1) (9:23)
Page localisation (étape 2) (17:00)

Introduction aux Hooks

Les hooks (4:45)
useState (10:24)
useState et les objets (16:43)
useEffect (13:27)
Hook personnalisé (8:26)

Projet 5

La présentation du projet (3:56)
Les bases du projet (9:22)
Lister les formations (9:16)
Hook personnalisé : useLoadData (7:37)
Filtrer par catégorie (8:54)

Teach online with

Qu'est ce que REACT ?

diapo.pdf

Télécharger

Terminer et continuer