React corso intensivo per principianti, parte 4

() translation by (you can also view the original English article)

In questa esercitazione finale della nostra serie su React, creeremo un nuovo componente <AddMovie /> per aggiungere nuovi film manualmente tramite un modulo personalizzato. Questo porterà lo sviluppo dell'applicazione 'Movie Mojo' al termine.

Il codice per il progetto finale è disponibile per il download tramite il link a destra dello schermo (potrebbe essere necessario scorrere verso il basso). Più tardi vi fornirò le istruzioni dettagliate su come ottenere il progetto installato e funzionante sul vostro sistema.

Creare il componente AddMovie

Il componente <AddMovie /> dà in output un modulo per consentire agli utenti di inserire manualmente i dettagli di un film specifico e di aggiungerlo ai film esistenti nella galleria, una volta che il modulo è stato inviato.

Il modulo richiede tre input di testo per il titolo, l'anno e immagine del poster; oltre a un'area di testo per la descrizione del film. In /src/components/, create un nuovo file denominato AddMovie.js e aggiungete quanto segue:

import React, { Component } from 'react';

class AddMovie extends Component {
  render() {
    return (
      <form className="movie-form">
        <p>Add a Movie</p>
        <input ref={ ( input ) => this.title = input } type="text" placeholder="Title" />
        <input ref={ ( input ) => this.year = input } type="text" placeholder="Year" />
        <input ref={ ( input ) => this.poster = input } type="text" placeholder="Poster" />
        <textarea ref={ ( input ) => this.description = input} placeholder="Description">
        </textarea>
        <button type="submit">Add Movie</button>
      </form>
    );
  }
}

export default AddMovie;


L'attributo ref di React archivia un riferimento per ogni campo di input del modulo come una proprietà di classe del componente. Useremo questi riferimenti brevemente come un modo per afferrare facilmente i valori del campo di input.

In primo luogo, però, aggiungete i seguenti stili a App.css per dare al modulo un po' più di gusto estetico:

/* movie form styles */

.movie-form {
  width: 250px;
  margin: 0 auto;
}

.movie-form input, .movie-form textarea {
  width: 250px;
  font-size:14px;
  padding: 5px;
  margin: 5px;
}

.movie-form button {
  font-size: 16px;
  padding: 4px;
  margin: 10px 10px 30px 10px;
}

In App.js, aggiungete il componente <AddMovie /> all'interno del <div> di chiusura dell'elemento contenitore:

1	<AddMovie />

Poi, all'inizio del file, importate il componente <AddMovie /> per renderlo disponibile.

1	import AddMovie from './AddMovie';

La vostra app 'Movie Mojo' dovrebbe ora visualizzare un modulo nella parte inferiore della finestra del browser.

Displaying Movie Mojo at the bottom of the browser window

Abbiamo bisogno di specificare un metodo di callback che venga eseguito ogni volta che il modulo viene inviato, che possiamo usare per creare un nuovo film. Aggiungete a questo all'elemento <form>:

1	onSubmit={(e) => this.addNewMovie(e)}

Quindi, aggiungete il metodo addNewMovie() alla parte superiore della classe del componente <AddMovie />:

addNewMovie(e) {
  e.preventDefault();
  var movie =  {
    title: this.title.value,
    year: this.year.value,
    description: this.description.value,
    poster: this.poster.value
  };
  console.log(movie);
}

Il primo compito è quello di impedire che l'evento di invio predefinito sia lanciato, cosa che facciamo con e.preventDefault(). In caso contrario, quando il modulo viene inviato, la pagina web verrà automaticamente aggiornata, e non è quello che vogliamo.

Quindi, creiamo un nuovo oggetto film prendendo i valori del campo di input del modulo che abbiamo comodamente archiviati come proprietà della classe componente in precedenza.

Un comando console.log() consente di visualizzare l'oggetto movie così possiamo testare che viene creato correttamente al momento dell'invio del modulo.

Una volta che siete soddisfatti che l'oggetto movie sia generato correttamente, andate avanti ed eliminate la chiamata a console.log().

Per poter visualizzare il nuovo film nella nostra galleria, abbiamo bisogno di aggiungerlo all'oggetto di stato di movie. Una volta fatto questo, React avrà cura di aggiornare il DOM per noi.

A tale scopo, è necessario creare un nuovo metodo in App.js (dove vive l'oggetto di stato dell'app) per gestire l'aggiunta di un film allo stato corrente.

1	addMovieToGallery( movie ) {
2	console.log( 'mooooooovie', movie );
3	}

Non dimenticate di associare il nuovo metodo a this così è disponibile per tutta la classe.

