Come configurare un progetto React con Vite

Tutorial
JavaScript React

L’autore ha selezionato Code.org per ricevere una donazione come parte del programma Scrivi per le Donazioni.

Introduzione

Normalmente, potresti creare un nuovo progetto utilizzando Create React App, ma può richiedere molto tempo installare oltre 140 MB di dipendenze. Vite è uno strumento leggero che richiede solo 31 MB di dipendenze, il che risparmierà tempo nell’avviare un nuovo progetto. Vite utilizza anche i moduli ES (ECMAScript) nativi del browser per collegarsi ai file JavaScript, il che non ricompila l’intero bundle dopo ogni modifica del file. Queste differenze si traducono in un’esperienza più veloce durante la creazione, l’aggiornamento e la costruzione di un’app React con Vite.

Questo tutorial costruirà una nuova app React utilizzando lo strumento Vite. Creerai un’app di base con un nuovo componente, CSS e un file immagine, e preparerai un bundle ottimizzato per il rilascio.

Semplifica il rilascio delle applicazioni React con DigitalOcean App Platform. Rilascia React direttamente da GitHub in pochi minuti.

Prerequisiti

Per seguire questo tutorial, avrai bisogno dei seguenti:

Passo 1 — Creare un Progetto Vite

In questo passo, creerai un nuovo progetto React utilizzando lo strumento Vite da riga di comando. Utilizzerai il gestore di pacchetti yarn per installare ed eseguire gli script.

Esegui il seguente comando nel tuo terminale per creare un nuovo progetto Vite:

  1. yarn create vite

Questo comando eseguirà l’eseguibile Vite dal repository remoto di npm. Configurerà gli strumenti necessari per creare un ambiente di sviluppo locale in React. Infine, aprirà un menu a riga di comando per le impostazioni del progetto e il tipo di linguaggio.

Dopo che lo script sarà terminato, ti verrà chiesto di inserire il nome del progetto:

Output
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "[email protected]" with binaries:
- create-vite
- cva
? Project name: » vite-project

Digita il nome del tuo progetto (in questo tutorial useremo digital-ocean-vite come esempio di nome):

  1. digital-ocean-vite

Dopo aver inserito il nome del progetto, Vite ti chiederà di selezionare un framework:

Output
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Others

Vite ti consente di avviare diversi tipi di progetti, non solo React. Attualmente supporta React, Preact, Vue, Lit, Svelte e progetti JavaScript vanilla.

Usa il tasto freccia della tastiera per selezionare React.

Dopo aver selezionato il framework React, Vite ti chiederà di scegliere il tipo di linguaggio. Puoi utilizzare JavaScript o TypeScript per lavorare sul tuo progetto.

Usa i tasti freccia per selezionare JavaScript:

Output
? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
JavaScript + SWC
TypeScript + SWC

Dopo aver configurato il framework, vedrai un output che indica che il progetto è stato creato. Vite ti indicherà quindi di installare le dipendenze utilizzando Yarn:

Output
Done:
Scaffolding project in path\to\digital-ocean-vite...

Done. Now run:

cd digital-ocean-vite
yarn
yarn dev

Done in 129.89s.

Segui le istruzioni per navigare nella cartella del tuo progetto:

  1. cd digital-ocean-vite

Successivamente, utilizza il comando yarn per installare le dipendenze del progetto.

  1. yarn

Quando il processo di installazione delle dipendenze è completato, verrà restituito un output con il tempo impiegato per installare le dipendenze:

Output
success Saved lockfile.
Done in 43.26s.

Hai ora configurato un nuovo progetto React utilizzando Vite e installato i pacchetti richiesti da React e Vite.

Successivamente, avvierai il server di sviluppo per testare l’applicazione.

Passaggio 2 — Avvio del Server di Sviluppo

In questo passaggio, avvierai il server di sviluppo per verificare che tutto funzioni correttamente.

Dall’interno della cartella digital-ocean-vite, utilizza il seguente comando per avviare il server di sviluppo:

  1. yarn run dev

Questo comando è un alias del comando vite. Esso avvierà il tuo progetto in modalità di sviluppo.

