React de A à Z (React Hooks inclus)
React de A à Z (React Hooks inclus)
Apprenez à développer un site e-commerce, avec le gestionnaire d'état React Redux et l'API Context !
Voici un cours théorique, progressif et (très) pratique avec un tutoriel guidé dédié au développement d'un site de livraison pour maximiser vos connaissances en ReactJS et apprendre à maîtriser Redux, le framework de gestion global d'état le plus téléchargé et utilisé.
En premier, des sujets simples de développement en ReactJS :
- Création et maintain de fonctions composant
- Gestion du state et effets de bord avec les hooks
- Utilisation des props de rendu
- Composition avec des composants réutilisables
- Persistance dans le stockage du navigateur avec HTML5 localstorage
- Mise en page avec les grilles responsives, composants CSS et JS de Bootstrap 4 pour rapidement développer un UI responsive et élégant
Puis, les concepts avancés pour monter rapidement en compétence sur les sujets de :
- Single Source of Truth avec le gestionnaire d'état avec l'architecture Redux : l'état de l'application sera géré à un seul endroit via le store avec les actions et reducers
- Les redux hooks
- Partage des valeurs globalement avec l'API context
- Développement de l'UI avancé avec les composants Bootstrap [removed] modal, barre de navigation et formulaire de recherche ...
Vous aurez en résultat final une application complète e-commerce développée en ReactJS et Redux, avec :
- Liste et sélection de produits avec fonction de recherche
- Formulaire de saisie du profil utilisateur
- Vues produit, panier, confirmation de commande et remerciements
- Des fonctions ES6 pour calculer et afficher les résultats, filtrer, dispatcher des actions via le store de l'appli, retourner le state global et aussi créer des animations
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur le projet !
Bonne formation !
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Introduction
Introduction
Chapitre 2
Presentation, Environnement de travail et Outils
Presentation, Environnement de travail et Outils
Chapitre 3
MarketPlace e-commerce
MarketPlace e-commerce
Chapitre 4
React Router : Navigation des pages de la marketplace
React Router : Navigation des pages de la marketplace
Chapitre 5
Architecture Redux
Architecture Redux
Chapitre 6
API Context - valeurs globales
API Context - valeurs globales
Plan détaillé du cours
Chapitre 1 : Introduction
01m12
Leçon 1Video promotionnelle
Chapitre 2 : Presentation, Environnement de travail et Outils
20m06
Leçon 1Présentation Projet
Leçon 2Outils & environnement de travail
Leçon 3Create react app
Chapitre 3 : MarketPlace e-commerce
2h21
Leçon 1Démarrer
Leçon 2Fichiers et ressources
Leçon 3Bootstrap 4 : Barre de Navigation et de recherche
Leçon 4Bootstrap 4 : Grille CSS
Leçon 5Composants & Lists
Leçon 6Fonctions Composants et Props de rendu
Leçon 7Affichage des produits en catégorie 2/2 (solution)
Leçon 8Affichage des produits en catégorie 2/2 (solution)
Leçon 9Click event listener
Leçon 10Utiliser le Hook d'Etat (useState)
Leçon 11React Developer Tools (Extension chrome)
Leçon 12Opérateur '&&'
Leçon 13Props de rendu: : REFACTO
Leçon 14Rechercher & Filtrer les résultats
Leçon 15Utiliser le Hook d'Effet (useEffect)
Leçon 16Modal de Présentation
Leçon 17Panier de produits (Cart)
Leçon 18Ajouter au panier - part 1
Leçon 19Ajouter au panier - part 2
Chapitre 4 : React Router : Navigation des pages de la marketplace
38m49
Leçon 1Nouvelle Vue, Nouveau Composant : le panier (Cart)
Leçon 2React router npm
Leçon 3React router - Link
Leçon 4CartView - Part 1
Leçon 5CartView - Part 2
Chapitre 5 : Architecture Redux
2h58
Leçon 1Redux - introduction
Leçon 2Découvrir les fondamentaux (core concepts)```
Leçon 3Documentation: les actions
Leçon 4Documentation: le reducer
Leçon 5Documentation: Usage du store
Leçon 6Ajouter Redux à un projet react : définir les actions
Leçon 7Gérer l'état de l'application : le reducer
Leçon 8Créer le store
Leçon 9Presentation vs. Container Components
Leçon 10Fonction connect() : connecter les composants à Redux
Leçon 11MapStateToProps - accéder au state de l'application
Leçon 12Reducer - correction
Leçon 13MapDispatchToProps - dispatcher des actions via le store
Leçon 14Redux Hooks : useDispatch
Leçon 15Redux Hooks : useSelector
Leçon 16Add items to cart
Leçon 17Modifier les produits au panier
Leçon 18Supprimer des produits du panier
Leçon 19Supprimer des produits du panier
Leçon 20UseEffect hook
Leçon 21UseEffect correction qty
Leçon 22HTML5 localStorage : persister dans le stockage local du navigateur
Chapitre 6 : API Context - valeurs globales
1h15
Leçon 1Action Checkout
Leçon 2Page Checkout
Leçon 3Formulaire de saisie client
Leçon 4API Contexte
Leçon 5Hooks avancé : useContext
Leçon 6Mise à jour le contexte
Leçon 7Mettre à jour le contexte - Suite & Solution
Leçon 8Page de confirmation de livraison
Leçon 9Fin
Aperçus
