Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

React corso intensivo per principianti, Parte 3

by
Length:LongLanguages:
This post is part of a series called React Crash Course for Beginners.
React Crash Course for Beginners, Part 2
React Crash Course for Beginners, Part 4

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

Finora in questa serie di React, abbiamo creato un'applicazione di esempio funzionante come punto di partenza per la nostra app galleria 'Movie Mojo' e abbiamo visto come usare i props permette di personalizzare l'aspetto dei componenti mediante il passaggio di dati, piuttosto che con la codifica fissa.

Nella terza parte creeremo il nostro primo componente personalizzato e quindi aggiungeremo lo stato alla nostra app. Questo ci permetterà di gestire facilmente i dati dell'app senza essere preoccupati di aggiornare manualmente il DOM. Invece vedremo come far gestire a React tutto il rendering del DOM da ora in poi.

Verrà visualizzato un insieme di quattro film nella nostra galleria al caricamento della pagina, e altri quattro saranno caricati e visualizzati quando si clicca il pulsante Carica altro....

Affrontiamo innanzitutto l'aggiungere il componente <Movie /> che visualizza informazioni su un singolo film.

Aggiunta di un componente Movie

Il componente <Movie /> visualizzerà le informazioni su un singolo film. Più componenti <Movie /> verranno visualizzati insieme per formare una galleria di film di alcuni film piacevoli. Da qui il nome della nostra app React, 'Movie Mojo"!

Prima di aggiungere il componente <Movie />, aggiorniamo il CSS in App.js per dare stile ai singoli film nella galleria. Aprite App.css e sostituite gli stili con:

Questo dà gli stili alla galleria per visualizzare i film in una formazione a griglia e migliora la spaziatura attorno agli altri elementi visivi.

Inoltre, in /public/posters/, ho aggiunto 12 manifesti di film per comodità che potete utilizzare nel vostro progetto, se state seguendo. Potete scaricarli come parte del progetto finito per la parte 4. Basta copiare tutta la cartella posters nella propria cartella public dell'app di React.

È anche possibile scaricare i vostri poster di film dal sito originale. Per questo tutorial, ho usato cinematerial.com per tutti i manifesti dei film. C'è una piccola tariffa per scaricare i manifesti, ma ci sono probabilmente molte altre fonti per i poster, se volete provare altrove.

OK, torniamo al nostro componente <Movie />. All'interno della cartella /src/components/, create un nuovo file Movie.js, apritelo in un editor e aggiungete quanto segue:

Questo è abbastanza simile al componente <Header /> tranne che stiamo facendo riferimento a diversi props, piuttosto che solo uno. Usiamo il nostro componente <Movie /> per visualizzare alcuni film.

In App.js aggiungete quattro componenti <Movie /> all'interno di un contenitore <div> così possiamo  applicare facilmente gli stili solo agli elementi del film. Ecco il codice completo di App.js:

Notate come importiamo in modo esplicito il componente <Movie />, proprio come abbiamo fatto per <Header />, per renderlo disponibile nel codice. Ogni componente del film implementa i props per title, year, description e poster.

Il risultato è quattro componenti <Movie /> aggiunti alla nostra galleria.

Manually adding Movie components

È molto noioso aggiungere film manualmente uno alla volta in App.js. In pratica, i dati dell'app probabilmente sarebbero venuto da un database ed essere temporaneamente memorizzati in un oggetto JSON prima di essere aggiunti all'oggetto dello stato nella vostra app.

Gestione dello stato di React

Qual è lo stato in un'app di React? Si può pensare a esso come un singolo oggetto JavaScript che rappresenta tutti i dati nella vostra app. Lo stato può essere definito su qualsiasi componente, ma se si desidera condividere lo stato tra i componenti allora è meglio definirlo sul componente di primo livello. Lo stato può quindi essere tramandato ai componenti figlio e averne accesso come richiesto.

Anche se lo stato è un oggetto principale, tale oggetto può contenere più oggetti secondari relazionati a diverse parti della vostra app. Ad esempio, in un'app di carrello della spesa, potreste avere un oggetto di stato per gli elementi nel vostro ordine e un altro oggetto per il monitoraggio dell'inventario.