Riceverai l’output seguente:

Output
VITE v4.0.4 ready in 847 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help

Successivamente, apri il tuo browser e visita http://localhost:5173/. Il progetto React predefinito sarà in esecuzione sulla porta 5173:

Quando vedi questa app in esecuzione, hai installato con successo React con Vite. Successivamente, potrai visualizzare un’anteprima della tua app dal tuo telefono cellulare.

Passaggio 3 — Anteprima della Tua App dal Telefono Cellulare

Vite non espone la tua applicazione di sviluppo alla tua rete per impostazione predefinita. In questo passaggio, esporrai l’app alla tua rete locale per visualizzarla dal tuo telefono cellulare.

Per eseguire la tua app nella rete locale, devi prima fermare il server attuale. Nel terminale, usa CTRL+C per interrompere il server di sviluppo in esecuzione attualmente.

Successivamente, utilizza il seguente comando per eseguire il tuo progetto:

  1. yarn run dev --host

Il flag --host indica a Vite di esporre la tua app alla rete locale.

Riceverai questo output nel tuo terminale:

Output
VITE v4.0.4 ready in 747 ms

➜ Local: http://localhost:5173/
➜ Network: http://your_ip_address:5173/
➜ press h to show help

Si tratta di un indirizzo IP locale, univoco per la tua rete informatica o router.

Apri un browser sul tuo telefono cellulare, quindi digita l’indirizzo IP e la porta sopra indicati per accedere all’anteprima della tua app Vite dal tuo telefono cellulare:

Ora hai eseguito la tua app nell’ambiente di sviluppo e verificato che funziona. Nel prossimo passo, rimuoverai il codice boilerplate fornito con Vite.

Passo 4 — Rimozione del Boilerplate Predefinito

In questo passaggio, rimuoverai i file boilerplate del progetto Vite dalla directory src/, consentendoti di configurare una nuova applicazione. Ti familiarizzerai anche con la struttura predefinita del progetto dell’app attuale.

Usa il seguente comando per visualizzare il contenuto della tua directory src/:

  1. ls src/

L’output elencherà tutti i file disponibili:

Output
App.css
App.jsx
assets
index.css
main.jsx

Usa il comando rm per eliminare un file o una directory. Usa i seguenti comandi per eliminare i file predefiniti dal progetto:

  1. rm src/App.css

  2. rm src/App.jsx

  3. rm src/index.css

Elimina la directory assets usando il seguente comando:

  1. rm -r src/assets

Il flag -r è un’operazione ricorsiva, necessaria quando si elimina una directory insieme ai suoi contenuti.

Dopo aver eliminato questi file, rimarrà solo il file main.jsx nella directory src/. Esegui nuovamente il comando ls src/ per vedere i file rimanenti:

  1. ls src/

Adesso, la directory conterrà solo il file main.jsx:

Output
main.jsx

Poiché hai rimosso tutti gli altri file, ora devi rimuovere un riferimento in main.jsx a un file CSS eliminato.

Apri main.jsx per modificarlo con il seguente comando:

  1. nano src/main.jsx

Rimuovi la linea evidenziata per scollegare il riferimento al file CSS:

/src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import "./index.css"

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

Salva e chiudi il file main.jsx.

Crea un nuovo file chiamato App.jsx sotto la directory src/ con il seguente comando:

  1. nano src/App.jsx

Aggiungi il seguente codice al file App.jsx:

/src/App.jsx
export default function App() {
return (
<>
<div>Hello World</div>
</>
);
}

Questo codice crea un nuovo componente React funzionale chiamato App. Il prefisso export default dice a JavaScript di esportare questa funzione come esportazione predefinita. Il corpo della funzione contiene un <div> con testo Hello World.

Salva e chiudi il file App.jsx.

Usa il seguente comando per eseguire nuovamente il server di sviluppo:

  1. yarn run dev --host

Ora, apri o aggiorna http://localhost:3000 nel tuo browser per accedere a una pagina vuota che visualizza il testo Hello World:

