Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. React
Code

React, corso intensivo per principianti, Parte 1

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called React Crash Course for Beginners.
React Crash Course for Beginners, Part 2

Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

In questa serie di tutorial ci dedicheremo all'utilizzo di React costruendo un'app per visualizzare una galleria di film.

Imparare a costruire un'applicazione da zero è una grande opportunità per praticare con tutte le funzionalità chiave di React, mentre le vostre abilità di sviluppo aumentano. Verranno seguiti tutti i metodi consigliati e le migliori pratiche, essenziali per la creazione di moderne applicazioni React.

Imposteremo una nuova app React utilizzando lo strumento create-react-app, sviluppata da Facebook, affrontando i seguenti argomenti in dettaglio:

  • Componenti
  • JSX
  • Props
  • State
  • Strutturazione corretta dell'app
  • Utilizzo di funzionalità ES6 per lo sviluppo di applicazioni moderne

Cosa realizzeremo

Per rendere più divertente l'apprendimento di React, realizzeremo un'applicazione completamente funzionante, anziché presentare generici frammenti di codice quando nuovi aspetti di React saltano fuori.

Insieme costruiremo 'Movie Mojo', un'app per visualizzare una galleria di film. Al termine, l'applicazione visualizzerà alcuni film al caricamento della pagina e ne caricherà altri quando verrà premuto un pulsante. Infine, sarete in grado di inserire i vostri film tramite un form personalizzato che, quando inviato, dinamicamente inserirà un nuovo film nella galleria.

Finished Movie Mojo App

Prerequisiti

Si tratta di un tutorial di livello intermedio, così beneficerete notevolmente se avete qualche conoscenza preliminare dei seguenti argomenti:

  • Funzionalità ES6 come funzioni a freccia, classi e moduli.
  • Conoscenza di cosa sono componenti React, props e state.
  • Una certa esperienza utilizzando Node.js e NPM.
  • Almeno un livello base di conoscenza di JavaScript.

La maggior parte di questi argomenti verranno affrontati in dettaglio andando avanti, ma consiglierei di ripassare qualsiasi particolare area a seconda delle esigenze.

Impostiamo l'applicazione

Useremo lo strumento create-react-app per impostare la nostra applicazione React. È estremamente facile da usare e ci permetterà di concentrarci sul codice della nostra app, senza dover passare attraverso un processo di installazione complicata.

Per utilizzare create-react-app, sarà necessario avere Node.js e npm installato. È possibile verificare se sono entrambi disponibili digitando quanto segue in una finestra della riga di comando:

E poi:

Se sono entrambi installati vedrete il numero di versione corrente per ciascuno.

Se dovete installare o aggiornare Node.js e npm il modo più semplice è quello di scaricare Node.js dalla pagina web ufficiale. Node.js è in bundle con npm, quindi non sarà necessario eseguire un'installazione separata.

Per installare globalmente create-react-app, digitate questo in qualsiasi finestra della riga di comando:

npm install -g create-react-app

Possiamo ora procedere e utilizzare create-react-app per strutturare la nostra nuova app React. Verrà creata anche una cartella principale per i nostri file di progetto. Aprite una finestra della riga di comando e passate alla cartella in cui risiederà l'app (es. /Desktop) e digitate quanto segue:

create-react-app movie-mojo

Ci vorrà un minuto o giù di lì per completare, ma appena succede, dovreste vedere un messaggio simile al seguente:

Una nuova cartella movie-mojo sarà stata creata con la seguente struttura di file:

Project file structure

La cartella src è dove potrete modificare i file di progetto, e quando si arriva a distribuire l'app potrà essere fornito in bundle e aggiunto alla cartella public, pronta per la distribuzione.

Per visualizzare l'applicazione d'esempio nel browser, approfittiamo del mini web server incluso in create-react-app. Abbiamo bisogno di essere all'interno della cartella di progetto che abbiamo appena creato, quindi nella finestra della riga di comando, digitate:

cd movie-mojo

E poi:

npm start

Questo semplice comando fa tre cose principali. Cioè:

  • Compilerà la nostra applicazione React.
  • Aprirà una nuova finestra del browser e visualizzerà la nostra app.
  • Monitorerà le modifiche ai file di progetto.

Una volta compilato, vedrete il seguente output:

Ed ecco l'applicazione in esecuzione nel browser.

Sample app

Quando vengono apportate modifiche all'app, sarà automaticamente ricompilata e ricaricata nella finestra del browser. Questa è una funzionalità davvero cool di create-react-app e vi farà risparmiare un sacco di tempo durante lo sviluppo.

