Cours intensif pour débutants, partie 3

Le résultat est quatre  composants ajoutés à notre galerie.

Il est très fastidieux d’ajouter des films manuellement, un par un App.js. En pratique, les données d'application proviendraient probablement d'une base de données et seraient temporairement stockées dans un objet JSON avant d'être ajoutées à l'objet d'état dans votre application..

Gestion de l'état de réaction

Quel est l'état dans une application React? Vous pouvez le considérer comme un objet JavaScript unique représentant toutes les données de votre application. L'état peut être défini sur n'importe quel composant, mais si vous souhaitez partager un état entre des composants, il est préférable de le définir sur le composant de niveau supérieur. L'état peut ensuite être transmis aux composants enfants et accessible en fonction des besoins.

Même si state est un objet principal, cet objet peut contenir plusieurs sous-objets liés à différentes parties de votre application. Par exemple, dans une application de panier, vous pouvez avoir un objet d'état pour les articles de votre commande et un autre objet pour surveiller l'inventaire..

Dans notre application "Movie Mojo", nous n'avons qu'un seul objet sous-état pour stocker les films dans notre galerie..

L'idée de base de l'utilisation de state est que, chaque fois que les données de votre application changent, React met à jour les parties pertinentes du DOM pour vous. Tout ce que vous avez à faire est de gérer les données, ou l'état, dans votre application, et React gère toutes les mises à jour DOM..

Ajout de films via State

Par souci de simplicité, nous allons renoncer à l'étape de la base de données et prétendre que nos données de film ont été extraites d'une base de données et stockées au format JSON..

Pour illustrer l'ajout d'éléments à un état initial, ainsi que l'état de mise à jour lorsqu'un événement survient (comme un appui sur un bouton), nous allons utiliser deux objets JSON, chacun contenant des données sur quatre films..

dans le src dossier, ajouter un nouveau movies.js fichier, ouvrez-le dans un éditeur et ajoutez le code suivant pour définir nos deux objets JSON:

// quelques exemples de films const initialMovies = movie1: titre: "La fête de Ferris Bueller", année: "1986", description: "Un type sage du lycée est déterminé à s'absenter de l'école, malgré ce que pense le principal de cela. ", affiche:" ./posters/ferris.png ", movie2: titre:" Journal de Bridget Jones ", année:" 2001 ", description:" Une femme britannique est déterminée à s’améliorer pendant qu’elle regarde. pour l’amour au cours d’une année dans laquelle elle tient un journal personnel. ", affiche:" ./posters/bridget-jones.png ", movie3: titre:" 50 premières dates ", année:" 2004 ", description:" Henry Roth est un homme effrayé par l'engagement jusqu'à ce qu'il rencontre la belle Lucy. Ils s'entendent bien et Henry pense qu'il a enfin trouvé la fille de ses rêves. ", Affiche:" ./posters/50-first-dates.png " , movie4: title: "Matilda", année: "1996", description: "Histoire d’une petite fille merveilleuse, qui est un génie, et de son professeur formidable contre les pires parents de tous les temps et les pires directeurs d’école imaginables. ", affiche:" ./posters/matil da.png "; const additionalMovies = movie5: title: "Dirty Dancing", année: "1987", description: "Passer l'été dans un resort de Catskills avec sa famille, Frances 'Baby' Houseman tombe amoureuse de l'instructeur de danse du camp, Johnny Castle . ", affiche:" ./posters/dirty-dancing.png ", movie6: titre:" When Harry Met Sally ", année:" 1989 ", description:" Harry et Sally se connaissent depuis des années, et sont de très bons amis, mais craignent que le sexe ne ruine l’amitié. ", affiche:" ./posters/when-harry-met-sally.png ", movie7: titre:" Elf ", année:" 2003 ", description: "Après avoir endommagé par inadvertance la communauté elfe en raison de sa taille disproportionnée, un homme élevé comme un elfe au pôle Nord est envoyé aux États-Unis à la recherche de sa véritable identité.", affiche: "./posters/elf. png ", movie8: titre:" Grease ", année:" 1978 ", description:" La bonne fille Sandy et le graisseur Danny sont tombés amoureux de l’été. Quand ils ont découvert qu’ils se trouvaient inopinément dans le même lycée, ils seront capables de les rallumer romance? ", affiche:" ./posters/grease.png "; export initialMovies; export additionalMovies;