In questo passaggio, hai rimosso alcuni dei file predefiniti dal progetto Vite. Successivamente, costruirai un’app di base con nuovi componenti, file CSS e file di immagini.

Passaggio 5 — Creazione di un’app di base

In questo passaggio, creerai componenti, aggiungerai file CSS e linkerai immagini creando un’app di base. Inizia uscendo dal server di sviluppo.

Nella sezione successiva, creerai un nuovo componente per la tua app React.

Creazione di un componente

Creare un nuovo componente aggiunge modularità al tuo progetto. Aggiungerai tutti i componenti nella directory components per mantenere le cose organizzate.

Usa il seguente comando per creare una nuova directory chiamata components all’interno di src/:

  1. mkdir src/components

Successivamente, crea un nuovo file chiamato Welcome.jsx all’interno della directory src/components/ con il comando:

  1. nano src/components/Welcome.jsx

Aggiungi il seguente codice al file Welcome.jsx:

/src/components/Welcome.jsx
export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
</div>
</>
);
}

Il codice sopra creerà un nuovo componente funzionale React chiamato Welcome. Il prefisso export default indica a JavaScript di esportare questa funzione come esportazione predefinita.

Il tag div con un nome di classe wrapper ti consente di indirizzare questa sezione nel CSS. I tag h1 e p visualizzeranno il messaggio sullo schermo.

Salva e chiudi il file.

Successivamente, farai riferimento a questo nuovo componente nel tuo file App.jsx.

Apri App.jsx con il seguente comando:

  1. nano src/App.jsx

Aggiorna i contenuti di App.jsx con il codice evidenziato:

/src/App.jsx
import Welcome from "./components/Welcome"

export default function App() {
return (
<>
<Welcome />
</>
)
}

Questa riga di codice importerà Welcome.jsx nell’app e collegherà il nuovo componente nel corpo della funzione. Quando hai finito, salva e chiudi il file.

Nella seguente sotto-sezione, aggiungerai un’immagine alla tua app.

Aggiunta di un’Immagine

L’aggiunta di immagini in React è un caso d’uso comune nello sviluppo di app.

Crea una nuova directory chiamata img sotto la directory src/ con il seguente comando:

  1. mkdir src/img

Naviga nella tua directory src/img con questo comando:

  1. cd src/img

Scaricherai questa immagine di Sammy in src/img.

Scarica l’immagine con wget:

  1. wget https://html.sammy-codes.com/images/small-profile.jpeg

Rinomina l’immagine con il seguente comando:

  1. mv small-profile.jpeg sammy.jpeg

Questo comando rinomina il file immagine da small-profile.jpeg a sammy.jpeg, che sarà più facile da fare riferimento in seguito.

Torna alla tua directory principale con questo comando:

  1. cd ../../

Successivamente, aggiornerai il file Welcome.jsx per collegarlo a questa immagine. Apri il file:

  1. nano src/components/Welcome.jsx

Aggiorna il tuo file Welcome.jsx aggiungendo le righe evidenziate:

/src/components/Welcome.jsx
import Sammy from "../img/sammy.jpeg"

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}

La prima riga importerà l’immagine in React come un modulo.

L’altra riga all’interno del corpo della funzione creerà un nuovo tag <img> e collegherà l’attributo src al componente immagine appena importato. Le props width e height imposteranno gli attributi dell’immagine corrispondenti a 200 pixel.

Salva e chiudi il file Welcome.jsx.

Successivamente, aggiungerai CSS al tuo progetto.

Aggiunta di CSS

In questa sottosezione, aggiungerai un file CSS personalizzato al tuo progetto per stilizzare la tua app.

Crea una nuova directory chiamata css sotto la directory src/ usando il seguente comando:

  1. mkdir src/css

Ora, crea un nuovo file CSS chiamato main.css in src/css:

  1. nano src/css/main.css

Aggiungi il seguente codice al file main.css:

/src/css/main.css
body {
display: grid;
place-items: center;
background-color: #b4a7d6;
font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
background-color: #fff9e6;
padding: 20px;
border-radius: 10px;
}

h1 {
color: #8873be;
}