1	this.addMovieToGallery = this.addMovieToGallery.bind( this );

Per inciso, vi chiederete perché dobbiamo fare ciò qui, ma non per il metodo addNewMovie() che abbiamo aggiunto al componente <AddMovie /> sopra. Si tratta di un effetto collaterale dell'utilizzo di una funzione arrow di ES6, poiché this lo associa automaticamente per voi. Questo piccolo trucco è vale la pena di ricordarlo poiché riduce la complessità del codice, pur migliorando la leggibilità del codice.

Per utilizzare addMovieToGallery() nel nostro codice del componente figlio <AddMovie />, passiamo semplicemente un riferimento ad esso via props. In App.js, aggiornate la chiamata a <AddMovie /> che diventa:

1	<AddMovie addMovie={this.addMovieToGallery} />

Tornate in AddMovie.js, aggiornate il metodo addNewMovie() per passare l'oggetto film al metodo addMovieToGallery() via il prop addMovie che abbiamo appena creato.

addNewMovie(e) {
  e.preventDefault();
  var movie =  {
    title: this.title.value,
    year: this.year.value,
    description: this.description.value,
    poster: this.poster.value
  };
  this.props.addMovie( movie );
}

Ora, quando si compila il modulo, otteniamo l'oggetto film come output nella console, come prima, ma questa volta è tramite il metodo addMovieToGallery() del componente <App />.

Reviewing the console for addMovieToGallery

Eliminate il comando console.log() in addMovieToGallery() e sostituitelo con il codice seguente per aggiungere i dettagli del film inserito all'oggetto di stato movies:

addMovieToGallery( movie ) {
  var ts = Date.now();
  var newMovie = {};
  newMovie[ 'movie' + ts ] = movie;
  var currentMovies = { ...this.state.movies };
  var newMovies = Object.assign( currentMovies, newMovie );
  this.setState({ movies: newMovies });
}

Questo è abbastanza simile a quello che abbiamo fatto nella terza parte per il metodo loadAdditionalMovies(). La differenza principale è che deve essere generata una chiave univoca, al volo, per ogni voce di ulteriori film. Ciò si ottiene utilizzando il timestamp corrente come chiave univoca e accodandolo a movie.

Questo si tradurrà in ogni film supplementare, aggiunto tramite il modulo, che ha chiavi univoche.

1	movie1501686019706
2	movie1501686027906
3	movie1501686032929

... e così via.

Aprite l'app 'Movie Mojo' nel browser e aggiungete due nuovi film alla galleria tramite il modulo. Ci sono le immagini dei poster dei film supplementari aggiunti alla cartella ./public/posters/ per comodità, così è possibile testare facilmente l'aggiunta di film alla galleria. È possibile accedere a questi scaricando il progetto dell'app finito.

Ogni volta che si invia il modulo, un film supplementare è aggiunto alla galleria!

L'installazione di Movie Mojo

Fate clic sul collegamento a destra (circa a metà della pagina) per scaricare il file zip del progetto finito 'Movie Mojo'. Una volta che estratto, aprite una finestra della riga di comando e passate alla directory movie-mojo e inserite:

1	npm install

Questo richiederà alcuni minuti per scaricare tutti i moduli di 'Node.js' necessari per eseguire il progetto.

Quindi digitate:

npm start

Questo compilerà l'app di React e la aprirà in un browser tramite un mini server web dedicato.

Conclusione

Abbiamo coperto molto in questa serie di tutorial in quattro parti, quindi complimenti se avete fatto tutta la strada e seguito il codice.

Dovreste ora stare a vostro agio con le nozioni di base di React, e speriamo che questo vi darà la fiducia necessaria per andare avanti e costruire applicazioni più complicate.

Consiglierei di scaricare il progetto 'Movie Mojo' ed esaminare il codice sorgente per assicurarvi di comprendere come tutto si incastra insieme.

Ci sono un sacco di opportunità di estendere l'app, quindi perché non provate inventare delle nuove funzioni extra? Questo è anche un ottimo modo di cementare il vostro apprendimento, nel tentativo di implementare nuovi elementi di React nell'app.

Ecco alcune idee che potreste considerare di aggiungere:

Aggiungere l'interfaccia utente e il codice per rimuovere i film dalla galleria.
Consentire l'ordinamento per titolo del film, anno, ecc.
Introdurre un sistema di valutazione.

Mi piacerebbe sentire i vostri commenti che potreste avere su questo tutorial nei commenti qui sotto. È stato trovato facile da seguire, o c'erano parti con cui avete avuto problemi? Sto sempre cercando di migliorare i miei tutorial, quindi un feedback è sempre molto gradito.

Buona scrittura di codice con React!