Creare un progetto React da zero

• 7 minuti

In questo modulo è stato usato un progetto iniziale per diventare rapidamente operativi. Questa configurazione ha permesso di concentrarsi su React e su parte della nuova sintassi. Si può usare il progetto iniziale anche per i propri lavori.

È possibile provare a creare un progetto da zero. Per iniziare da una cartella vuota, seguire la procedura descritta in questa unità. La procedura usa Snowpack, come nel progetto iniziale.

Questa unità è facoltativa. Se non si ha la necessità di creare un progetto da zero, passare all'unità successiva.

Informazioni sulla struttura del progetto

La configurazione principale include due cartelle principali in cui è archiviato il codice:

• public
  • Contiene tutti i file HTML, CSS, di immagine o altri file statici
  • Archivia i file index.html e index.css
• src
  • Contiene tutti i file di cui occorre eseguire il rendering
  • Archivia tutti i file con estensione jsx

Si creeranno anche due file per configurare l'applicazione:

• package.json: contiene l'elenco dei pacchetti e degli script dell'applicazione
• snowpack.config.js: contiene le opzioni di configurazione di Snowpack

Sono necessari tre pacchetti principali per l'applicazione:

• Snowpack: usato per il rendering del codice JSX in HTML e JavaScript
• React: usato per creare i componenti
• React-DOM: usato per montare l'applicazione

Creare la struttura iniziale

In una directory vuota installare prima di tutto i componenti necessari usando npm. Configurare quindi Snowpack e aggiungere gli script al file package.json.

1. Aprire una finestra del terminale o una finestra di comando. Eseguire quindi i comandi seguenti per creare la directory e il file package.json per npm. In Mac o Linux usare mkdir e in Windows usare md per creare una directory.

   # Windows
   md react-recipes && cd react-recipes
   md src
   md public
   touch package.json
   echo "{}" > package.json
   
   # Linux or macOS
   mkdir react-recipes && cd react-recipes
   mkdir src
   mkdir public
   touch package.json
   echo "{}" > package.json
   

2. Eseguire il codice seguente nella stessa finestra del terminale o di comando.

   npm install --save-dev snowpack
   npm install react react-dom
   

   Nota

   Snowpack è una dipendenza di sviluppo. Questo vuol dire che non è obbligatorio per la produzione perché genera i file HTML e JavaScript necessari durante il processo di compilazione.

3. Aprire la directory in Visual Studio Code eseguendo il comando seguente.

   code .
   

Configurare Snowpack

Uno dei vantaggi di uno strumento come Snowpack è che generalmente si configura automaticamente. Occorre comunque indicare la struttura di cartelle del codice. Per indicare la struttura di cartelle, è possibile impostare le opzioni nel file snowpack.config.js.

1. In Visual Studio Code creare un nuovo file selezionando File>Nuovo file.

2. Assegnare al file il nome snowpack.config.js.

3. Nell nuovo file aggiungere il codice seguente.

   module.exports = {
       mount: {
           'public': '/',
           'src': '/dist'
       }
   }
   

Questo codice indica a Snowpack di usare la cartella public come radice dell'applicazione. Imposta anche la directory src come percorso virtuale per i file JavaScript e HTML che genererà.

Creare gli script npm

Per supportare le attività di sviluppo, si useranno due script con Snowpack. Il primo script avvia il server di sviluppo. Questa azione aggiorna automaticamente la pagina quando si modifica l'applicazione. Il secondo script viene usato quando è il momento di compilare tutti i file per la distribuzione.

1. In Visual Studio Code aprire il file package.json.

2. Alla fine del file, sopra l'ultima parentesi graffa (}), aggiungere il codice seguente. Questo codice crea gli script di avvio e compilazione.

   {
       "scripts": {
           "start": "snowpack dev",
           "build": "snowpack build"
       }
   }
   

   L'intero file avrà ora un aspetto simile al codice seguente.

   {
     "devDependencies": {
       "snowpack": "^2.18.5"
     },
     "dependencies": {
       "react": "^17.0.1",
       "react-dom": "^17.0.1"
     },
     "scripts": {
         "start": "snowpack dev",
         "build": "snowpack build"
     }
   }
   

3. Salvare tutti i file selezionando File>Salva tutto.

Il progetto iniziale è stato configurato. È possibile aggiungere index.html, App.jsx e altri file come è stato fatto nelle unità precedenti.