Nel CSS sopra, imposti una visualizzazione a griglia e posizioni gli elementi al centro per il body. Imposti anche un tipo di carattere e un colore di sfondo.

La classe .wrapper selezionerà il div wrapper nel tuo file Welcome.jsx. Gli stili per questa classe faranno quanto segue:

  • Imposta un colore di sfondo.
  • Aggiungi un padding di 20 pixel.
  • Aggiungi angoli arrotondati di 10 pixel.

Il selettore h1 mirerà all’elemento tag HTML, impostando il suo colore su una tonalità di viola.

Quando hai finito, salva e chiudi il file main.css.

Successivamente, farai riferimento al nuovo file CSS dal componente Welcome.jsx. Apri il file Welcome.jsx:

  1. nano src/components/Welcome.jsx

Aggiorna il contenuto del file con la riga evidenziata:

/src/components/Welcome.jsx
import Sammy from "../img/sammy.jpeg"
import "../css/main.css"

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}

Questa riga importerà il file CSS come modulo nel tuo componente. Potresti dover aggiornare la riga con il percorso corretto del file per la cartella del tuo progetto.

Quando hai finito, salva e chiudi il file Welcome.jsx.

Nella seguente sottosezione, cambierai la barra del titolo dell’app.

Cambiare la barra del titolo dell’app

Per impostazione predefinita, l’app Vite mostra il testo Vite + React nella barra del titolo della finestra del browser. In questo passaggio, lo cambierai in un titolo descrittivo.

Apri index.html nella tua cartella principale:

  1. nano index.html

Aggiorna il tag <title> con il testo evidenziato:

/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Cool App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

Questo testo sostituisce la barra del titolo predefinita Vite App con il titolo dell’app personalizzato.

Salva e chiudi il file index.html.

Se hai bisogno di riavviare il server di sviluppo, esegui questo comando:

  1. yarn run dev --host

Dopo tutte queste modifiche, visita http://localhost:5173 per visualizzare la tua app. Vedrai una nuova versione della tua app.

Puoi chiudere il server di sviluppo quando sei pronto a passare alla fase di costruzione.

Ora hai aggiunto un’immagine, cambiato stili e creato un’interfaccia utente raffinata. Nel prossimo e ultimo passaggio, costruirai un pacchetto app ottimizzato per il rilascio.

Passaggio 6 — Costruzione per la Produzione

In questo passaggio, costruirai un pacchetto app ottimizzato pronto per il rilascio su un server. Per creare una build, esegui il seguente comando nel terminale:

  1. yarn run build

Questo comando crea una nuova cartella dist con file di origine minificati che puoi rilasciare sul tuo server per la produzione.

Riceverai un output simile a questo:

Output
vite v4.0.4 building for production...
✓ 34 modules transformed.
dist/index.html 0.45 kB
dist/assets/sammy-9cb83ad5.jpeg 6.74 kB
dist/assets/index-d1c95597.css 0.19 kB │ gzip: 0.16 kB
dist/assets/index-e0751083.js 143.19 kB │ gzip: 46.04 kB
✨ Done in 1.63s.

È possibile ora distribuire i contenuti della cartella dist su un server online. Se si dispone di un server Apache o Nginx, è possibile caricare i contenuti manualmente. È anche possibile utilizzare una piattaforma di app per eseguire lo script di build e generare automaticamente i file di build. Per distribuire la propria app React sulla piattaforma App di DigitalOcean, seguire il nostro tutorial su Come Distribuire un’applicazione React sulla Piattaforma App di DigitalOcean.

Conclusione

In questo tutorial, hai creato una nuova app React utilizzando lo strumento Vite. Hai creato una nuova app React fresca con il comando yarn create vite. Dopo aver rimosso il codice boilerplate, hai creato i tuoi componenti aggiungendo un’immagine personalizzata, un file CSS e cambiando la barra del titolo. Infine, hai creato un bundle ottimizzato utilizzando il comando yarn run build, pronto per essere distribuito.

Ora che hai creato un’app React con Vite, scopri cos’altro puoi fare con React nella serie Come Codificare in React.js e esplora altri tutorial React.

Source:
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite