39,00

Tuto Fullstack ReactJS & Firebase avec React

39,00

  • Une formation vidéo de 6h07m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

Objectif du cours Fullstack ReactJS et FireBase

Développez une application monopage (SPA) fullstack en ReactJS avec les services cloud-based  de Google Firebase ! Avec un format orienté projet, cette formation en ligne et en vidéo est progressive.

Au programme de ce tuto 

  • Développer une page de recherche de films en interrogeant l’API OMDb (The Open Movie Database).
  • Installer un backend serverless géré sur la plateforme Google : base de données Firestore et Authentification.

Les étapes de développement de notre projet pratique :

  • Créer et maintenir des composants fonctions réutilisables avec les hooks et les props
  • Programmer avec la syntaxe JavaScript ES2015 et l'extension JSX
  • Développer une application monopage (SPA) avec Bootstrap 4 et Font Awesome pour une réaliser rapidement une interface responsive et professionnelle
  • Faire des appels API RESTful : OMDb, The Movie Database
  • Découvrir Firebase et ses services managés dans le cloud  (Serveur et base de données, sans infrastructure avec Cloud Firestore, les comptes utilisateurs avec les solutions 'cloud-based' d'authentification avec Firebase)
  • Créer des formulaires de saisie pour la création et vérification de compte, authentification les utilisateurs, réinitialisation des mots de passe …
  • En bonus, beaucoup de resources, guides et code snippets pour accélérer la réalisation du projet

Vous aurez en résultat final une application complète de recherche de films développée en ReactJS, avec :

  • Liste de films avec fonction de recherche
  • Formulaire de saisie du profil utilisateur
  • Modal de présentation
  • Des fonctions ES6 pour afficher les résultats de recherche depuis une API, interroger et écrire des données via les services dans le cloud de Firebase

Pour profiter du cours au maximum :

  • Des notions d’intégration avec HTML5 et CSS3 sont recommandés
  • Des bases de programmation en JavaScript et ES6
  • Une première expérience projet en ReactJS ou une autre librairie JavaScript

Table des matières de cette formation React (durée : 6h07m)

  • Introduction
    • Bienvenue ! gratuit 00:01:12
    • Présentation Projet Final gratuit 00:03:05
    • Outils, Dépendences & Librairies utilisés gratuit 00:04:49
  • SPA : développement de l'application monopage
    • Présentation Démarrage gratuit 00:06:28
    • Formulaire de recherche 00:16:14
    • Fonction recherche 00:01:57
    • L'option favori 00:08:35
    • Navigation : Search & Favorites 00:22:04
  • API RESTFul : Omdb Search
    • RESTful API : The Open Movie Database 00:14:28
    • Utiliser la méthode fetch pour faire des requêtes HTTP 00:07:53
    • Récupérer la réponse au format JSON 00:09:02
    • Formatter les objets de réponse JSON (liste de Movie) 00:07:10
    • Recherche (query) & requêtes API 00:13:05
    • Ajouter aux favoris 00:17:34
    • Afficher la liste de favoris 00:04:58
  • Firebase Cloud Firestore
    • Créer un projet Firebase 00:04:26
    • Créer une base de données avec Cloud Firestore 00:08:53
    • Write - écrire vers base de données 00:09:53
    • Read - interroger la base de données 00:14:26
    • Write, read & re-render les favoris - REFACTO 00:05:51
    • Delete - supprimer des données 00:09:33
    • Write, read, delete & re-render les favoris 00:04:46
    • Conclusion 00:04:20
  • Comptes Utilisateurs
    • Présentation 00:06:12
    • Modal de présentation 00:05:56
    • Formulaire : login 00:09:36
    • Formulaire : signup 00:04:12
    • Modal de présentation : smooth scroll 00:10:27
    • Formulaire : reset password 00:15:20
    • Formulaire : conclusion 00:16:40
    • Validation formulaire : signup 00:11:34
    • Validation formulaire : login 00:04:34
    • Validation formulaire : reset 00:02:16
  • Firebase Authentification
    • Firebase Authentication 00:04:51
    • Nouveau compte utilisateurs : createUserWithEmailAndPassword 00:10:35
    • Promesse et gestion des erreurs 00:18:14
    • Reset Form clean up 00:08:17
    • Email de vérification et activation de compte 00:05:38
    • Authentifier l'utilisateur connecté 00:10:36
    • Affichage conditionnel : logout button 00:06:57
    • Déconnexion 00:05:19
    • Login : signInWithEmailAndPassword 00:05:30
    • Autorisation & accès sécurisé 00:03:44



Formateur : Sandy Ludosky

Sandy Ludosky a publié 26 tutoriels et obtenu une note moyenne de 4,3/5 sur 3 298 tutoriels vendus. Sandy Ludosky est un formateur certifié tuto.com. Voir les autres formations de Sandy Ludosky

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    vscode 16
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1242 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données