Configurazione di un progetto React con Create React App

React è una delle librerie JavaScript più popolari per lo sviluppo di app front-end. È una libreria open-source originariamente sviluppata da Facebook. React è diventata rapidamente popolare per la creazione di applicazioni veloci con JSX – un paradigma di programmazione che combina JavaScript con una sintassi simile a HTML.

In precedenza, configurare un progetto React sarebbe stato un processo complesso. Richiedeva la configurazione manuale dei seguenti componenti:

• Un sistema di build
• Transpiler di codice (converte le sintassi moderne in codici leggibili dal browser)
• La struttura della directory di base per il progetto

Fortunatamente, quei giorni sono ormai lontani, grazie a Create React App. È uno strumento meraviglioso che automatizza tutti questi passaggi. Create React App si occupa della transpilazione del codice, del linting, dei test e dei sistemi di build. Inoltre, viene fornito con un server che supporta l’hot reloading, il che significa aggiornare le pagine web man mano che vengono apportate modifiche. Naturalmente, tutto questo viene fatto all’interno di una struttura di directory organizzata.

In breve, non c’è bisogno di passare attraverso la fatica manuale di configurare sistemi di build come Webpack, o transpiler come Babel. Con meno cose di cui preoccuparsi, sei libero di concentrarti completamente sullo sviluppo front-end. Create React App ti consente di iniziare con React con una preparazione minima.

In questa guida, mostreremo come utilizzare Create React App e avere un’applicazione React di base attiva e funzionante. Può fungere da base per qualsiasi progetto di applicazione futuro.

Prerequisiti

Per eseguire i passaggi mostrati in questo tutorial, avrai bisogno del seguente software configurato in precedenza.

• • Un server Ubuntu configurato correttamente. Puoi seguire i passaggi per configurare un server Ubuntu su CloudSigma.
  • L’ultima versione di Node.js installata. Ecco una guida passo-passo su installare Node.js su Ubuntu.

Step 1: Create a Dedicated npm Project Directory

Per i pacchetti Node.js, npm è il gestore di pacchetti predefinito. Useremo npm per creare una directory di progetto dedicata. Ospiterà file importanti come package.json che memorizzano tutti i metadati sul progetto e moduli di dipendenza Node.js aggiuntivi. JSON è un formato standard di condivisione dei dati basato su oggetti JavaScript. Fai riferimento a questa guida se vuoi saperne di più su JSON.

Innanzitutto, crea una directory dedicata:

Successivamente, diremo a npm di avviare un ambiente di sviluppo all’interno del file. Creerà il file package.json necessario per il progetto. Cambia la directory corrente:

Esegui il comando npm init :

Nota che se vuoi che questa directory faccia parte di un repository git, si consiglia di configurarlo prima. Lo script di inizializzazione lo rileverà automaticamente e configurerà tutto di conseguenza. Una volta terminato, dovrebbe esserci un file package.json nella directory. Verificalo con un editor di testo:

Step 2: Create a React Project with Create React App

In questo passaggio, invocheremo Create React App per stabilire il nostro progetto React di esempio. Questo script copierà tutto il necessario in una nuova directory insieme a tutte le dipendenze. Il gestore di pacchetti npm viene fornito anche con lo strumento npx. Viene utilizzato per eseguire pacchetti eseguibili. Lo useremo per eseguire lo script Create React App senza scaricare effettivamente il progetto.

L’esecuzione eseguirà create-react-app sulla directory specificata. Eseguirà anche i comandi npm install per installare le dipendenze. Per facilità d’uso, utilizzeremo il nome cloudsigma-react-react-tutorial. Esegui il seguente comando:

Al termine del processo, vedrai il seguente avviso. È il messaggio di successo se l’installazione è andata a buon fine. Riporta anche la posizione in cui è stato creato il progetto.

Passo 3: Applicare React-Scripts

Ora faremo una breve panoramica dei vari react-scripts che sono stati installati durante l'installazione.

