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 !
Table des matières de cette formation Redux, React (durée : 7h36m)
-
Introduction
- Video promotionnelle gratuit 00:01:12
-
Presentation, Environnement de travail et Outils
- Présentation Projet gratuit 00:10:07
- Outils & environnement de travail gratuit 00:04:00
- Create react app gratuit 00:05:59
-
MarketPlace e-commerce
- Démarrer gratuit 00:06:09
- Fichiers et ressources 00:09:17
- Bootstrap 4 : Barre de Navigation et de recherche 00:09:37
- Bootstrap 4 : Grille CSS 00:13:17
- Composants & Lists 00:06:38
- Fonctions Composants et Props de rendu 00:15:52
- Affichage des produits en catégorie 2/2 (solution) 00:04:37
- Affichage des produits en catégorie 2/2 (solution) 00:01:49
- Click event listener 00:05:16
- Utiliser le Hook d'Etat (useState) 00:12:02
- React Developer Tools (Extension chrome) 00:04:30
- Opérateur '&&' 00:03:45
- Props de rendu: : REFACTO 00:03:39
- Rechercher & Filtrer les résultats 00:11:34
- Utiliser le Hook d'Effet (useEffect) 00:10:31
- Modal de Présentation 00:07:02
- Panier de produits (Cart) 00:02:21
- Ajouter au panier - part 1 00:07:21
- Ajouter au panier - part 2 00:06:37
-
React Router : Navigation des pages de la marketplace
- Nouvelle Vue, Nouveau Composant : le panier (Cart) 00:07:24
- React router npm 00:12:04
- React router - Link 00:07:20
- CartView - Part 1 00:06:53
- CartView - Part 2 00:05:08
-
Architecture Redux
- Redux - introduction 00:03:31
- Découvrir les fondamentaux (core concepts)``` 00:06:00
- Documentation: les actions 00:06:21
- Documentation: le reducer 00:07:06
- Documentation: Usage du store 00:06:07
- Ajouter Redux à un projet react : définir les actions 00:09:23
- Gérer l'état de l'application : le reducer 00:11:19
- Créer le store 00:10:29
- Presentation vs. Container Components 00:08:18
- Fonction connect() : connecter les composants à Redux 00:13:19
- MapStateToProps - accéder au state de l'application 00:02:07
- Reducer - correction 00:01:31
- MapDispatchToProps - dispatcher des actions via le store 00:08:09
- Redux Hooks : useDispatch 00:14:09
- Redux Hooks : useSelector 00:04:39
- Add items to cart 00:08:46
- Modifier les produits au panier 00:13:11
- Supprimer des produits du panier 00:05:48
- Supprimer des produits du panier 00:00:00
- UseEffect hook 00:09:45
- UseEffect correction qty 00:07:49
- HTML5 localStorage : persister dans le stockage local du navigateur 00:20:53
-
API Context - valeurs globales
- Action Checkout gratuit 00:03:35
- Page Checkout 00:09:09
- Formulaire de saisie client 00:10:15
- API Contexte 00:12:40
- Hooks avancé : useContext 00:05:25
- Mise à jour le contexte 00:05:51
- Mettre à jour le contexte - Suite & Solution 00:00:00
- Page de confirmation de livraison 00:06:25
- Fin 00:22:02
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
avec cette formation , voyons nous également le rendu responsive pour des environnements mobile
merci
Le responsive n'est pas le focus du cours, mais on utilise les ressources Bootstrap qui fait bien le travail d'adapter l'interface aux différentes tailles d'écran. En cas de besoin de personnalisation et d'optimisation du site, j'invite à consulter la documentation pour des résultats rapides. Il existe un autre cours entièrement dédié à Bootstrap aussi pour info.
Sandy