49,00

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

49,00

  • Une formation vidéo de 2h26m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Créer un site de e-commerce avec les React Hooks

ajouter ce cours aux favoris retirer ce cours des favoris

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 !

Table des matières de cette formation React (durée : 2h26m)

  • Démarrage du projet
    • Présentation du projet gratuit 00:05:20
    • Génération du projet gratuit 00:03:41
    • Emulation d'une API REST 00:04:33
  • Effectuer une requête AJAX avec les Hooks
    • Récupérer les livres depuis l'API REST 00:13:45
  • Créer une interface graphique à l'aide de Semantic UI React
    • Afficher chaque livre dans un component BookCard 00:09:14
    • Afficher tous les livres à l'aide de Grid et Segment 00:04:11
    • Créer résumé d'un caddie et menu 00:05:33
  • Partager données et fonctionnalités à l'aide de Context et du Hook useContext()
    • Créer un "context" afin de fournir caddie et méthode d'ajout au caddie 00:07:25
    • Consommer un "context" à l'aide du Hook useContext() 00:07:38
    • Consommer un "context" afin d'afficher le nombre d'articles dans le caddie 00:06:22
    • Incrémenter la quantité d'un article déjà dans le caddie 00:05:09
    • Compter le nombre d'articles dans le caddie 00:02:49
  • Le routage
    • Implémenter le routage à l'aide de react-router-dom 00:04:55
    • Afficher le contenu correspondant au component associé à une route spécifique gratuit 00:05:02
  • Le détail du caddie à l'aide de React Context
    • Afficher le détail du caddie 00:09:51
    • Fonction permettant de décrémenter une quantité dans le caddie 00:03:10
    • Appeler addToCard() depuis le detail du caddie 00:03:07
    • Vider le caddie 00:03:08
  • Persister le caddie
    • Sauvegarder et récupérer le caddie 00:07:37
  • Améliorations diverses
    • Mettre à jour le titre de l'onglet lors de chaque ajout de livre 00:02:33
    • Utiliser les icônes fournies par Semantic UI React 00:03:26
    • Nombre total d'exemplaires affiché dans le titre de l'onglet 00:01:54
    • Icônes '+' et '-' 00:03:28
    • Arrondir les prix à deux décimales après la virgule 00:01:12
    • Passer une variable au lieu d'une fonction au tableau des dépendances 00:03:15
    • Remplacer les boutons HTML5 par des icônes de caddie 00:02:11
  • Créer une animation avec React-Spring
    • Animer le caddie avec React-Spring 00:16:11



Formateur : Codeconcept

Codeconcept a publié 24 tutoriels et obtenu une note moyenne de 4,7/5 sur 263 tutoriels vendus. Voir les autres formations de Codeconcept

  • 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...)
accédez à plus de 1349 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données