Nella nostra app 'Movie Mojo', abbiamo solo un singolo oggetto sub-stato per memorizzare i film nella nostra gallery.

L'idea di base dietro utilizzo dello stato è che ogni volta che vengono modificati dati nella vostra app, React aggiorna le parti pertinenti del DOM per voi. Tutto quello che dovete fare è gestire i dati, o lo stato, nella vostra app, e React gestisce tutti gli aggiornamenti del DOM.

Aggiungere i film tramite stato

Per semplicità, eviteremo il passaggio del database e faremo finta che i dati dei nostri film sono stati estratti da un database e memorizzati in formato JSON.

Per dimostrare l'aggiunta di elementi a uno stato iniziale, come pure l'aggiornamento di stato quando si verifica un evento (come premere un pulsante), useremo due oggetti JSON, ciascuna contenente i dati relativi di quattro film.

Nella cartella src, aggiungete un nuovo file movies.js, apritelo in un editor e aggiungete il codice seguente per definire i nostri due oggetti JSON:

Prima che possiamo fare riferimento agli oggetti JSON nel nostro componente <App />, abbiamo bisogno di importarli. Aggiungete questo alla parte superiore di App.js:

Ogni oggetto JSON è ora disponibile tramite le variabili initialMovies e additionalMovies. Finora, però, non abbiamo nessuno stato associato con la nostra app. Sistemiamolo ora.

Il componente di primo livello nella nostra app 'Movie Mojo' è <App />, quindi aggiungiamo il nostro oggetto di stato qui. Abbiamo bisogno che lo stato sia inizializzato con la classe del componente, che possiamo fare tramite la funzione costruttore.

Quando si utilizza una funzione costruttore in una classe di React, è necessario chiamare super(), in primo luogo come oggetto Component che stiamo estendendo, deve essere inizializzato prima di qualsiasi altra cosa. Inoltre, la parola chiave this non sarà disponibile all'interno del costruttore fino dopo super() sia restituito.

Per inizializzare il nostro oggetto state, aggiungete questo dentro la classe del componente <App />:

Questo creerà un oggetto di stato vuoto per la nostra app React. Utilizzando gli strumenti di sviluppo di React, possiamo vedere l'oggetto state inizializzato direttamente sul componente <App />.

Adding empty state

Tuttavia, vogliamo inizializzare l'oggetto state con alcuni film, in modo da visualizzarli immediatamente al caricamento della pagina. Per effettuare questa operazione, possiamo inizializzare l'oggetto di stato movies con initialMovies invece di un oggetto vuoto.

Questo imposterà lo stato iniziale per la nostra app per i quattro film memorizzati nell'oggetto JSON initialMovies, ma i film nella galleria vengono ancora visualizzati tramite i componenti <Movie /> a codifica fissa che abbiamo aggiunto in precedenza.

Adding movies to our initial state

Dobbiamo invece inviare i film all'oggetto di stato movie, che possiamo fare utilizzando un ciclo per reiterare ogni film.

Cominciate a rimuovere i componenti <Movie /> a codifica fissa e sostituiteli con:

Questo codice richiede qualche spiegazione. L'oggetto di stato movie contiene i singoli film archiviati come oggetti, ma per eseguire un'iterazione su di loro sarebbe stato invece più facile lavorare con un array.

Così usiamo Object.keys() per afferrare tutte le chiavi per gli oggetti film e memorizzarli in un array. È allora che viene iterata utilizzando .map(), e un componente <Movie /> viene emesso per ogni film nell'oggetto di stato movies.

Ci sono un paio di modifiche da quello precedente, abbiamo aggiunto un <Movie />, però. In primo luogo, abbiamo passato tutte le informazioni per un singolo film tramite un singolo prop meta. Questo è effettivamente più conveniente rispetto a prima, dove abbiamo specificato un prop separato per ogni attributo di film.

Notate inoltre che specifichiamo anche un prop key. Questo è utilizzato internamente da React per tenere traccia dei componenti che sono stati aggiunti dal ciclo. Non è effettivamente disponibile per essere usato dal componente, quindi si dovrebbe cercare di accedere dal proprio codice.

Senza un prop key, React genera un errore, quindi è importante includerlo. React ha bisogno di conoscere quali nuovi film sono stati aggiunti, aggiornati o rimossi in modo che si può tenere tutto sincronizzato.

