Et c'est parti pour 10 projets avec React ! ⚛️
Au programme de cette formation Coder 10 projets avec React
Dans ce cours en vidéo, on va coder :
- Un slider de A à Z
- Un système de traduction avec React
- Un formulaire qui contient plusieurs étapes de validation
- Des animations avec React et la librairie React-Spring
- Une app "Pomodoro" avec un système de Chrono
- Un clone de Unsplash, la banque d'images en ligne, avec un scroll infini et un système de recherche.
- Un dashboard avec React et Chart-JS
- Une application avec un système d'authentification en utilisant Firebase
- Une app style E-Commerce avec un système de panier en utilisant Redux.
- Et pour terminer une App de prise de notes type Evernote !
Ça donne envie hein ?
Pour visualiser ce que ça donne tu peux regarder la vidéo d'introduction juste au-dessus.
On va utiliser des tas de technologies très utiles, comme Redux, l'API de contexte, React-Router, ChartJS, React-Spring etc. Redux est un "state manager", c'est un outil qui nous permet de gérer les données à travers toute une application, sans avoir forcement besoin de passer des données via des props.
React-router de son côté, va nous permettre de créer un système de navigation avec une application web crée par React.
Pré-requis pour suivre ces ateliers React
Avant de suivre ce cours, veuillez faire attention à avoir de bonnes connaissances de base de JavaScript.
Vous devez savoir maitriser :
- Les tableaux,
- Les objets,
- Le DOM,
- Les fonctions,
- Le JS moderne (fonction fléchée, destructuring, spread ...),
- etc ...
Je propose une formation Javascript complète pour maîtriser ces compétences.
Tous les fichiers de travail sont fournis !
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Si c'est ok pour vous, rendez-vous de l'autre côté pour commencer à coder ! ✌️
Table des matières de cette formation React (durée : 8h56m)
-
Introduction
- Introduction gratuit 00:04:36
- Code source et explication gratuit 00:03:43
-
Slider
- Explication du dossier gratuit 00:05:42
- Afficher les images gratuit 00:09:08
- Mise en place des boutons 00:07:21
- Fonctionnalité de slide 00:03:27
- Prévenir le spam click 00:06:05
- Créer des points et les animer 00:05:07
-
Multi-langues
- Explication du dossier 00:02:38
- Mise en place de l'UI 00:05:16
- Création du contexte 00:03:37
- Changer le langue au click 00:03:01
- Repérer la langue du navigateur 00:04:12
-
Multi-step-validation
- Mise en place 00:05:33
- Indicateur et cartes 00:07:09
- Première carte 00:08:25
- Explication du passage des données 00:05:14
- Checkboxes et form 00:10:02
- Formulaire allergies 00:03:10
- Dernier formulaire 00:10:02
- Animation "indicateur" et fin 00:07:01
-
React-animations
- Mise en place 00:08:33
- Animer l'apparition d'une liste 00:05:12
- Animer l'ajout d'un élément 00:11:44
- Animer au scroll avec React 00:08:13
-
Chrono
- Mise en place 00:03:03
- Mise en place de l'UI et du State 00:06:27
- Créer la logique 00:08:39
- Affichage du Chrono 00:06:29
- Animation, Reset et changement de session 00:06:25
-
Infinite-gallery
- Mise en place 00:04:37
- Créer l'UI 00:08:52
- Premier appel à l'API 00:03:38
- Scroll Infini 00:04:43
- Gérer la recherche 00:04:30
-
Dashboard
- Mise en place 00:03:58
- Créer la navigation 00:04:41
- Afficher un premier graphique 00:10:09
- Création du contexte 00:07:38
- Finitions du projet 00:09:41
-
AuthReact
- Mise en place 00:02:23
- Création de l'UI 00:08:42
- Mise en place de Redux pour les modales 00:13:49
- Mise en place de firebase 00:04:16
- Mise en place du Contexte 00:07:16
- Inscription 00:09:00
- Créer une route privé 00:08:19
- Connexion 00:07:28
-
Ecommerce
- Mise en place 00:02:39
- Créer le router 00:05:27
- Création de l'UI et des cartes 00:11:17
- Vue d'un produit 00:07:01
- Mise en place de Redux 00:03:58
- Ajout d'un Item 00:08:28
- Update un ajout déjà présent 00:02:28
- Affichage du panier 00:05:43
- Mise à jour à partir du panier 00:07:21
-
App-notes
- Mise en place 00:02:14
- Sidebar et responsive 00:09:20
- Navigation et formulaire 00:05:49
- Mise en place de sidenotes 00:11:16
- Supprimer une note et filtrer. 00:07:51
- Ajouter une note 00:10:42
- Afficher les notes 00:14:39
- Modifier une note 00:09:59
- Partie 9 00:00:25
- Partie 10 00:06:41
- Partie 11 00:09:43
- Partie 12 00:05:53
- Partie 13 00:08:03
- Partie 14 00:07:11
- Partie 15 00:03:41
- Partie 16 00:13:49
- Partie 17 00:06:20
- Partie 18 00:06:48
- Partie 19 00:04:47
- Partie 20 00:05:28
- Partie 21 00:15:19
- Partie 22 00:07:15
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Enzo Ustariz
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