Avant de pouvoir référencer les objets JSON dans notre  composant, nous devons les importer. Ajoutez ceci au sommet de App.js:

importer initialMovies de '… / movies'; importer additionalMovies de '… / movies';

Chaque objet JSON est maintenant disponible via les variables films initiaux et films supplémentaires. Jusqu'à présent, cependant, aucun état n'est associé à notre application. Réglons ça maintenant.

Le composant de niveau supérieur de notre application 'Movie Mojo' est , ajoutons donc notre objet d'état ici. Nous avons besoin que l'état soit initialisé avec la classe de composant, ce que nous pouvons faire via la fonction constructeur.

Lorsque vous utilisez une fonction constructeur dans une classe React, vous devez appeler super() d'abord comme Composant l'objet que nous étendons doit être initialisé avant toute chose. De plus, le ce mot-clé ne sera disponible dans le constructeur qu'après super() est revenu.

Pour initialiser notre Etat objet, ajoutez ceci à l'intérieur du  classe de composant:

constructeur () super (); this.state = movies: ; 

Cela créera un objet d'état vide pour notre application React. En utilisant les outils de développement de React, nous pouvons voir le Etat objet initialisé directement sur le  composant.

Cependant, nous voulons initialiser le Etat objet avec certains films afin qu'ils s'affichent immédiatement au chargement de la page. Pour ce faire, nous pouvons initialiser le films objet d'état avec films initiaux au lieu d'un objet vide.

constructeur () super (); this.state = movies: initialMovies; 

Cela définira l'état initial de notre application sur les quatre films stockés dans le films initiaux Objet JSON, mais les films de la galerie sont toujours affichés via le code codé en dur  composants que nous avons ajoutés plus tôt.

Nous devons sortir les films dans le film objet d'état à la place, ce que nous pouvons faire en utilisant une boucle pour parcourir chaque film.

Commencez par retirer le code dur  composants, et les remplacer par:

Object .keys (this.state.movies) .map (key => )

Ce code nécessite des explications. le film L'objet state contient des films individuels stockés sous forme d'objets, mais pour les parcourir, il serait plus facile de travailler avec un tableau..

Donc nous utilisons Object.keys () saisir toutes les clés pour les objets de film et les stocker dans un tableau. Ceci est ensuite itéré sur l’utilisation de .carte(), et un  composant est sorti pour chaque film dans le films objet d'état.

Il y a quelques changements par rapport à la manière précédente, nous avons ajouté un , bien que. Tout d’abord, nous transmettons toutes les informations d’un film individuel via un seul méta soutenir. C'est en fait plus pratique qu'avant, où nous avons spécifié un accessoire séparé pour chaque attribut de film.

En outre, notez que nous spécifions un clé prop aussi. React l'utilise en interne pour garder trace des composants ajoutés par la boucle. Il n'est pas réellement disponible pour être utilisé par le composant, vous ne devriez donc pas essayer d'y accéder dans votre propre code..

Sans un clé prop, React génère une erreur, il est donc important de l'inclure. React doit savoir quels nouveaux films ont été ajoutés, mis à jour ou supprimés pour pouvoir tout synchroniser.

Nous devons faire encore une chose avant que nos composants puissent être affichés. S'ouvrir Movie.js, et pour chaque référence à un accessoire, préfixez-le avec méta, comme suit:

 
this.props.meta.title
 
 
(this.props.meta.year)
 
this.props.meta.description
 

