Développement Front - ReactJS, Redux et l'API Contexte
4.5 (16 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
113 students enrolled

Développement Front - ReactJS, Redux et l'API Contexte

Développez un site e-commerce de livraison en ligne, avec le gestionnaire d'état React Redux et l'API Contexte
4.5 (16 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
113 students enrolled
Created by Sandra L
Last updated 3/2020
French
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 8 hours on-demand video
  • 21 articles
  • 20 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Développez un projet de commerce en ligne avec plusieurs vues
  • Découvrir l'architecture et le gestionnaire d'état Redux
  • Organiser la logique et fonctionnalités et de son application ReactJS avec un 'state global' via le store
  • Utiliser l'API contexte pour partager des valeurs globalement (sans utiliser les props)
  • Programmation de la navigation avec react-router-dom
  • Utiliser le local storage de son navigateur
Course content
Expand all 80 lectures 08:01:47
+ Présentation & Orientation
5 lectures 20:34
Pré-requis : ce qu'il faut savoir
04:00
Outils & environnement de travail
00:21
create react app
05:58
Installation & Consignes
00:08
+ Développement Site eCommerce : vue sur les produits
27 lectures 02:23:30
Démarrer
05:14
Démarrer : Projets et ressources
09:16
Libraire HTML & CSS Bootstrap 4 : Documentation & Usage
00:19
Bootstrap 4 : Barre de Navigation et de recherche
09:36
Bootstrap 4 : Grille CSS
13:17
Composants & Lists
06:37
Fonctions Composants et Props de rendu
15:52
Documentation : les props
00:29
Affichage des produits en catégorie 1/2 (solution)
04:37
Affichage des produits en catégorie 2/2 (solution)
01:49
Click event listener
05:15
Documentation : les hooks
00:25
React Developer Tools (Extension chrome)
04:29
React Developer Tools (ajouter à votre navigateur)
00:13
opérateur '&&'
03:44
Props de rendu: : REFACTO
03:38
Rechercher & Filtrer les résultats
11:33
Documentation : useEffect
00:42
Modal de Présentation
07:02
Panier de produits (Cart)
02:21
setCount : decrémenter
00:10
Ajouter au panier - part 1
07:20
Ajouter au panier - part 2
06:36
Edits Cart - Panier
00:20
Projet final à télécharger
00:00
+ React Router Navigation (Routes et Pages)
8 lectures 38:50
Starter Files zip
00:01
Nouvelle Vue, Nouveau Composant : le panier (Cart)
07:23
react router npm
12:04
Documentation : react-router
00:01
react router - Link
07:19
CartView - Part 1
06:53
CartView - Part 2
05:08
Projet Final zip
00:00
+ L'architecture Redux : gestionnaire d'état de l'application eCommerce
26 lectures 03:12:45
Starter Files zip
00:01
Découvrir redux
00:39
Documentation: les actions
06:21
Documentation: le reducer
07:05
Documentation: Usage du store
06:07
Ajouter Redux à un projet react : définir les actions
09:23
{ code source } - actions
00:16
Gérer l'état de l'application : le reducer
11:18
{ code source } - reducer
00:19
Créer le store
10:28
Presentation vs. Container Components
08:17
Fonction connect() : connecter les composants à Redux
13:19
mapStateToProps - accéder au state de l'application
02:06
reducer - correction
01:31
mapDispatchToProps - dispatcher des actions via le store
08:09
Redux Hooks : useDispatch
14:09
Redux Hooks : useSelector
04:39
add items to cart
08:45
Modifier les produits au panier
13:11
Supprimer des produits du panier
05:47
Calcul sous-total et total $$$
12:57
useEffect hook
09:45
useEffect correction qty
07:48
HTML5 localStorage : persister dans le stockage local du navigateur
20:53

Petit quiz pour évaluer vos connaissances sur Redux.

Dans ce quiz, faites attention aux détails. Prenez le temps de lire attentivement chaque question et chaque proposition de réponse.


Maîtriser les définitions et la syntaxe de Redux
4 questions
+ L'API Contexte
13 lectures 01:24:55
Projet de démarrage à télécharger
00:00
Action Checkout
03:34
Page Checkout
09:08
Formulaire de saisie client
10:15
API Context pour créer des variables globales
15:54
{ code source } - UserContext.js
00:12
Hooks avancé : useContext
05:25
Documentation : Contexte Provider et Consumer
00:30
Mettre à jour le contexte
05:50
Mettre à jour le contexte - Suite & Solution
05:14
Documentation : Hook useContext
00:25
Page de confirmation de livraison
06:25

Démo final avec développement de la vue de confirmation et ajout d'un SVG  animé

FINAL
22:02
Requirements
  • Notions de programmation en JavaScript et ES6 (ECMAScript 2015)
  • Connaître des bases de l'intégration web avec HTML5 et CSS3
  • Avoir déjà utilisé Bootstrap 3 ou 4 au moins une fois
Description

Quoi de plus formateur et 'fun' que de développer une application de livraison en ligne avec React et Redux : cours théorique, progressif et (très) pratique avec un tutoriel guidé de développement du 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 contexte

  • Développement de l'UI avancé avec les composants Bootstrap javascript : 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

Venez rejoindre la formation au format orienté projet et progressif pour développer une application e-commerce de livraison en ligne et découvrir les concepts avancés de React JS et de l'architecture Redux.



Who this course is for:
  • Développeurs avec une première expérience projet en React, Angular ou Vue
  • Intégrateurs web avec des notions de javascript