Cours intensif pour débutants, partie 4

onSubmit = (e) => this.addNewMovie (e)

Ensuite, ajoutez le addNewMovie () méthode au sommet de la  classe de composant:

addNewMovie (e) e.preventDefault (); var movie = titre: this.title.value, année: this.année.valeur, description: this.description.value, affiche: this.poster.value; console.log (film); 

La première tâche consiste à empêcher le déclenchement de l'événement de soumission par défaut, ce que nous faisons avec e.preventDefault (). Sinon, lors de l'envoi du formulaire, la page Web s'actualisera automatiquement, ce qui n'est pas ce que nous voulons..

Ensuite, nous créons un nouvel objet de film en récupérant les valeurs de champs de saisie de formulaire que nous avons stockées auparavant en tant que propriétés de la classe de composants..

UNE console.log () la commande affiche le film objet afin que nous puissions tester qu'il est créé correctement lors de la soumission du formulaire.

Une fois que vous êtes satisfait du film l'objet est correctement généré, continuez et supprimez le console.log () appel.

Afin d’afficher le nouveau film dans notre galerie, nous devons l’ajouter au film objet d'état. Une fois cela fait, React se chargera de mettre à jour le DOM pour nous..

Pour ce faire, créez une nouvelle méthode dans App.js (où réside l'état de l'application) pour gérer l'ajout d'un film à l'état actuel.

addMovieToGallery (movie) console.log ('mooooooovie', movie); 

N'oubliez pas de lier la nouvelle méthode à la ce il est donc disponible pendant toute la classe.

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

Incidemment, vous pouvez vous demander pourquoi nous avions besoin de le faire ici, mais pas pour le addNewMovie () méthode nous avons ajouté à la  composant ci-dessus. Ceci est un effet secondaire de l’utilisation d’une fonction de flèche ES6, car elle lie automatiquement ce pour vous. Rappelez-vous ce petit truc, car il réduit la complexité du code tout en améliorant la lisibilité de votre code..

Utiliser addMovieToGallery () dans notre  code de composant enfant, nous lui passons simplement une référence via des accessoires. Dans App.js, mettre à jour le  appeler pour être:

Retour dans AddMovie.js, mettre à jour le addNewMovie () méthode pour passer l'objet de film à la addMovieToGallery () méthode via le addMovie prop nous venons de créer.

addNewMovie (e) e.preventDefault (); var movie = titre: this.title.value, année: this.année.valeur, description: this.description.value, affiche: this.poster.value; this.props.addMovie (film); 

Maintenant, lorsque nous remplissons le formulaire, l’objet film est envoyé à la console, comme auparavant, mais cette fois, c’est via le addMovieToGallery () méthode dans le  composant.

Supprimer le console.log () commande en addMovieToGallery () et remplacez-le par le code suivant pour ajouter les détails du film entrés au films objet d'état:

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); 

C’est assez similaire à ce que nous avons fait dans la troisième partie pour le loadAdditionalMovies () méthode. La principale différence est qu'une clé unique doit être générée, à la volée, pour chaque entrée de film supplémentaire. Ceci est réalisé en utilisant l’horodatage actuel comme clé unique et en l’ajoutant à film.

Cela donnera à chaque film supplémentaire, ajouté via le formulaire, des clés uniques.

movie1501686019706 movie1501686027906 movie1501686032929

… etc.

Ouvrez l'application "Movie Mojo" dans le navigateur et ajoutez deux nouveaux films à la galerie via le formulaire. Des images d’affiche de film supplémentaires ont été ajoutées au ./ public / affiches / dossier pour plus de commodité, afin que vous puissiez facilement tester l’ajout de films à la galerie. Vous pouvez y accéder en téléchargeant le projet d'application terminé..

Chaque fois que vous soumettez le formulaire, un film supplémentaire est ajouté à la galerie.!

Installation de Movie Mojo

Cliquez sur le lien à droite (à peu près au milieu de la page) pour télécharger le fichier zip du projet "Movie Mojo" terminé. Une fois qu'il est extrait, ouvrez une fenêtre de ligne de commande et accédez au film-mojo répertoire, et entrez:

npm installer

Cela prendra quelques minutes pour télécharger tous les modules 'Node.js' nécessaires à l'exécution du projet..

Puis tapez:

npm start

Ceci compilera l'application React et l'ouvrira dans un navigateur via un mini serveur Web dédié..

Conclusion

Nous avons couvert pas mal de choses dans cette série de tutoriels en quatre parties, alors félicitations si vous avez suivi le code et suivi le code.

Vous devriez maintenant vous sentir à l'aise avec les bases de React, ce qui, espérons-le, vous donnera la confiance nécessaire pour créer des applications plus complexes..

Je vous recommande de télécharger le projet 'Movie Mojo' et d'examiner le code source pour vous assurer de bien comprendre comment tout cela fonctionne..

Il y a beaucoup de possibilités d'étendre l'application, alors pourquoi ne pas essayer de proposer de nouvelles fonctionnalités supplémentaires? C'est également un excellent moyen de consolider votre apprentissage en essayant de mettre en œuvre de nouveaux éléments React dans l'application..

Voici quelques idées que vous pourriez envisager d'ajouter:

• Ajouter une interface utilisateur et du code pour supprimer des films de la galerie.
• Autoriser le tri par titre de film, année, etc..
• Introduire un système de notation.

J'aimerais entendre vos commentaires sur ce tutoriel via les commentaires ci-dessous. Avez-vous trouvé cela facile à suivre, ou y avait-il des parties avec lesquelles vous avez lutté? Je cherche toujours à améliorer mes tutoriels, les commentaires sont donc toujours les bienvenus..

Happy React codage!