• • Eseguiremo lo test script per eseguire il codice di test.
  • Lo build script creerà una versione minimizzata del nostro progetto (per l'ambiente di produzione).
  • Infine, lo eject script offre un controllo completo sulla personalizzazione.

Per prima cosa, controlla il contenuto della directory del progetto React:

Ecco una descrizione di ciascun file:

• • node_modules/: Questa directory contiene tutte le librerie JavaScript esterne che verranno utilizzate dall'app. È raramente necessario smanettare qui.
  • public/: Ospita alcuni file HTML, JSON e immagini di base. Funge da radice del progetto.
  • src/: Questa directory contiene i codici JavaScript React per il nostro progetto. È qui che trascorreremo la maggior parte del nostro tempo. Esploreremo ulteriormente questa directory nella prossima parte della guida.
  • .gitignore: È un file che descrive quali directory verranno ignorate da git, ad esempio la directory node_modules . In genere, è meglio escludere le directory che contengono file di grandi dimensioni o che ospitano file di log che non è necessario includere nel controllo di versione. In questo caso, includerà anche alcune directory specifiche di React.
  • README.md: È un file markdown contenente molte informazioni utili su Create React App. Ad esempio, include un riepilogo dei comandi e collegamenti per la configurazione avanzata. Per ora non abbiamo a che fare con esso. Tuttavia, con il progredire del progetto, aggiungerai ulteriore documentazione sul progetto.

I file package.json e package-lock.json sono utilizzati da npm. Durante l'esecuzione del comando iniziale npx, è stato creato il progetto di base. Quando sono state installate le dipendenze aggiuntive, è stato creato package-lock.json. npm utilizza package-lock.json per garantire che i pacchetti corrispondano alle versioni esatte. In questo modo, se qualcun altro installa il tuo progetto, otterrà dipendenze identiche. Poiché viene creato e gestito automaticamente, raramente avrai bisogno di toccarlo.

L'ultimo file di cui dobbiamo parlare è package.json. Contiene metadati sul progetto. Ad esempio, i metadati potrebbero includere un titolo del progetto, il numero di versione e le dipendenze. Include anche gli script che puoi utilizzare per eseguire il progetto. Controlla il contenuto del file package.json :

È un file JSON con vari oggetti. Dai un'occhiata all'oggetto scripts. Contiene quattro script diversi:

• • start
  • build
  • test
  • eject

Questi script sono elencati in base alla loro importanza. Lo start script avvia il server di sviluppo locale. Successivamente, approfondiremo come utilizzare il resto degli script.

• • Lo script di build

Per eseguire uno npm script, la struttura del comando è la seguente:

Per eseguire lo build script, usa il seguente comando:

Avvierà il processo di compilazione dei codici in un bundle utilizzabile. Una volta terminato, controlla la directory di output:

Nota che è disponibile una nuova directory build/ disponibile. Contiene una versione minimizzata e ottimizzata degli altri file. Si consiglia di inserirla nel file .gitignore poiché possiamo sempre generarla utilizzando lo build script.

• • Lo script di test

Lo test script è uno di quegli script che non richiedono il parametro run affinché npm lo esegua. Tuttavia, funzionerà comunque bene anche con esso. Quando viene eseguito, questo script avvierà un test runner chiamato Jest. Il tester cerca qualsiasi file di progetto con estensioni di file .spec.js o test.js ed esegue tali file.

Il seguente comando npm eseguirà lo test script:

Ci sono alcune cose da notare nell'output. Ricordi che il test runner cerca solo file con estensioni specifiche? In questo caso, c'è solo una singola suite di test (solo un file con .test.js estensione). Contiene solo un singolo test. Jest può rilevare automaticamente i test nella gerarchia del codice, quindi sei libero di annidare i test in una directory.

Inoltre, Jest non si limita a eseguire il test una volta sola per poi uscire. Continua a eseguire il test nel terminale. Se vengono apportate modifiche al codice sorgente, eseguirà nuovamente i test. Jest consente anche di limitare i test da eseguire. Ad esempio, premendo 0, puoi dire a Jest di testare solo i file che sono stati modificati. Man mano che le suite di test crescono, questa opzione fa risparmiare molto tempo. Per uscire dal test runner di Jest, premi q.

• • Lo script Eject

Lo script eject copia tutte le dipendenze e i file di configurazione nel progetto, offrendoti il controllo completo sul codice. In questo modo, tuttavia, rimuovi il progetto dalla toolchain integrata di Create React App. Una volta eseguito, non c’è modo di annullarlo.

Il vantaggio di Create React App è che elimina l’onere di numerose configurazioni. La creazione di qualsiasi applicazione JavaScript moderna richiede molti strumenti che lavorano in sinergia. Create React App gestisce tutte le configurazioni per te, quindi eseguire l’eject del progetto significa che dovrai fare tutto manualmente in seguito.

Un notevole svantaggio di Create React App è che, poiché gestisce tutte le configurazioni da sola, non offre una personalizzazione completa del progetto. Per la maggior parte dei progetti, questo non è un problema. Tuttavia, se desideri assumere il pieno controllo del progetto, dovrai eseguire l’eject del codice. Una volta eseguito l’eject, non potrai più aggiornare a nuove versioni di Create React App. Dovrai gestire manualmente tutti i miglioramenti.

Passo 4: Avvio del server

Ora avvieremo il server locale ed eseguiremo il progetto su un browser web. Per avviare il server, abbiamo a disposizione un altro script. La sua esecuzione non richiede il comando npm run. Quando viene eseguito, lo script avvia un server locale, esegue il codice del progetto, avvia un watcher e rimane in ascolto delle modifiche al codice. Le modifiche vengono mostrate direttamente sul browser. Il seguente comando avvierà il server:

L’output mostrerà l’URL per visitare il progetto in un browser. Mostrerà anche varie informazioni sul progetto in esecuzione. Apri l’URL in un browser:

Come mostra l’output, Create React App utilizza la porta 3000 per servire il progetto. Se la porta è già in uso, Create React App utilizzerà la successiva porta disponibile. Se hai un firewall configurato, questo deve consentire il traffico verso la porta 3000 (o la porta segnalata da Create React App). Puoi saperne di più su come gestire il firewall UFW qui.

Per uscire dal server, premi Ctrl+C dalla finestra del terminale. Questo interromperà il processo in esecuzione (l’istanza del server).

Passo 5: Modifica della homepage

Successivamente, impareremo come modificare il codice memorizzato nella public/ directory. Contiene la pagina HTML di base e funge da radice del progetto. Anche se potresti non aver bisogno di modificarla ulteriormente in futuro, costituisce la base del progetto.

Innanzitutto, avvia il server con npm, quindi spostati nella public/ directory:

La directory conterrà file come favicon.ico, logo192.png, logo512.png, ecc. Queste sono icone che un utente che visita la pagina web vedrebbe sulla propria scheda, browser o telefono. Il browser selezionerà automaticamente quella della dimensione appropriata. Alla fine, le sostituirai con icone adatte al tuo progetto. Per ora, le lasceremo così come sono.

Il file manifest.json ospita un insieme strutturato di metadati. Descrive il progetto, elenca le icone disponibili e altro ancora.

Il file robots.txt ospita informazioni per i web crawler. I web crawler “scansionano” il World Wide Web, indicizzando le pagine per i motori di ricerca. Non c’è bisogno di modificare il file a meno che tu non abbia un motivo specifico per farlo. Ad esempio, potresti voler rendere non facilmente accessibili determinati URL a contenuti specifici. Aggiungi la posizione a robots.txte non verrà indicizzato dai motori di ricerca.

Il file index.html è la radice della nostra applicazione. Ogni volta che si accede all’app, questo è il file che viene servito. Questo è il file che vedi sul display. Diamo un’occhiata veloce. Aprilo in un editor di testo:

È un file piuttosto corto. Nota che non ci sono immagini o parole nel <body>. React compila questi contenuti utilizzando il proprio motore e li inserisce utilizzando JavaScript. Tuttavia, React deve sapere dove inserire il codice. Il file index.html serve a questo scopo.

Modifichiamo il <title> in My React App:

Quindi, salva il file e chiudi l’editor. Ora, controlla la pagina web nel browser:

Come puoi vedere, il titolo della scheda è cambiato in My React App. Se non è cambiato automaticamente, ricarica la pagina premendo F5 o Ctrl+R.

Torniamo all’editor di testo. Tutti i progetti React devono partire da un elemento radice. Ce ne può essere più di uno su una singola pagina. Tuttavia, almeno uno è obbligatorio. Dice a React dove inserire tutti i codici HTML generati. Nel nostro index.html, trova la posizione dell’elemento <div id="root">. È il <div> che React utilizzerà per le modifiche future. Prova a cambiare il valore di id da root a base:

 

 

Dopodiché, ricarica la pagina sul browser. Non mostrerà alcun contenuto. Come mostra lo strumento Strumenti di sviluppo web di Firefox, viene generato un errore:

Torna all’editor di testo e cambia nuovamente il valore di id in root:

Passo 6: Tag di intestazione e modifiche allo stile

Finora abbiamo avviato il server locale e apportato piccole modifiche al file HTML radice. Ora lavoreremo con i componenti React situati nella directory src/ . Apporteremo modifiche al codice CSS e JavaScript. Le modifiche verranno applicate automaticamente tramite l’hot reloading.

Se il server è stato arrestato, avviarlo usando npm. Quindi, dai un’occhiata al contenuto della directory src/ :

Ci sono diversi file JavaScript e CSS qui. Li esamineremo uno per uno.

• ServiceWorker.js

È un file importante se si desidera creare progressive web application. Questo service worker offre varie funzionalità come notifiche push, caching offline, ecc. Per ora, lo lasceremo così com’è.

• SetupTests.js and App.test.js

Come suggerisce il nome di questi file, vengono utilizzati per testare i file. Ogni volta che abbiamo eseguito lo script test utilizzando npm, ha eseguito questi file. Il file setupTests.js contiene alcuni metodi expect personalizzati.

Diamo un’occhiata a App.test.js. Aprilo in un editor di testo:

Contiene un test di base che verifica la presenza della frase learn react nel documento. Se hai la scheda del browser aperta, puoi vedere la frase sulla pagina. A differenza di altri unit test, i test di React sono diversi. Poiché i componenti possono includere informazioni visive come il markup (e la logica per la manipolazione dei dati), gli unit test tradizionali non funzionano facilmente. Sotto questo aspetto, i test di React sono meglio descritti come una forma di test funzionale o di integrazione.

• CSS Files

Sono disponibili vari file di stile: App.css, index.css, e logo.svg. Puoi seguire diversi metodi per definire lo stile in React. Il modo più semplice è scrivere CSS semplice, poiché non è richiesta alcuna configurazione aggiuntiva.

È consentito importare direttamente il CSS in un componente. Ciò consente di suddividere i file CSS per applicarli solo a un singolo componente. In realtà non stai separando il CSS dal JavaScript. Piuttosto, stai raggruppando tutti i componenti rilevanti (CSS, JavaScript, immagini e markup) insieme.

Apri App.css con un editor di testo:

È un file CSS standard senza preprocessori CSS speciali. Puoi aggiungerli in seguito, se lo desideri. Create React App si impegna a essere neutrale offrendo al contempo una solida esperienza pronta all’uso.

Facciamo una modifica e vediamola in azione. Cambia il valore del background-color in blue:

Verifica la modifica sul browser:

• • Index.js

Ora è il momento di apportare modifiche al codice JavaScript di React. Apri index.js usando un editor di testo:

In alto, sta importando React, ReactDOM, index.css, App, e serviceWorker. Importando React, stiamo recuperando il codice necessario per convertire JSX in JavaScript. ReactDOM è il codice che collega il nostro codice React all'elemento di base ( index.html, ad esempio). Guarda la riga seguente:

Istruisce React a trovare un id con l'etichetta root e a iniettarvi i codici React. <App/> è l'elemento radice e tutto si dirama da lì.

Nota che abbiamo anche importato file CSS (come index.css) ma in realtà non ci abbiamo fatto nulla. Importandolo, stiamo effettivamente dicendo a Webpack tramite gli script di React di includere i codici CSS nel bundle compilato finale. Altrimenti, gli stili CSS non verranno visualizzati.

• App.js

Successivamente, daremo un'occhiata a App.js. Aprilo in un editor di testo:

 

Vediamo come la modifica del suo contenuto influisce sul nostro progetto. Cambia il contenuto del <p>tag:

Quindi, salva il file e controlla il browser per vedere le modifiche:

Voilà! Hai apportato le tue prime modifiche al componente React!

C'è un'altra cosa da notare. Guarda l'elemento <img>:

Nota che il logo viene passato tra parentesi graffe. Ogni volta che si passano attributi (che non sono stringhe o numeri), questi devono essere passati tra parentesi graffe. In questo modo, React li tratterà come oggetti JavaScript anziché come stringhe.

In questo caso, l'app non sta effettivamente importando l'immagine. Si tratta invece di un riferimento all'immagine. Quando Webpack compila il progetto, inserisce l'immagine nella posizione appropriata. Possiamo verificarlo nel browser. Apri gli Web Developer Tools in Firefox:

Webpack vuole assegnare percorsi di file univoci per tutte le immagini. Quindi, anche se le immagini venissero importate con lo stesso nome, avranno percorsi diversi.

Step 7: Project Building

In questo passo, impareremo come compilare il progetto in un pacchetto distribuibile. Avvia il terminale ed esegui lo script di build del progetto:

Il compilatore creerà la directory dedicata build/dove inserirà l'output. Per vedere cosa fa il processo di compilazione, apri il file index.html dalla directory build/directory:

Come puoi vedere, tutto il codice viene compilato e minimizzato nello stato utilizzabile più piccolo possibile. La leggibilità non è un problema in quanto non si tratta della parte di codice visibile al pubblico. I codici minimizzati occupano meno spazio pur mantenendo tutte le loro funzionalità. A differenza dei linguaggi in cui lo spazio vuoto è molto importante (Python, ad esempio), i linguaggi web (HTML, CSS e JavaScript) non richiedono una spaziatura corretta affinché il browser possa interpretarli.

Considerazioni finali

In questa guida, abbiamo dimostrato con successo come creare un'applicazione React. Abbiamo anche mostrato alcune configurazioni di base utilizzando strumenti di build JavaScript senza dettagli tecnici complessi. Questo è il valore chiave offerto da Create React App. Non devi sapere tutto per iniziare con React. Ti è consentito non imparare i complicati passaggi di build per concentrarti esclusivamente sul codice React.

Qui abbiamo anche dimostrato come avviare, testare e compilare un progetto React. Questi comandi sono fondamentali per progetti di tutte le dimensioni.

Buona programmazione!