Abbiamo bisogno di fare una cosa prima che i nostri componenti possono essere visualizzati. Aprite Movie.js e, per ogni riferimento a un prop, mettete un prefisso con meta, come segue:

Movies initialized via state

Caricare più film

Abbiamo visto come visualizzare i film che sono stati aggiunti allo stato come si inizializza la nostra app, ma e se volevamo aggiornare la nostra galleria di film a un certo punto?

Questo è dove React brilla davvero. Tutto quello che dobbiamo fare è aggiornare il film nell'oggetto di stato movie, e React aggiorna automaticamente tutte le parti della nostra app che utilizzano questo oggetto. Così, se aggiungiamo alcuni film, React attiverà il metodo render() del componente <App /> per aggiornare la nostra galleria di film.

Vediamo come possiamo realizzarlo.

Iniziate aggiungendo un pulsante HTML all'interno del contenitore del div di chiusura in App.js.

Quando si fa clic sul pulsante, viene chiamato un metodo di classe loadAdditionalMovies. Aggiungete questo metodo alla classe del componente <App />:

Aggiornare lo stato è relativamente semplice, purché si segua il metodo consigliato, che consiste nel copiare l'oggetto di stato corrente in un nuovo oggetto, e aggiornare questa copia con nuovi elementi. Quindi, per impostare il nuovo stato, chiamiamo this.setState e passiamo al nostro nuovo oggetto di stato di sovrascrivere quello precedente. Non appena lo stato viene aggiornato, React aggiorna solo le parti del DOM che sono state colpite dal cambiamento di stato.

La prima riga in loadAdditionalMovies() utilizza un operatore spread per copiare tutte le proprietà dell'oggetto this.state.movies nel nuovo oggetto currentMovies.

Dopo di che, usiamo Object.assign per unire due oggetti insieme, risultando nell'elenco dei nuovi film aggiunti all'elenco corrente.

C'è solo un altro passo che dobbiamo completare prima di eseguire il metodo loadAdditionalMovies(). Per fare riferimento a qualsiasi metodo di componente personalizzato, dobbiamo prima associarlo manualmente alla classe del componente.

Questa è una stranezza di React ed è solo qualcosa che ci si dovrà ricordare di fare. In qualsiasi momento si è avuto accesso a un metodo senza che sia manualmente vincolato, React si lamenterà e genererà un errore di compilazione.

Aggiungete questo al costruttore della classe in App.js:

Finché vi ricordate di utilizzare questa soluzione alternativa per ogni metodo personalizzato che richiede l'utilizzo di this, non incorrerete in eventuali problemi.

Ora, provate a cliccare il pulsante Carica di più.... Dovreste vedere quattro film in più aggiunti alla galleria.

Loading more movies via updating state

Questo dimostra un punto di forza di React. Vale a dire, che vi permette di concentrarvi sui dati nella vostra app e lasciare tutto l'aggiornamento noioso del DOM a React. Per aggiungere i film, tutto quello che dovevamo fare era di aggiornare i dati nell'oggetto di stato movie, e React si è preso cura di tutto il resto.

La nostra applicazione di esempio è ancora piuttosto essenziale, ma immaginare un app molto più complessa con molti componenti e più oggetti di stato. Cercare di aggiornare manualmente il DOM i dati nella vostra app sarebbe un compito enorme (e incline all'errore)!

Conclusione

In questo tutorial, abbiamo davvero fatto qualche progresso con la nostra app 'Movie Mojo'. Abbiamo usato lo stato di React per aiutare a gestire la lista dei film della nostra app. Non solo abbiamo aggiunto film all'oggetto di stato iniziale come la nostra app si è inizializzata, ma abbiamo anche aggiornato la lista dei film nella nostra gallery quando è stato fatto clic sul pulsante Carica di più....

Nel quarta parte e ultimo tutorial di questa serie, daremo un'occhiata a come possiamo aggiungere manualmente un film alla nostra galleria tramite un modulo personalizzato. Gli utenti saranno in grado di compilare il modulo e aggiungere dettagli su un film, che verrà aggiunto all'elenco dei filmati visualizzati nella galleria.

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.