React (noto anche come ReactJS) è molto simile per funzionalità e caratteristiche ad AngularJS; che viene utilizzato per progettare applicazioni front-end. La libreria JavaScript e il gruppo di API e funzionalità predefinite consentono agli sviluppatori di progettare progetti di interfacce utente interattive. La differenza fondamentale tra ReactJS e AngularJS è che mentre AngularJS è utilizzato principalmente per la progettazione e l'implementazione di applicazioni web; ReactJS può essere preferito per applicazioni a pagina singola o anche per applicazioni mobili, oltre a disporre di librerie dedicate adatte allo scopo specifico.

Al contrario di ReactJS, NodeJS si concentra sulla funzionalità lato server e viene utilizzato per codificare le librerie JavaScript che vengono eseguite al di fuori del browser Internet.

Motivo dietro l'integrazione di NodeJS e ReactJS

Come già accennato nella sezione precedente; NodeJS è completamente diverso per funzionalità o usabilità da ReactJS: mentre uno viene eseguito sul lato client, l'altro viene eseguito sul lato server.

Ora, non tutti i codici e la logica di business vengono eseguiti dal client (cioè dal browser). Esistono determinati requisiti in cui è necessario eseguire convalide specifiche o logica aziendale sul lato server. In tali situazioni, ReactJS è integrato con NodeJS in modo che la richiesta inviata da ReactJS venga intercettata da NodeJS all'estremità del server; e vengono eseguiti i processi di convalida richiesti.

Configurazione dell'API React sul server NodeJS

Il primo passo per configurare un'applicazione React è installare lo strumento "create React App" che può assistere nel processo di sviluppo front-end. Questa applicazione, tuttavia, non supporta le esecuzioni lato server. Per questo, i passaggi successivi mostrerebbero come un "server Express Node" possa essere collegato dinamicamente all'API React.

Una volta eseguito il codice precedente; l'applicazione React è pronta per essere distribuita. Il passaggio successivo si concentrerà sull'integrazione di questo con un server Node. Le dipendenze del server possono essere integrate utilizzando il frammento di codice riportato di seguito.

Come mostrato nella figura, l'ambiente Node è stabilito nel codice. Ci sono quattro fattori chiave che devono essere presi in considerazione:

1. 'Node-env-run' - Questa funzione aiuta a caricare tutte le variabili d'ambiente relative alle librerie NodeJS per ulteriore riferimento
2. 'Nodemon': questa funzione riavvia automaticamente il server NodeJS non appena vengono apportate modifiche al sistema esistente
3. 'Npm-run-all': questa funzione consente agli sviluppatori di eseguire più script NodeJS contemporaneamente sul server
4. Oltre a queste funzioni, ci sono anche alcune funzioni del logger a cui si fa riferimento per garantire una corretta registrazione del server

Pertanto, in questa fase, il server inizia a funzionare. Tuttavia, al fine di ottenere il risultato desiderato; sia il server Node che lo script client ReactJS devono essere eseguiti contemporaneamente; che sarebbe trattato nella sezione finale dell'articolo.

Esecuzione simultanea dell'applicazione React e del server Node

Durante l'esecuzione o l'avvio di entrambi singolarmente potrebbe essere abbastanza semplice; eseguirli entrambi in sincronia tra loro richiede un paio di passaggi in più. Il primo passo riguarda la creazione di un "proxy"; che a sua volta deve essere puntato allo stesso IP e porta in cui è in esecuzione il server.

Una volta che il proxy del server è puntato alla porta specificata; il passo successivo è usare le due funzioni: "npm-run-all" (che consentirebbe agli sviluppatori di eseguire più funzioni sul server) e "run-p" che assicurerebbe che i processi vengano eseguiti in parallelo l'uno con l'altro. Lo script utilizzato per eseguire questa operazione è menzionato di seguito come riferimento:

L'esecuzione dello script precedente assicurerebbe che sia il server Node che l'applicazione React vengano eseguiti contemporaneamente.