Creare un’applicazione universale (o isomorfica) con ReactJS implica la creazione di un’applicazione che può essere eseguita sia dal lato server che dal lato client (navigatore). Questo tipo di applicazione ha il vantaggio di providere un caricamento iniziale più rapido, migliorare la SEO e aumentare le prestazioni generali.
Ecco i passaggi di base per creare un’applicazione universale con ReactJS:
1. Installazione:
Per iniziare, avrai bisogno di Node.js e npm (Node Package Manager) installati sulla tua macchina. Una volta fatto, puoi installare ReactJS con il seguente comando:
```
npm install -g create-react-app
```
1. Creazione di un nuovo progetto:
Creare un nuovo progetto ReactJS con il seguente comando:
```
create-react-app my-universal-app
```
Entrare nella cartella del progetto:
```
cd my-universal-app
```
1. Installazione di Express:
Express è un framework per applicazioni web Node.js minimo e flessibile che fornisce un robusto insieme di funzionalità per le applicazioni web e mobile. Sarà utilizzato per creare il server. È possibile installarlo con il seguente comando:
```
npm install —save express
```
1. Configurazione del server
Creare un nuovo file, come `server.js`, e aggiungere il codice per configurare un server Express. Questo server servirà la nostra applicazione ReactJS.
Ecco un esempio di come potrebbe apparire il tuo `server.js`:
```
var express = require(‘express’);
var path = require(‘path’);
var app = express();
app.use(express.static(path.join(__dirname, ‘build’)));
app.get(‘/*’, function (req, res) {
res.sendFile(path.join(__dirname, ‘build’, ‘index.html’));
});
var port = process.env.PORT || 9000;
app.listen(port, function () {
console.log(‘Server listening on port ‘ + port);
});
```
1. Modificare il package.json
Modificare il file `package.json` per avviare il server Express invece del server di sviluppo ReactJS. Aggiungere un nuovo script, come “start:prod”, che avvierà il nostro server Express.
L’aggiunta al file `package.json` dovrebbe assomigliare a ciò:
```
“scripts”: {
“start”: “react-scripts start”,
“start:prod”: “node server.js”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject“
}
```
1. Costruire ed eseguire l’applicazione
Costruire l’applicazione con il seguente comando:
```
npm run build
```
Una volta completata la costruzione, è possibile avviare l’applicazione con il seguente comando:
```
npm run start:prod
```
Ora la tua applicazione ReactJS dovrebbe essere in esecuzione sul server e accessibile all’URL `http://localhost:9000`.
Nota: per utilizzare il rendering lato server con React, avrai bisogno di utilizzare metodi specifici come `ReactDOMServer.renderToString()` per il rendering del tuo componente principale da inviare al client. Questo è fuori dall’ambito di questa soluzione, ma ci sono molte risorse disponibili online per aiutarti a impostare il rendering lato server con React.