Vi permetterà inoltre di concentrarvi sul codice dell'app senza essere distratti dal dover ricompilare manualmente e dal dover continuamente aggiornare la finestra del browser per vedere le ultime modifiche.

Forse il miglior flusso di lavoro, se avete spazio disponibile sullo schermo, consiste nell'avere browser ed editor aperti fianco a fianco. In questo modo, ogni volta che si apporta una modifica a uno dei file di progetto, vedrete i cambiamenti quasi immediatamente visualizzati nella finestra del browser.

Proviamo a fare una modifica al nostro progetto.

All'interno della cartella src, aprite App.js nell'editor di testo. Provate a cambiare la linea:

To get started, edit <code>src/App.js</code> and save to reload.

in:

Welcome to the 'Movie Mojo' React app!

Appena salvate le modifiche, l'app React ricompilerà automaticamente e aggiornerà la finestra del browser. Se avete riorganizzato l'area di lavoro come suggerito sopra, vedrete quanto è istantanea questa operazione.

Updated sample app

Strutturiamo la nostra App

Cerchiamo di impostare la struttura della nostra app che useremo per il resto di questo tutorial.

Lo strumento create-react-app fa un grande lavoro nello strutturare l'app, ma abbiamo ancora flessibilità per modificarla in modo da soddisfare le nostre esigenze.

In primo luogo, cerchiamo di sbarazzarci dei file di cui non abbiamo più bisogno dalla cartella src. Non abbiamo bisogno di service workers nella nostra app, quindi eliminate il file registerServiceWorker.js. Ha un riferimento in index.js, quindi apritelo in un editor ed eliminate tutti i riferimenti in modo che assomigli a questo:

Quindi, eliminate il file logo.svg e modificate App.js per rimuovere i riferimenti ad esso. Il file aggiornato ora dovrebbe assomigliare a questo:

Inoltre possiamo sbarazzarci del file App.test.js. Questo ci lascerà con i seguenti file in src:

  • index.js
  • index.css
  • App.js
  • App.css

Svilupperemo diversi componenti, quindi creiamo una cartella dedicata per memorizzarli tutti all'interno. In src, create una nuova cartella components e aggiungete il file App.js. La nostra applicazione non verrà compilata correttamente fino a che non avremo aggiornato un paio di riferimenti.

In index.js, aggiornate il percorso per importare il componente <App />:

E in App.js, aggiornate il percorso di App.css:

Salvate le modifiche e assicuratevi che l'app venga ricompilata con successo.

Ora siamo quasi pronti per iniziare a sviluppare la nostra app 'Movie Mojo'. Prima, però, prendiamo familiarità con la modalità di rendering della nostra app.

Date un'occhiata a index.js. Questo è il file che fornisce il rendering dell'app al Dom. Ciò avviene tramite il metodo ReactDom.render(), che prende due argomenti. Il primo argomento è il componente di cui si desidera eseguire il rendering. Nel nostro caso, è il componente <App />, che è il componente di primo livello (e attualmente il solo) nella nostra app.

Il secondo argomento specifica l'elemento di destinazione del DOM in cui vogliamo inserire l'app React. Per impostazione predefinita, 'create-react-app' crea automaticamente questo elemento. Se date un'occhiata all'interno della cartella public, c'è un index.html che contiene un elemento <div> con un id root.

È possibile modificarlo in qualsiasi cosa preferiate, ma è bene lasciare l'impostazione predefinita per questo tutorial.

index.js viene caricato nel nostro componente <App /> da App.js, e seguiremo insieme questo modello di progettazione separando ogni componente contenuto nella nostra applicazione in file dedicati.

App.js sarà il nostro componente di primo livello che conterrà altri componenti, che a sua volta potrebbero contenere riferimenti ad altri componenti. Pensate ai componenti come a dei tag HTML dove avete il primo livello costituito dall'elemento <body> che può contenere uno o più elementi <div>, che potrebbero trasformarsi e contenere un elemento di menu <nav> e così via.

Conclusione

Questo tutorial contiene tutte le basi necessarie per impostare la nostra applicazione React. L'utilizzo di create-react-app ha reso incredibilmente facile sviluppare un'applicazione di esempio funzionante con tutta la configurazione gestita per noi. Quindi abbiamo ottimizzato il setup di default per soddisfare le nostre esigenze particolari.

Restate sintonizzati per la parte 2, dove inizieremo a creare componenti per la nostra app 'Movie Mojo' e a dare un'occhiata all'aggiunta di props per rendere i nostri componenti dinamici!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.