Rich text languages/mern-stack-tutorial

Background Wrapper languages/mern-stack-tutorial

Si vous êtes un apprenant visuel, consultez la version vidéo de ce tutoriel.

Slalom mern-stack-tutorial

Default

lsxl2xv3wufbz9728-Mern-stack.png

(N’hésitez pas à coder avec nous ou à télécharger le code complet depuis le 

MERN nous permet de créer des solutions full-stack. Pour exploiter tout son potentiel, nous allons donc créer un projet de pile MERN. Pour ce projet, nous créerons à la fois un back end et une interface. L’interface sera implémentée avec React et le back end sera implémenté avec MongoDB, Node.js et Express. Nous appellerons le 

Commençons par créer un répertoire vide : 

. Ce dossier contiendra nos dossiers client et serveur.

Ensuite, créez un dossier pour le back end et nommez-le « server ». Nous allons initialiser le fichier 

, le format standard officiellement pris en charge pour empaqueter du code JavaScript à des fins de réutilisation, nous allons ajouter une ligne au fichier 

Nous installerons également les dépendances.

La commande ci-dessus installe trois packages différents :

Nous pouvons vérifier les dépendances installées dans le fichier package.json. Celui-ci doit lister les packages et leurs versions.

Après avoir vérifié que les dépendances ont été correctement installées, nous créons un fichier appelé 

 permet d’accéder à la variable port du 

Il est temps de connecter notre serveur à la base de données. Nous utiliserons MongoDB Atlas comme base de données. MongoDB Atlas est un service de base de données basé sur le cloud qui offre une sécurité et une fiabilité des données robustes. MongoDB Atlas propose un cluster gratuit qui n’expire jamais et qui vous permet d’accéder à un sous-ensemble de caractéristiques et de fonctionnalités d’Atlas.

 pour créer un compte, déployer votre premier cluster et localiser la chaîne de connexion de votre cluster.

Maintenant que vous avez la chaîne de connexion, revenez au répertoire du serveur et créez un fichier « config.env ». Là, attribuez la chaîne de connexion à une nouvelle variable 

. Une fois terminé, votre fichier devrait ressembler à celui ci-dessous. Remplacez 

par le nom d’utilisateur, le mot de passe, le nom du cluster et l’ID du projet de votre base de données.

Créez un dossier sous le répertoire du 

 et, à l’intérieur de celui-ci, un fichier nommé 

. Nous pouvons y ajouter le code suivant pour nous connecter à notre base de données :

Nous avons terminé la configuration de la base de données et du serveur. Passons maintenant aux points de terminaison de l’API. Commençons par créer un dossier 

. Revenez à votre répertoire « server » et créez le nouveau répertoire et le nouveau fichier :

 contiendra également les lignes de code suivantes :

Si vous exécutez l’application à ce stade, vous obtiendrez le message suivant dans votre terminal lorsque la connexion sera établie. Notez que nous utilisons la fonctionnalité de variable d’environnement intégrée dans les dernières versions de Node.js.

C’est tout pour le back end. Passons maintenant au front end.

, une manière moderne de créer une application React. Dans un nouveau terminal dans le répertoire 

Pour notre projet, nous allons utiliser quelques dépendances supplémentaires. Nous commencerons par 

Ensuite, nous allons modifier le champ de contenu dans le fichier 

, nous devons ajouter les directives Tailwind et supprimer tout le reste.

Tailwind est un framework CSS utilitaire qui vous permet d’ajouter des styles CSS en utilisant des noms de classes prédéfinis. Et React Router ajoute le routage de page côté client à React !

Nous avons configuré les routes de notre page d’application dans la variable 

 pour synchroniser notre UI avec l’URL. 

 permet des transitions fluides lors du passage d’un composant à l’autre. En fait, il ne rechargera ou n’actualisera que le composant qui doit être modifié au lieu d’actualiser ou de recharger la page entière. Bien que React Router ne soit pas une nécessité, il est important si vous voulez que votre application soit réactive.

Créons maintenant les composants que nous avons définis dans nos routes. Créez un dossier 

. Pour chaque composant que nous créons, nous ajouterons un nouveau fichier 

Chaque fichier doit ressembler à ce que montrent les instantanés ci-dessous.

Dans le composant navbar.js, nous allons créer une barre de navigation qui nous reliera aux composants requis à l’aide du code suivant.

Le code suivant servira de composant de visualisation pour nos enregistrements. Il récupérera tous les enregistrements de notre base de données via une méthode GET.

mern/client/src/components/RecordList.jsx

Le code suivant servira de composant de formulaire pour créer ou mettre à jour des enregistrements. Ce composant enverra une commande de création ou de mise à jour à notre serveur.

Nous ajoutons maintenant ce qui suit au fichier 

Il s’agit de notre composant de mise en page principal. Notre 

 sera toujours située en haut de chaque page et l’

 acceptera les composants enfants que nous avons définis précédemment dans nos 

Nous avons terminé le processus de création des composants. Nous avons également connecté notre application React au back end à l’aide de 

, qui permet de gérer les requêtes HTTP de manière plus claire et plus simple. Dans 

, nous avons ajouté le code suivant au bloc 

. Lorsqu’une requête POST ou PATCH est envoyée à l’URL, 

 ajoute un nouvel enregistrement à la base de données ou met à jour un enregistrement existant dans la base de données.

Nous avons également placé le bloc de code suivant dans 

 sous le bloc constructeur afin de charger un enregistrement existant, le cas échéant.

 récupère les enregistrements de la base de données. Nous allons donc utiliser la 

 pour récupérer ces enregistrements. Pour ce faire, nous avons ajouté les lignes de code suivantes au-dessus de la fonction 

Après avoir tout fermé, suivez ces étapes pour démarrer l’application :

Voici à quoi ressemblera la page d’accueil du composant d’enregistrement une fois que nous aurons ajouté des enregistrements pour « Jesse Hall », « Kushagra Kesav » et « Stanimira Vlaeva » via le bouton « Créer un employé ».

L’écran qui vous permet d’ajouter un employé ressemble à ceci :

Félicitations ! Vous avez créé votre première application MERN. Pour d’autres idées et concepts avancés, consultez notre 

, et n’hésitez pas à poser vos questions dans nos 

Rich text2 languages/mern-stack-tutorial

Démarrer avec MongoDB Atlas

SEO Section Overview-mern-stack-tutorial

Présentation de MongoDB 8.0, la plus rapide des MongoDB ! En savoir plus &gt;

Voyage AI rejoint MongoDB pour développer des applications d'IA plus précises et plus fiables sur Atlas. En savoir plus >

Vous aurez besoin d’un accès à une base de données MongoDB Atlas pour ce tutoriel. Si vous n’avez pas de compte, vous pouvez vous inscrire gratuitement pour suivre le tutoriel.

Comment utiliser la pile MERN : guide complet

Démarrer avec MongoDB Atlas