Come configurare react.JS sul lato client nello sviluppo di stack Mern

Reagire.js è considerato il livello superiore nello sviluppo di Mern Stack. È un dichiarativo JavaScript Framework utilizzato per sviluppare applicazioni dinamiche sul lato client. Ti consente inoltre di creare interfacce complesse collegando i componenti dei dati dal server backend e quindi rendendoli come HTML. React eccelle anche nella gestione delle interfacce basate sui dati e statali con codice minimo e altre funzionalità come la gestione degli errori, elenchi, forme, eventi, che ti aspetti da un moderno framework Web.

Questo articolo dimostrerà come farlo impostare IL Reagire.js applicazione su dalla parte del cliente In Sviluppo di Mern Stack. Quindi iniziamo!

Nota: Assicurati di avere "Nodo.js"Installato sul tuo sistema. Installalo prima di saltare in React.JS Sviluppo delle applicazioni Se non lo hai già.

Come configurare react.JS sul lato client nello sviluppo di stack Mern

Nodo.JS ha anche un "npm"Node Package Manager, che installerà tutti i pacchetti JavaScript richiesti nella tua reazione.Progetto JS. Comprende anche uno strumento di pacchetto nodo "npx"Strumento che è possibile utilizzare per l'esecuzione di pacchetti eseguibili.

Per impostare React.js sul lato client nello sviluppo di stack Mern, è necessario prima selezionare una directory per installare la reazione.Progetto basato su JS. Puoi usare il "Prompt dei comandi" per questo scopo. Tuttavia, utilizzeremo il "Codice Visual Studio"Terminale, rendendo facile operare con la reazione.Applicazione JS.

Per farlo, in primo luogo, cerca il "Codice Visual Studio"Applicazione e aprila:

Nell'applicazione aperta, fai clic su "File"Opzione della barra dei menu e selezionare"Cartella aperta" opzione:

Ora, naviga per la cartella in cui vuoi posizionare la tua reazione.File relativo all'applicazione JS. Nel nostro caso, abbiamo selezionato il "Dipendente-merrico-progetto"Cartella, presente in"Disco locale (e :)":

Successivamente, premere Ctrl + Shift + ' Per aprire il terminale del codice Visual Studio. È inoltre possibile eseguire l'operazione specificata con l'aiuto del menu "terminale":

A questo punto, siamo tutti pronti a impostare la reazione.Applicazione JS in Mern Stack Development. L'esecuzione del “npxComando "con il"Crea-react-app"L'opzione ti aiuta a creare una reazione.Applicazione JS. Ad esempio, il sottoto "npxIl comando "creerà un"Mern-Emsystem"React.Applicazione JS che avrà tutte le dipendenze richieste nella cartella del progetto:

> NPX Crea-React-app Mern-Emsystem

Attendi qualche minuto, poiché l'installazione dei pacchetti richiederà del tempo:

L'output privo di errori di seguito indica che abbiamo installato correttamente "Mern-Emsystem"React.Applicazione JS:

Il codice Visual Studio caricherà automaticamente Crea React.cartella dell'applicazione JS. Ora faremo alcune modifiche nel "indice.html"File del"Mern-Emsystem"React.Applicazione JS:

IL "indice.html"File della tua reazione.L'applicazione JS sembrerà in qualche modo questo:

Qui, "React app"Rappresenta il"titolo" del nostro "Mern-Emsystem" applicazione:

Utilizzeremo la reazione creata.Applicazione JS per lo sviluppo di un sistema di gestione dei dipendenti con Mern Stack. Quindi, in primo luogo, cambieremo il titolo del nostro "Mern-Emsystem"React.applicazione JS a “Sistema di gestione dei dipendenti"E salva l'apertura"indice.html" file:

Nel prossimo passaggio, cambieremo l'attuale directory di lavoro in "Mern-Emsystem"Utilizzando il terminale:

> CD Mern-Emsystem

Ora, scrivi il sottoto "npm"Comando per l'avvio dello sviluppo del server web:

> NPM Avvia

Come puoi vedere dall'output che il nostro "Mern-Emsystem"Il progetto è compilato correttamente e pronto per la visualizzazione nel browser:

Digitando il "Localhost: 3000"Nella barra degli indirizzi del nostro browser, vedremo la seguente interfaccia per"Mern-Emsystem"React.Applicazione JS:

Puoi anche cambiare il contenuto di "App.js"File JavaScript per la gestione o la visualizzazione dei componenti dell'applicazione React:

Ad esempio, aggiungendo il seguente codice nel nostro "App.jsIl file "salverà il"Sistema di gestione dei dipendenti"Contenuto all'interno di un contenitore:

importazione./App.CSS ';
function app ()
ritorno (

Sistema di gestione dei dipendenti

);

Esporta app predefinita;

Dall'immagine qui sotto, puoi vedere che l'aggiunta "Sistema di gestione dei dipendenti"Contenuto per la nostra reazione.L'applicazione JS viene visualizzata correttamente:

Si trattava di una procedura di creazione di reazione.Applicazione JS sul lato client nello sviluppo di Stack Mern. Puoi fare ulteriore personalizzazione in base alle tue esigenze.

Conclusione

Reagire.JS è una libreria JavaScript utilizzata per sviluppare il front-end delle applicazioni basate su Mern Stack. Permette agli utenti di creare componenti dell'interfaccia utente e codice in JavaScript. A causa della sua capacità di gestire il rapido cambiamento nei dati e creare una forte connessione con il back-end, è comunemente usato nello sviluppo delle applicazioni Mern Stack. Questo articolo ha dimostrato la procedura di configurazione Reagire.js applicazione su dalla parte del cliente In Sviluppo di Mern Stack.