MERN : créez des applications web FullStack avec MongoDB, Express.js, Node.js et React.js

Auteur(s) :

Rémy, Max Découvrir l'auteur

Résumé

Un guide consacré à la stack MERN, un ensemble de technologies clés pour développer des applications web FullStack. Avec des exemples pratiques et des conseils pédagogiques.

Éditeur(s)
- Editions ENI
Date
- 2025
Notes
- MERN = MongoDB, Express.js, React.js et Node.js
Langues
- Français
Description matérielle
- 1 vol. (400 p.) : ill. ; 22 cm
Collections
- Expert IT
Sujet(s)
ISBN
- 978-2-409-04808-1
Indice
- 681.230 Langages de script
Quatrième de couverture
- MERN
  Créez des applications web FullStack avec MongoDB, Express. js, Node. js et React. js
  Ce livre dédié à la stack Mern, un ensemble de technologies clés pour le développement web FullStack, est destiné aux développeurs ou aux étudiants en informatique désireux de l'utiliser pour développer des applications web robustes. Il couvre en détail dans des chapitres dédiés chaque composante essentielle de la stack : MongoDB pour la gestion des données, Express. js et Node. js pour la création d'un backend performant, et React. js pour des interfaces utilisateur dynamiques côté frontend.
  En suivant les étapes décrites dans les chapitres, agrémentées d'exemples pratiques et de conseil pédagogiques, le lecteur pourra acquérir les compétences nécessaires pour maintenir et déployer des applications, tout en développant sa capacité à résoudre des problèmes (comme le débogage d'erreurs) en autonomie, un atout essentiel dans ce domaine.
