Rich text languages/mern-stack-tutorial

Background Wrapper languages/mern-stack-tutorial

Se ti è più facile apprendere guardando video e immagini, dai un'occhiata alla versione video di questo tutorial.

Slalom mern-stack-tutorial

Default

lsxl2xv3wufbz9728-Mern-stack.png

(Inserisci pure il codice man mano che leggi il tutorial o scarica il codice completo dal 

MERN ci consente di creare soluzioni full-stack. Quindi, per sfruttarne appieno il potenziale, creeremo un progetto stack MERN. Per questo progetto, creeremo sia un backend che un frontend. Il frontend sarà implementato con React e il backend sarà implementato con MongoDB, Node.js ed Express. Chiameremo il 

. Questa cartella conterrà le nostre cartelle client e server.

Quindi, creiamo una cartella per il backend e denominiamola server. Dopodiché, inizializzeremo il file 

, il formato standard ufficialmente supportato per impacchettare il codice JavaScript da riutilizzare, aggiungeremo una riga al file 

Il comando sopra installa tre diversi pacchetti:

Possiamo controllare le dipendenze installate nel file package.json. Dovrebbe elencare i pacchetti insieme alle loro versioni.

Dopo esserci assicurati che le dipendenze siano state installate correttamente, creiamo un file chiamato 

 accederà alla variabile porta dal file 

È il momento di collegare il nostro server al database. Utilizzeremo MongoDB Atlas come database. MongoDB Atlas è un servizio di database basato su cloud che offre una solida sicurezza e affidabilità dei dati. MongoDB Atlas fornisce un cluster di livello gratuito che non scade mai e consente di accedere a un sottoinsieme di caratteristiche e funzionalità di Atlas.

 per creare un account, distribuire il tuo primo cluster e individuare la stringa di connessione del tuo cluster.

Ora che hai la stringa di connessione, torna alla directory del server e crea un file config.env. Qui, assegna la stringa di connessione a una nuova variabile 

. Una volta terminato, il file dovrebbe apparire simile a quello qui sotto. Sostituisci 

con il nome utente, la password, il nome del cluster e l'ID del progetto del tuo database.

Crea una cartella sotto la directory del 

. Lì possiamo aggiungere il seguente codice per connetterci al nostro database:

Database completato. Server completato. Ora è il momento degli endpoint API. Iniziamo creando una cartella 

 al suo interno. Torna alla directory "server" e crea la nuova directory e il nuovo file:

 conterrà anche le seguenti righe di codice:

Se esegui l'applicazione a questo punto, riceverai il seguente messaggio nel tuo terminale, mentre si stabilisce la connessione. Notare che stiamo utilizzando la funzionalità delle variabili di ambiente integrata delle versioni più recenti di Node.js.

Questo è tutto per il backend. Ora inizieremo a lavorare sul frontend.

, un modo moderno per creare un'applicazione React. In un nuovo terminale all'interno della directory 

Ci sono alcune dipendenze aggiuntive che verranno utilizzate nel nostro progetto. Inizieremo con 

Successivamente, modificheremo il campo del contenuto nel file 

 dobbiamo aggiungere le direttive Tailwind ed eliminare tutto il resto.

Tailwind è un framework CSS utility-first che consente di aggiungere stili CSS utilizzando nomi di classe predefiniti. E React Router aggiunge il routing delle pagine lato client a React!

Abbiamo impostato i percorsi della nostra pagina applicativa nella variabile 

 per mantenere la nostra IU sincronizzata con l'URL. 

 aiuta con transizioni senza interruzioni durante il passaggio da un componente all'altro. In pratica, ricaricherà o aggiornerà solo il componente che deve essere modificato, invece di aggiornare o ricaricare l'intera pagina. Sebbene React Router non sia obbligatorio, è importante se vuoi che la tua app sia reattiva.

Successivamente, creiamo i componenti che abbiamo definito nei nostri percorsi. Crea una cartella 

. Per ogni componente che creiamo, aggiungeremo un nuovo file 

Gli snapshot seguenti mostrano l'aspetto di ciascun file.

Nel componente navbar.js, creeremo una barra di navigazione che ci collegherà ai componenti necessari utilizzando il seguente codice.

Il seguente codice servirà come componente di visualizzazione per i nostri record. Recupererà tutti i record nel nostro database attraverso un metodo GET.

mern/client/src/components/RecordList.jsx

Il codice seguente fungerà da componente del modulo per creare o aggiornare i record. Questo componente invierà un comando di creazione o un comando di aggiornamento al nostro server.

Questo è il nostro principale componente di layout. Il componente 

 sarà sempre nella parte superiore di ogni pagina e l'

 accetterà i componenti figli che abbiamo definito nei nostri 

Abbiamo completato il processo di creazione dei componenti. Abbiamo anche collegato la nostra app React al backend tramite 

, che offre modi più puliti e semplici per gestire le richieste http. In 

, abbiamo aggiunto il seguente codice al blocco 

. Quando una richiesta POST o PATCH viene inviata all'URL, 

 aggiungerà un nuovo record al database o aggiornerà un record esistente nel database.

Abbiamo anche inserito il seguente blocco di codice in 

 sotto il blocco del costruttore per caricare un record esistente, se presente.

 recupera i record dal database, quindi useremo il metodo 

 per recuperare i record dal database. Per raggiungere questo obiettivo, abbiamo aggiunto le seguenti righe di codice sopra la funzione 

Dopo aver chiuso tutto, per avviare l'app, segui i passaggi seguenti:

Ecco come apparirà la pagina di destinazione del componente record dopo aver aggiunto i record per "Jesse Hall", "Kushagra Kesav" e "Stanimira Vlaeva" tramite il pulsante "Create Employee".

Ecco come apparirà la schermata che ti permetterà di aggiungere un dipendente:

Congratulazioni per aver creato la tua prima applicazione MERN. Per ulteriori idee e concetti avanzati, visita il nostro 

 e se hai delle domande, pubblicale nei nostri 

Rich text2 languages/mern-stack-tutorial

Primi passi con MongoDB Atlas

SEO Section Overview-mern-stack-tutorial

Ti presentiamo MongoDB 8.0, il MongoDB più veloce di sempre! Leggi &gt;&gt;

Ti presentiamo MongoDB 8.0, il MongoDB più veloce di sempre! Leggi &gt;

Voyage AI si unisce a MongoDB per potenziare applicazioni AI più accurate e affidabili su Atlas. Scopra di più >

Avrai bisogno di accedere a un database MongoDB Atlas per questo tutorial. Se non hai un account, puoi registrarti gratuitamente per seguirlo.

Come utilizzare lo stack MERN: una guida completa

Primi passi con MongoDB Atlas