Fullstack React avec MERN
ERROR
00:00
00:00

TUTO Fullstack React avec MERN

Sandy Ludosky
19,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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)

Plan détaillé du cours

Chapitre 1 : Présentation & Quick Start
1h29m
 
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
1h11m
 
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
59m49s
 
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
52m16s
 
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)
40m20s
 
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
15
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

Avec quelles versions de logiciels ce tuto est-il compatible ?

React , MongoDB , Node.js

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données