Créer un site ecommerce avec React Redux et l'API Context
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Créer un site ecommerce avec React Redux et l'API Context

Sandy Ludosky
39,00€
3 paiements de 13,00€ avec Klarna. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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
Chapitre 2
Presentation, Environnement de travail et Outils
Chapitre 3
MarketPlace e-commerce
Chapitre 4
React Router : Navigation des pages de la marketplace
Chapitre 5
Architecture Redux
Chapitre 6
API Context - valeurs globales

Plan détaillé du cours

Chapitre 1 : Introduction
01m12s
 
Leçon 1Video promotionnelle
Chapitre 2 : Presentation, Environnement de travail et Outils
20m06s
 
Leçon 1Présentation Projet
Leçon 2Outils & environnement de travail
Leçon 3Create react app
Chapitre 3 : MarketPlace e-commerce
2h21m
 
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
38m49s
 
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
2h58m
 
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
1h15m
 
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

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

Redux , React

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Bonjour, avec cette formation , voyons nous également le rendu responsive pour des environnements mobile merci

Bonjour, 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

Payer plus tard ou en 3x

Prix d'achat : 39,00 €
Pour payer plus tard ou en plusieurs versements échelonnés, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez plus tard ou en plusieurs fois

3 paiements de 13,00 €
tous les mois, sans intérêts
Total : 39,00 €
Afficher les conditions : Klarna
Klarna : conditions d'utilisation du paiement différé en 3 échéances.

Attendez ! 🤗

Accédez à plus de 1357 tutos gratuits

Notre politique de protection des données