Chargement de plus de films

Nous avons vu comment afficher les films ajoutés à l'état initial de notre application, mais si nous voulions mettre à jour notre galerie de films à un moment donné?

C'est là que React brille vraiment. Tout ce que nous avons à faire est de mettre à jour les films du film Etat, et React mettra automatiquement à jour toutes les parties de notre application qui utilisent cet objet. Donc, si nous ajoutons des films, React déclenchera la  Composants rendre() méthode pour mettre à jour notre galerie de film.

Voyons comment nous pouvons implémenter cela.

Commencez par ajouter un bouton HTML dans le wrapper div de fermeture dans App.js.

Charger plus… 

Lorsque le bouton est cliqué, une méthode de classe loadAdditionalMovies est appelé. Ajouter cette méthode au  classe de composant:

loadAdditionalMovies () var currentMovies = … this.state.movies; var newMovies = Object.assign (currentMovies, additionalMovies); this.setState (movies: newMovies); 

La mise à jour de l'état est relativement simple tant que vous suivez la méthode recommandée, qui consiste à copier l'objet d'état actuel dans un nouvel objet et à mettre à jour cette copie avec de nouveaux éléments. Ensuite, pour définir le nouvel état, nous appelons this.setState et passez dans notre nouvel objet state pour écraser le précédent. Dès que l'état est mis à jour, React met à jour uniquement les parties du DOM affectées par le changement d'état..

La première ligne de loadAdditionalMovies () utilise un propager opérateur pour copier toutes les propriétés du this.state.movies objet dans le nouveau currentMovies objet.

Après cela, nous utilisons Object.assign pour fusionner deux objets ensemble, ce qui entraîne l'ajout de la liste des nouveaux films à la liste actuelle.

Il ne reste plus qu’une étape à franchir avant la loadAdditionalMovies () méthode fonctionnera. Pour référencer une méthode de composant personnalisée, nous devons d’abord la lier manuellement à la classe de composant..

C'est un caprice de React et c'est juste quelque chose que vous devez vous rappeler de faire. Chaque fois que l'on accède à une méthode sans avoir été liée manuellement, React se plaindra et lâchera une erreur de compilation..

Ajoutez ceci au constructeur de classe dans App.js:

this.loadAdditionalMovies = this.loadAdditionalMovies.bind (this);

Tant que vous vous rappelez d’utiliser cette solution de contournement pour chaque méthode personnalisée nécessitant l’utilisation de ce, vous ne rencontrerez aucun problème.

Maintenant, essayez de cliquer sur le Charger plus…  Bouton. Vous devriez voir quatre autres films ajoutés à la galerie.

Ceci démontre une force clé de React. Autrement dit, vous pouvez vous concentrer sur les données de votre application et laisser toute la mise à jour ordinaire du DOM à React. Pour ajouter des films, tout ce que nous devions faire était de mettre à jour les données de notre film objet d'état, et React s'est occupé de tout le reste.

Notre exemple d'application reste assez basique, mais imaginons une application beaucoup plus complexe avec de nombreux composants et plusieurs objets d'état. Essayer de mettre à jour manuellement le DOM car les données de votre application seraient une tâche énorme (et sujette aux erreurs)!

Conclusion

Dans ce tutoriel, nous avons vraiment progressé avec notre application «Movie Mojo». Nous avons utilisé l'état React pour aider à gérer la liste des films dans notre application. Nous avons non seulement ajouté des films à l'objet d'état initial lors de l'initialisation de notre application, mais nous avons également mis à jour la liste des films de notre galerie lorsque la Charger plus…  Le bouton a été cliqué.

Dans la quatrième partie et le dernier tutoriel de cette série, nous verrons comment ajouter manuellement un film à notre galerie via un formulaire personnalisé. Les utilisateurs pourront remplir le formulaire et ajouter des détails sur un film, qui seront ajoutés à la liste des films affichés dans la galerie..