Créer un site de e-commerce avec les React Hooks
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Créer un site de e-commerce avec les React Hooks

Codeconcept
48,99€
3 paiements de 16,00€ avec Klarna. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Cette formation React orientée projet va abondamment utiliser les React Hooks. Elle vous permettra de créer en quelques heures une petite application de ecommerce en Javascript
 

Pourquoi choisir ce tuto React plutôt qu'un autre ?

  • pour sortir du simple tuto et passer à un petit projet s'approchant de ce que vous ferez en poste,
  • pour articuler plusieurs techniques cohérentes, couramment utilisées ensemble dans un même projet,,
  • pour organiser la progression de votre projet afin de le réaliser le plus efficacement et le plus rapidement possible mais sans vous précipiter.

 

Au programme de ce tuto créer un site ecommerce avec les React Hooks

Voici les notions qui vont être abordées dans ce cours en vidéo

  • utilisation conjointe des React Hooks les plus courants,
  • communication entre components distants via le context (dispensant ainsi d'utiliser Redux sur de petites applications),
  • le routage avec react-router-dom v5,
  • utilisation de la librairie Semantic UI React,
  • animations simples à l'aide de React Spring.

Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours React.

C'est parti pour la mise en oeuvre de vos connaissances React dans un projet concret et formateur qui va à l'essentiel !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Démarrage du projet
Chapitre 2
Effectuer une requête AJAX avec les Hooks
Chapitre 3
Créer une interface graphique à l'aide de Semantic UI React
Chapitre 4
Partager données et fonctionnalités à l'aide de Context et du Hook useContext()
Chapitre 5
Le routage
Chapitre 6
Le détail du caddie à l'aide de React Context
Chapitre 7
Persister le caddie

Plan détaillé du cours

Chapitre 1 : Démarrage du projet
13m34
 
Leçon 1Présentation du projet
Leçon 2Génération du projet
Leçon 3Emulation d'une API REST
Chapitre 2 : Effectuer une requête AJAX avec les Hooks
13m45
 
Leçon 1Récupérer les livres depuis l'API REST
Chapitre 3 : Créer une interface graphique à l'aide de Semantic UI React
18m58
 
Leçon 1Afficher chaque livre dans un component BookCard
Leçon 2Afficher tous les livres à l'aide de Grid et Segment
Leçon 3Créer résumé d'un caddie et menu
Chapitre 4 : Partager données et fonctionnalités à l'aide de Context et du Hook useContext()
29m23
 
Leçon 1Créer un "context" afin de fournir caddie et méthode d'ajout au caddie
Leçon 2Consommer un "context" à l'aide du Hook useContext()
Leçon 3Consommer un "context" afin d'afficher le nombre d'articles dans le caddie
Leçon 4Incrémenter la quantité d'un article déjà dans le caddie
Leçon 5Compter le nombre d'articles dans le caddie
Chapitre 5 : Le routage
09m57
 
Leçon 1Implémenter le routage à l'aide de react-router-dom
Leçon 2Afficher le contenu correspondant au component associé à une route spécifique
Chapitre 6 : Le détail du caddie à l'aide de React Context
19m16
 
Leçon 1Afficher le détail du caddie
Leçon 2Fonction permettant de décrémenter une quantité dans le caddie
Leçon 3Appeler addToCard() depuis le detail du caddie
Leçon 4Vider le caddie
Chapitre 7 : Persister le caddie
07m37
 
Leçon 1Sauvegarder et récupérer le caddie
Chapitre 8 : Améliorations diverses
17m59
 
Leçon 1Mettre à jour le titre de l'onglet lors de chaque ajout de livre
Leçon 2Utiliser les icônes fournies par Semantic UI React
Leçon 3Nombre total d'exemplaires affiché dans le titre de l'onglet
Leçon 4Icônes '+' et '-'
Leçon 5Arrondir les prix à deux décimales après la virgule
Leçon 6Passer une variable au lieu d'une fonction au tableau des dépendances
Leçon 7Remplacer les boutons HTML5 par des icônes de caddie
Chapitre 9 : Créer une animation avec React-Spring
16m11
 
Leçon 1Animer le caddie avec React-Spring

Aperçus

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

React

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Quel est le niveau en React requis ?

Connaître les fondamentaux de React (components, props, class components, stateless functional components etc...)

Payer plus tard ou en 3x

Prix d'achat : 48,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 16,00 €
tous les mois, sans intérêts
Total : 48,00 €
Afficher les conditions : Klarna
Klarna : conditions d'utilisation du paiement différé en 3 échéances.

Attendez ! 🤗

Accédez à plus de 1422 tutos gratuits

Notre politique de protection des données