Tables des matières
- - MERN
  - Créez des applications web FullStack avec MongoDB, Express.js, Node.js et React.js
  - Max Remy
  - Chapitre 1
  - Introduction à la stack MERN
  - 1. Qu'est-ce que la stack MERN ?11
  - 1.1 Détails des composants11
  - 1.2 Avantages de la stack MERN12
  - 1.3 Histoire et évolution12
  - 2. Fondamentaux13
  - 2.1 Fonctionnement interne13
  - 2.2 Architecture et design patterns14
  - 2.3 Configurations et environnements14
  - 2.3.1 Environnement de développement14
  - 2.3.2 Environnement de test15
  - 2.3.3 Environnement de production15
  - 3. Études de cas16
  - 3.1 Analyse d'une application MERN célèbre16
  - 3.2 Témoignages de réussite17
  - 4. Introduction aux outils complémentaires17
  - 4.1 Outils de développement17
  - 4.2 Ressources d'apprentissage et communautés18
  - 5. Bonnes pratiques19
  - 5.1 Démarrage d'un projet MERN19
  - 5.2 Sécurité et maintenance20
  - 6. Perspectives et évolutions futures21
  - 6.1 Tendances actuelles21
  - 6.2 Evolutions à venir22
  - 7. Synthèse et réflexions finales22
  - 7.1 Synthèse22
  - 7.2 Réflexions finales23
  - Chapitre 2
  - Développement backend
  - 1. Introduction générale25
  - 2. Introduction au développement backend26
  - 3. Présentation de Node.js27
  - 3.1 Introduction à Node.js27
  - 3.1.1 Caractéristiques uniques de Node.js27
  - 3.1.2 Applications typiques avec Node.js27
  - 3.1.3 Exemple : avantages pour le développement d'une application e-commerce28
  - 3.1.4 Conclusion28
  - 3.2 Quelles différences entre npm, YARN, PNPM ?28
  - 3.2.1 npm (Node Package Manager)28
  - 3.2.2 YARN (Yet Another Resource Negotiator)29
  - 3.2.3 PNPM (Performant NPM)29
  - 3.2.4 Recommandations : quel gestionnaire de paquets choisir ?30
  - 3.3 Installation et configuration de l'environnement Node.js31
  - 3.4 Exemple : premier script Node.js « Hello World »36
  - 3.5 Exercices : amélioration du script Node.js « Hello World »37
  - 3.6 Initialisation d'un projet Node.js avec npm38
  - 3.6.1 Pourquoi initialiser un projet Node.js avec npm ?38
  - 3.6.2 Les fichiers générés et leur importance39
  - 3.6.3 Conclusion39
  - 3.7 Configuration du serveur Node.js avec le package.json39
  - 3.7.1 Introduction au fichier package.json40
  - 3.7.2 Structure de base d'un fichier package.json40
  - 3.7.3 Création et gestion des scripts40
  - 3.7.4 Gestion des dépendances41
  - 3.7.5 Utilisation de Nodemon pour le développement42
  - 3.7.6 Qu'est-ce que Nodemon ?42
  - 3.7.7 Installation de Nodemon42
  - 3.7.8 Configuration de Nodemon42
  - 3.7.9 Avantages de Nodemon43
  - 4. Découverte d'Express.js43
  - 4.1 Qu'est-ce qu'Express.js ?43
  - 4.1.1 Définition43
  - 4.1.2 Importance dans la stack MERN44
  - 4.1.3 Caractéristiques principales44
  - 4.1.4 Conclusion44
  - 4.2 Installation d'Express.js45
  - 4.2.1 Installation45
  - 4.2.2 Conclusion46
  - 4.3 Créer un serveur simple avec Express.js46
  - 4.3.1 Mise en place du serveur46
  - 4.3.2 Pourquoi « index.js » ?47
  - 4.3.3 Explications détaillées du code47
  - 4.3.4 Tester votre serveur48
  - 4.4 Gestion des routes et des requêtes49
  - 4.4.1 Qu'est-ce qu'une API REST ?50
  - 4.4.2 Approfondissement sur les API RESTful52
  - 4.4.3 Différence entre API REST et API RESTful53
  - 4.4.4 Quelques exemples d'opérations de routes CRUD54
  - 4.5 Middleware : enrichir les fonctionnalités d'Express.js57
  - 4.5.1 Fondamentaux des middlewares57
  - 4.5.2 Utilisation des middlewares58
  - 4.5.3 Middlewares répandus59
  - 4.5.4 Création de middlewares personnalisés59
  - 4.5.5 Middleware pour la gestion des erreurs59
  - 4.5.6 Utilisation de middlewares tiers pour la sécurité60
  - 4.5.7 Intégration et configuration des middlewares60
  - 4.5.8 Utilisation de morgan pour la journalisation des requêtes60
  - 4.5.9 Conclusion62
  - 4.6 Exemple : créer un serveur simple avec des routes, requêtes et middlewares63
  - 4.6.1 Initialisation d'un serveur avec Expresses63
  - 4.6.2 Serveur Express en action : message de bienvenue64
  - 4.6.3 Réponse personnalisée basée sur un paramètre d'URL65
  - 4.6.4 Conclusion67
  - 4.7 Exercices : amélioration du serveur simple avec des routes, requêtes et middlewares67
  - 4.7.1 Exercice 1 : ajout d'une nouvelle route68
  - 4.7.2 Exercice 2 : création d'un middleware de journalisation personnalisé69
  - 4.7.3 Exercice 3 : gestion des requêtes POST71
  - 4.7.4 Exercice 4 : middleware pour la gestion des erreurs73
  - 4.7.5 Exercice 5 : validation des entrées utilisateur75
  - 4.7.6 Conclusion76
  - 5. Introduction à MongoDB77
  - 5.1 Qu'est-ce que MongoDB ?77
  - 5.2 Configuration de MongoDB79
  - 5.2.1 Configuration initiale avec MongoDB Atlas80
  - 5.2.2 Utilisation des variables d'environnement pour sécuriser les informations sensibles89
  - 5.2.3 Installation de MongoDB Compass (optionnel)92
  - 5.3 Principes de base de MongoDB : bases de données, collections et documents93
  - 5.4 Opérations CRUD avec MongoDB95
  - 5.5 Exemple : connexion à MongoDB avec le shell MongoDB97
  - 5.6 Exercices : opérations CRUD de base avec MongoDB100
  - 6. Intégration de MongoDB avec Node.js et Expresses102
  - 6.1 Utilisation du pilote MongoDB dans une application Node.js102
  - 6.2 Insertion de documents dans MongoDB via Node.js105
  - 6.3 Mongoose : un ODM pour simplifier les interactions107
  - 6.4 Création d'un modèle de données avec Mongoose111
  - 6.5 Réalisation d'opérations CRUD sur MongoDB via Express.js114
  - 6.6 Exemple : création d'une API RESTful avec Mongoose et Express.js sous seed d'utilisateurs118
  - 6.6.1 Prérequis118
  - 6.6.2 Initialisation du projet119
  - 6.6.3 Mise en place du serveur Express120
  - 6.6.4 Configuration de la connexion à MongoDB121
  - 6.6.5 Définition du modèle utilisateur avec Mongoose122
  - 6.6.6 Création des routes API avec Express.js123
  - 6.6.7 Génération d'utilisateurs factices avec un script de seed125
  - 6.6.8 Conclusion127
  - 6.7 Exercices : amélioration de l'API RESTful avec Mongoose et Express.js129
  - 6.7.1 Objectifs des exercices129
  - 6.7.2 Exercices130
  - 6.7.3 Conclusion132
  - 7. Tests unitaires avec Node.js132
  - 7.1 Introduction aux tests avec Mocha et Chai133
  - 7.1.1 Qu'est-ce que Mocha ?133
  - 7.1.2 Qu'est-ce que Chai ?133
  - 7.1.3 Installation et configuration de Mocha et Chai134
  - 7.1.4 Écriture de tests avec Mocha et Chai134
  - 7.2 Écriture de tests pour les API REST136
  - 7.2.1 Pourquoi tester les API REST ?136
  - 7.2.2 Introduction à Supertest137
  - 7.2.3 Configurer Mocha, Chai et Supertest137
  - 7.2.4 Concepts clés dans les tests d'API141
  - 7.2.5 Bonnes pratiques pour les tests d'API141
  - 8. Conclusion du chapitre142
  - 8.1 Récapitulatif des compétences acquises142
  - 8.2 Meilleures pratiques pour le développement backend avec la stack MERN143
  - 8.3 Ressources pour continuer à apprendre143
  - Chapitre 3
  - Développement frontend
  - 1. Introduction au développement frontend145
  - 1.1 Qu'est-ce que le développement frontend ?146
  - 1.2 Pourquoi choisir React.js pour le frontend ?147
  - 1.3 Introduction à SCSS : avantages par rapport au CSS149
  - 2. Présentation de React.js151
  - 2.1 Fondamentaux de React.js : composants, JSX et Virtual DOM152
  - 2.1.1 Composants152
  - 2.1.2 JSX153
  - 2.1.3 Virtual DOM153
  - 2.2 Installation et configuration de l'environnement React.js154
  - 2.2.1 Création d'une application React avec Create React App155
  - 2.2.2 Structure du projet157
  - 2.2.3 Description des dossiers et fichiers158
  - 2.2.4 Installation des extensions et outils supplémentaires160
  - 2.2.5 Configuration de l'environnement de développement161
  - 2.3 Exemple : création d'une application « Hello World » en React.js161
  - 2.3.1 Etape 1 : modifier le composant principal161
  - 2.3.2 Etape 2 : supprimer les fichiers inutiles162
  - 2.3.3 Etape 3 : nettoyer les fichiers utiles164
  - 2.3.4 Étape 4 : vérifier le résultat166
  - 2.3.5 Étape 5 : ajouter des styles (optionnel)166
  - 2.4 Exercice : modification de l'application « Hello World » pour inclure un compteur de clics169
  - 2.4.1 Étapes à suivre169
  - 2.4.2 Consignes supplémentaires170
  - 2.4.3 Objectifs de l'exercice170
  - 2.4.4 Résultat attendu de l'exercice170
  - 2.5 Conclusion de cette section172
  - 3. Exploration de SCSS172
  - 3.1 Syntaxe et fonctionnalités de base de SCSS173
  - 3.2 Organisation du code avec SCSS : nesting, variables et mixins176
  - 3.3 Exemple : styling d'un composant React avec SCSS179
  - 3.4 Exercice : créer un thème de couleurs avec des variables SCSS et l'appliquer à plusieurs composants184
  - 3.4.1 Étapes à suivre184
  - 3.4.2 Structure de dossier185
  - 3.4.3 Consignes supplémentaires186
  - 3.4.4 Résultat final de l'exercice186
  - 3.5 Conclusion187
  - 4. Développer une interface utilisateur avec React.js et SCSS187
  - 4.1 Introduction à la création d'interfaces utilisateur188
  - 4.1.1 Comprendre l'importance de l'interface utilisateur188
  - 4.1.2 Vue d'ensemble de React.js et SCSS dans le développement d'UI190
  - 4.2 Construction de composants réutilisables191
  - 4.3 Gestion de l'état dans une application React195
  - 4.4 Styling avancé avec SCSS200
  - 4.4.1 Utilisation des mixins et des fonctions pour des styles dynamiques201
  - 4.4.2 Organisation des fichiers SCSS dans un projet React203
  - 4.4.3 Techniques d'optimisation des performances des styles206
  - 4.4.4 Conclusion209
  - 4.5 Exemple : mise en place de la navigation dans une application React avec React Router209
  - 4.5.1 Introduction à React Router209
  - 4.5.2 Configuration de React Router dans une application213
  - 4.5.3 Création de routes dynamiques et nested routes221
  - 4.5.4 Gestion de la navigation et des transitions de pages225
  - 4.5.5 Conclusion233
  - 4.6 Styling d'une barre de navigation en utilisant SCSS233
  - 4.6.1 Structuration de la barre de navigation233
  - 4.6.2 Application des styles de base avec SCSS236
  - 4.6.3 Ajout d'animations et de transitions CSS239
  - 4.6.4 Réactivité et adaptation aux différentes tailles d'écrans245
  - 4.7 Exercices pratiques251
  - 4.7.1 Création de composants réutilisables et stylisés251
  - 4.7.2 Mise en place de la navigation avec React jouter et SCSS251
  - 4.7.3 Intégration de-styles dynamiques et réactifs252
  - 4.8 Conclusion253
  - 4.8.1 Résumé des compétences acquises253
  - 4.8.2 Meilleures pratiques pour le développement d'UI avec React.js et SCSS253
  - 5. Optimisation des performances254
  - 5.1 Techniques d'optimisation des performances pour les applications React255
  - 5.1.1 Utilisation de PureComponent et React.memo255
  - 5.1.2 Code splitting255
  - 5.1.3 Lazy loading des images256
  - 5.1.4 Utilisation de listes virtuelles256
  - 5.1.5 Mémoïsation des fonctions257
  - 5.1.6 Optimisation des sélecteurs avec Reselect257
  - 5.1.7 Éviter les render props et les HOC inutiles257
  - 5.1.8 Profiler et analyser les performances257
  - 5.1.9 Conclusion258
  - 5.2 Exemples : implémentation du lazy loading pour les composants React258
  - 5.2.1 Étape 1 : installer les dépendances nécessaires259
  - 5.2.2 Étape 2 : configurer le lazy loading259
  - 5.2.3 Exemple complet260
  - 5.2.4 Gestion des erreurs avec le lazy loading262
  - 5.2.5 Conclusion264
  - 5.3 Exercice : appliquer le code splitting sur un projet React existant264
  - 5.4 Conclusion266
  - 6. Bonnes pratiques267
  - 6.1 Bonnes pratiques pour le développement frontend avec React.js et SCSS267
  - 6.2 Sécurité dans les applications frontend268
  - 7. Conclusion269
  - 7.1 Résumé des compétences acquises269
  - 7.2 Perspectives d'évolution dans le développement frontend270
  - Chapitre 4
  - Conclusion, conseils et prochaines étapes
  - 1. Introduction273
  - 2. Récapitulation des concepts clés274
  - 2.1 Les fondamentaux de la stack MERN : vue d'ensemble et importance274
  - 2.2 Les meilleures pratiques adoptées : sécurité, optimisation et déploiement275
  - 3. Conseils pour les développeurs MERN276
  - 3.1 Amélioration continue des compétences : ressources d'apprentissage et communautés276
  - 3.2 Exploration de technologies complémentaires : outils et librairies pour étendre vos applications277
  - 4. Stratégies de résolution de problèmes279
  - 4.1 Débogage et tests : approches et outils recommandés279
  - 4.2 Maintien et mise à jour des applications : best practices pour une application pérenne280
  - 5. Perspectives d'évolution de la stack MERN282
  - 5.1 Tendances actuelles et innovations : vue d'ensemble du paysage technologique282
  - 5.2 Préparation à l'avenir : se tenir informé et adaptable284
  - 6. Encouragement à la contribution communautaire285
  - 6.1 Partage des connaissances et retour d'expérience : importance de la contribution aux forums, blogs et GitHub286
  - 6.2 Mentorat et enseignement : contribuer à l'éducation et au développement de la communauté MERN287
  - 7. Conclusion finale288
  - 7.1 Le voyage continu du développeur MERN : réflexions finales et encouragement289
  - 7.2 Invitation à l'action Commencer des projets, expérimenter et apprendre continuellement289
  - 7.3 Votre futur en tant que développeur d'applications web ?290
  - Index291
Origine de la notice:
- BPI