Creare e Eseguire un Progetto React

Che cos'è React?

React è una libreria JavaScript open-source utilizzata per costruire interfacce utente, mantenuta da Facebook. Si concentra sulla costruzione del livello di visualizzazione e consente agli sviluppatori di costruire interfacce utente complesse in modo efficiente attraverso componenti. Il principio fondamentale di React è costituito dai componenti e dal flusso di dati unidirezionali, che rendono il codice più facile da comprendere e mantenere.

Principali caratteristiche e vantaggi di React

Componentizzazione: La costruzione dell'interfaccia utente tramite componenti rende il codice più modulare e riutilizzabile.
DOM virtuale: React utilizza un DOM virtuale per ottimizzare le prestazioni, aggiornando il DOM reale solo quando necessario.
Flusso di dati unidirezionale: I dati fluiscono in una sola direzione tra i componenti, rendendo la gestione dello stato dell'applicazione più chiara e prevedibile.
Ampia comunità ed ecosistema: React vanta una vasta comunità e supporto di librerie di terze parti, rendendo lo sviluppo più conveniente.

Usare React può aiutare gli sviluppatori a costruire applicazioni Web moderne e reattive in modo più efficiente.

Creare e Eseguire un Progetto React con ServBay

In questo articolo, utilizzeremo l'ambiente Node.js fornito da ServBay per creare ed eseguire un progetto React. Useremo la funzione 'Hosting' di ServBay per impostare il server Web, e accedere al progetto mediante proxy inverso e servizi di file statici.

Creare un Progetto React

Inizializzare il Progetto
Prima di tutto, assicurati di aver installato l'ambiente Node.js fornito da ServBay. Poi, utilizza il seguente comando per inizializzare un nuovo progetto React:
bash
```
cd /Applications/ServBay/www
npx create-react-app servbay-react-app
```
1
2
Installare le Dipendenze
Entra nella directory del progetto e installa le dipendenze:
bash
```
cd servbay-react-app
npm install
```
1
2

Modificare il Contenuto del Progetto React

Modificare il file src/App.js

Apri il file src/App.js e modifica il contenuto per fare in modo che la pagina Web visualizzi "Hello ServBay!":

javascript

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello ServBay!</h1>
      </header>
    </div>
  );
}

export default App;

Entrare in Modalità di Sviluppo

Eseguire il Server di Sviluppo
Avvia il server di sviluppo e specifica la porta (ad esempio: 8585):
bash
```
npm start -- --port 8585
```
1
Questo avvierà un server di sviluppo locale e esporrà la porta 8585.
Configurare il Proxy Inverso dell'Hosting di ServBay
Utilizza la funzione 'Hosting' di ServBay per accedere al server di sviluppo tramite proxy inverso. Nelle impostazioni di 'Hosting' di ServBay, aggiungi un nuovo proxy inverso:
- Nome: Il mio primo sito React di sviluppo
- Dominio: servbay-react-test.dev
- Tipo di hosting: Proxy inverso
- IP: 127.0.0.1
- Porta: 8585
Per i dettagli sulle impostazioni, consulta aggiungere un sito di sviluppo Node.js.
Accedere alla Modalità di Sviluppo
Apri il browser e visita https://servbay-react-test.dev per vedere il progetto in tempo reale. Grazie al supporto di ServBay per domini personalizzati e certificati SSL gratuiti, godrai di maggiore sicurezza.

Costruire la Versione di Produzione

Costruire la Versione di Produzione
Al termine dello sviluppo, usa il seguente comando per costruire la versione di produzione:
bash
```
npm run build
```
1
Dopo la costruzione, i file statici generati saranno nella directory build.
Impostare il Servizio di File Statici
Utilizza la funzione 'Hosting' di ServBay per accedere alla versione di produzione tramite servizio di file statici. Nelle impostazioni di 'Hosting' di ServBay, aggiungi un nuovo sito statico:
- Nome: Il mio primo sito React di produzione
- Dominio: servbay-react-test.prod
- Tipo di hosting: Statico
- Directory radice del sito: /Applications/ServBay/www/servbay-react-app/build
Accedere alla Modalità di Produzione
Apri il browser e visita https://servbay-react-test.prod per vedere la versione di produzione. Grazie ai domini personalizzati e ai certificati SSL gratuiti di ServBay, il tuo sito sarà più sicuro e affidabile.

Seguendo questi passaggi, avrai creato e eseguito con successo un progetto React, utilizzando le funzioni fornite da ServBay per gestire e accedere al tuo progetto.