Les bases de ReactJS #6/9 :: Manipuler des datas depuis un JSON
Les bases de ReactJS #6/9 :: Manipuler des datas depuis un JSON
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
Démarrage du projet
Chapitre 2
Effectuer une requête AJAX avec les Hooks
Effectuer une requête AJAX avec les Hooks
Chapitre 3
Créer une interface graphique à l'aide de Semantic UI React
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()
Partager données et fonctionnalités à l'aide de Context et du Hook useContext()
Chapitre 5
Le routage
Le routage
Chapitre 6
Le détail du caddie à l'aide de React Context
Le détail du caddie à l'aide de React Context
Chapitre 7
Persister le caddie
Persister le caddie
Plan détaillé du cours
Chapitre 1 : Démarrage du projet
13m34s
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
13m45s
Leçon 1Récupérer les livres depuis l'API REST
Chapitre 3 : Créer une interface graphique à l'aide de Semantic UI React
18m58s
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()
29m23s
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
09m57s
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
19m16s
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
07m37s
Leçon 1Sauvegarder et récupérer le caddie
Chapitre 8 : Améliorations diverses
17m59s
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
16m11s
Leçon 1Animer le caddie avec React-Spring
Aperçus
