Fullstack React avec MERN
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
5h13
de formation
57
leçons vidéo
5
chapitres
Intermédiaire
niveau requis
Sandy Ludosky
Sandy Ludosky
Formatrice certifiée

Fullstack React avec MERN

4.8/5 Trustpilot (1384 avis) Satisfait ou remboursé
5h13
de formation
57
leçons vidéo
5
chapitres

React.js est devenu une référence incontournable pour le développement d’interfaces utilisateurs riches et dynamiques. Sa communauté compte des millions d'utilisateurs.

L'objectif de cette formation en vidéo : vous apprendre à développer une application fullstack avec la stack MERN : MongoDB, Express.j,  React.js et  Node.js 
Grâce à cette formation, vous apprendrez en moins de 3 heures, étape par étape :

  • le développement du front avec le framework React.js, les librairies Bootstrap et Front-awesome (1H)
  • la configuration du serveur avec Node.js et Express.js pour construire une API Gateway et définir les routes (1H)
  • l'implémentation de la base de données avec mongoDB as a service (dans le cloud) grâce au fournisseur Amazon Web Services (AWS)  (40mins)
     

Au programme de cette formation MERN

  • Introduction à JSX, ES6 et ES7,
  • composants React (stateless et stateful ) et les props
  • le cycle de vie du composant,
  • gestion et délégation des événements : onClick, onChange et onSubmit,
  • la mise en page avec les librairies Bootstrap et Font awesome,
  • Les transactions HTTP: get, post, put et delete,
  • test des routes API avec l'application Postman.

Ce tutoriel s’adresse à un public expérimenté sur les technologies web tel que le Javascript, HTML, CSS ainsi que sur les requêtes HTTP et les bases de données.
Il est vivement recommandé de connaître quelques base de développement front avec les framework js.
Et, la première partie (Quick Start) est entièrement réservé aux fondamentaux de React.js (je propose d'ailleurs une formation complète sur React, au besoin).

A la fin de ce tuto un QCM vous sera proposé pour valider vos nouvelles connaissances théoriques.
Je reste disponible dans le salon d'entraide du cours pour répondre à vos questions. 

Bon tuto !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Présentation & Quick Start
Chapitre 2
React.js : Développement Frontend
Chapitre 3
Backend: Node.js, API RestFul Express.js & MongoDB as a Service
Chapitre 4
MongoDB Atlas
Chapitre 5
Développement FullStack (MERN)

Table des matières

Chapitre 1 : Présentation & Quick Start

1h29
 
Leçon 1Welcome!
Leçon 2Introduction
Leçon 3Composant Simple
Leçon 4Composant Complexe (stateful)
Leçon 5Première application react 1/2
Leçon 6Première application react 2/2
Leçon 7Objectifs
Leçon 8Pré-requis
Leçon 9Installer l'environnement de travail - 1/2
Leçon 10Installer l'environnement de travail - 2/2
Leçon 11Homebrew yarn
Leçon 12Install react globally
Leçon 13Create-react-app CLI
Leçon 14Exemple: "Bonjour Monde"

Chapitre 2 : React.js : Développement Frontend

1h11
 
Leçon 1Introduction
Leçon 2Nouvelle Appli React
Leçon 3Classe React
Leçon 4Librairie Bootstrap (CSS)
Leçon 5Composant stateful
Leçon 6React developer tools
Leçon 7Gérer les événements
Leçon 8Update UI
Leçon 9Events : onChange and onSubmit
Leçon 10Maintenir état
Leçon 11Custom CSS
Leçon 12Font-awesome icons
Leçon 13Action delete
Leçon 14Finitions

Chapitre 3 :  Backend: Node.js, API RestFul Express.js & MongoDB as a Service

59m49
 
Leçon 1Outils & Modules : express, body-parser, moogoose
Leçon 2Configurer environnement backend
Leçon 3Installer le serveur 1/2
Leçon 4Installer le serveur 2/2
Leçon 5MongoDB as a Service : créer un compte mLab
Leçon 6MongoDB : Connecter la base de donnée
Leçon 7Express Router
Leçon 8Mongoose Schema (Type Todo)
Leçon 9Nodemon (live reload)
Leçon 10Tester API REST Express.js avec Postman
Leçon 11"Server is up and running .."

Chapitre 4 : MongoDB Atlas

52m16
 
Leçon 1Annonce mLab
Leçon 2MongoDB Atlas
Leçon 3Créer un nouveau cluster
Leçon 4Ajouter adresse IP à whitelist
Leçon 5Créer base de données et collection
Leçon 6Mongo compass (application)
Leçon 7Connecter base de données et application
Leçon 8Todo Schema
Leçon 9Express Router et méthode GET (read)
Leçon 10Mongo et opérations CRUD (read, create, update et delete)
Leçon 11Tester les endpoints avec postman (application)

Chapitre 5 : Développement FullStack (MERN)

40m20
 
Leçon 1Transaction HTTP : POST et npm axios
Leçon 2Activer CORS dans Express.js
Leçon 3Transaction HTTP : GET
Leçon 4Requête API et update UI
Leçon 5Transaction HTTP : PUT
Leçon 6Filtrer les résultats
Leçon 7Transaction HTTP : DELETE

Aperçus

Avis des apprenants

Détail des avis
116
Apprenants
1
Commentaire
5/5
Note moyenne
5/5
1
4/5
0
3/5
0
2/5
0
1/5
0
Sandra Dupont
Sandra Dupont
Publié le 14/09/2019
Un tuto très intéressant. Des explications précises pour mettre en place l'environnement, et des fichiers-supports de qualité au cas où on serait perdu. Quelques petits cafouillages, mais finalement très utiles car il est intéressant de voir comment s'en sortir si cela nous arrive. A parfaitement répondu à mes attentes. Bravo et merci.

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
18,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
5h13 de vidéo • 5 chapitres
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 752 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1420 tutos gratuits

Notre politique de protection des données