Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de React.js

Garder la logique métier dans un composant

Testez gratuitement nos 1336 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Garder la logique métier au bon endroit est indispensable pour développer des applications faciles à maintenir.
08:12

Transcription

On s'accroche un petit peu, on va voir un exemple complet, d'une implémentation avec des événements et avec tout un fonctionnement à l'intérieur, donc de la logique métier, dans les composants. J'ai refactorisé donc j'ai réécrit une partie de l'application, vous allez vous aussi la réécrire. Vous regarderez, vous ferez pause au fur et à mesure, ne vous inquiétez pas, ça va être assez simple pour vous. J'ai créé un gestionnaire de tâches. Il est très simple. On va pouvoir cliquer sur un des noms de la liste ici, pour faire changer la personne actuellement et puis surtout ici, assigner une tâche A. On va pouvoir, quand on sélectionne quelqu'un, venir lui ajouter une tâche. Par exemple « Christophe doit commander des liquides.» On va cliquer sur ajouter, hop ! Ça va nous ajouter directement la tâche. Vous remarquerez qu'ici, quand j'ai démarré l'application, la tâche n'était pas affichée, on ne vient l'afficher que s'il y a des éléments dans la collection de tâches à réaliser. Par exemple, « Roby doit pousser le CSS du site. », ajouter et on ajoute. Bien sûr on peut faire varier, « Julien doit faire la review du code. » et on fait ajouter. Du coup, on va pouvoir ajouter autant d'items qu'on le souhaite à la collection. Mais passons au code source. Qu'ai-je fait, qu'est-ce que j'ai modifié ? Bien sûr, absolument tout ! Comme vous le voyez, c'est un petit peu plus épais qu'avant, j'ai d'abord réécrit certaines informations notamment ici le « state », c'est une « task ». J'ai mis un « update », j'ai mis un « submit », pourquoi ? Parce que j'ai créé un vrai formulaire. J'ai ici un « update », cet « update » que fait-il ? Il fait un « setState » de « query », ce qu'on a vu tout à l'heure. Le « submit » est très important. Mais d'abord, je vais vous montrer le code qu'on a au niveau du « template ». On a un formulaire assez simple, un « onSubmit » qui est câblé dessus avec le « this.submit ». « this.submit » est au-dessus et « this.submit » fait référence à cette fonction-là. On a ensuite un h2 Assigner une tâche, on a un « input » avec une référence. Le « input » est câblé sur un « onChange », le « onChange » c'est « this.update », « this.update », c'est simplement cette partie-là. On a un « placeholder » pour le titre et un bouton « ajouter ». Un bouton comme ça, si vous le soumettez sur un formulaire, va utiliser le « submit » du formulaire. Il va donc déclencher le « onSubmit » qu'on a ici. On n'oubliera pas, parce qu'on est en JS, de passer l'événement à l'intérieur du « submit » pour faire un « preventDefault ». Pourquoi ? Parce que sinon, l'événement par défaut d'un « submit » de formulaire, c'est de recharger la page. Nous n'avons pas envie que ça recharge donc on pensera bien à bloquer ce comportement. Vous remarquerez qu'ici, j'ai utilisé les « props » donc les « props » qu'on a passé au rendu en dessous, dans le parent de ce composant, pour venir me câbler sur le « onSubmit ». Que vais-je faire ? Je vais envoyer un objet au « onSubmit » qui sera ajouté à la collection, plus bas. Cet objet va être composé du nom actuel, le nom est mis à jour chaque fois qu'on va cliquer. C'est une propriété qui est passée au composant, et la valeur de l'« input » est donc la valeur qu'on a actuellement. On aurait pu aussi simplement utiliser « this.query » puisqu'on crée le « state query » sur le composant donc on peut utiliser « this.state.query » ça marche aussi. On a également réécrit à la fin « this.input.value », pourquoi ? Parce qu'on veut vider le champ de formulaire, à chaque fois qu'on va soumettre. Vous voyez, quand je clique ça vide le champ de formulaire. Quand je viens ajouter une tâche, ça vide le champ de formulaire. C'est fait exprès et il faut agir comme ça sur la valeur, simplement remettre une valeur à « null » et c'est suffisant pour vider le formulaire. On va passe au « render ». On a vu un petit peu tout ce qui se passe. Je fais une recap : on a bien sûr une « onSubmit » qui va être appelée et qui va renvoyer sur la « props » « onSubmit ». La « props» « onSubmit », qu'est-ce que c'est ? Concrètement, c'est vrai que ça a un peu évolué de ce côté-là aussi, mon « component », ici, je vais lui ajouter « onSubmit=this.addItem » qui fait référence à une fonction que j'ai ajoutée ici. Il faut le « double-binder », il faut le référencer, ici, c'est ajouté là et c'est redéfini au-dessus comme vous pouvez le voir ici, le « submit » qu'on a là est défini mais il faut également et c'est très important, il faut le définir dans notre composant, ici le « addItem ». Tout simplement, pourquoi ? Parce que le « addItem » va faire un « setState ». Si vous ne définissez pas un « bind », vous n'aurez pas accès à « this », vous n'aurez pas accès au « state » de ce composant parent. Donc faites bien ça, faites très attention. Qu'est-ce qu'on a de sympa ? « this.state.items » ! Comme vous pouvez le voir, j'ai rajouté des utilisateurs et j'ai rajouté des items qui sont tous les deux des collections, simplement un « array » en JavaScript, et je fais un « concat » de l'item, l'item étant constitué un peu au-dessus. L'item est créé, c'est « task: », j'ai concaténé le « name » et la valeur, pour pouvoir avoir une ligne propre. À chaque fois qu'on va ajouter, ça va être déclenché. Le « onSubmit » qu'on a là, c'est bien notre « this.addItem » et il sera déclenché en dessous, dans le composant enfant. La dernière particularité de cet exercice va être de pouvoir afficher, de pouvoir faire un vrai « display» bien propre. On va tabuler là les différentes valeurs. Je vais juste modifier un petit peu, j'ai fait un « ul » et, à l'intérieur, regardez, j'utilise ici des accolades ouvrantes et fermantes et je fais un « this.state.user.map ». On va utiliser la fonction « map » de JavaScript sur la collection d'utilisateurs et on va pouvoir lesc itérer. En fait le « map » va itérer, va faire à chaque fois un « return ». Vous remarquez quelque chose : je crée une variable « change » avec la fonction « changeName » qui permet de changer de nom et d'assigner l'utilisateur actuel. Faites très attention à ça, c'est un peu obligatoire en React. Vous allez être obligés de faire ça, parce qu'il faut que cette assignation soit unique à chaque fois. Passez bien « this » et « i », « i» étant l'index, à chaque fois. « User », ça va être juste le nom d'utilisateur, je le passe en « key ». Faites très attention à ça. Je vais simplement assigner au « click » sur l'utilisateur la fonction « change » que j'ai stockée plus haut. Ça c'est pour la liste des utilisateurs. Maintenant ici, c'est la collection. Vous vous souvenez, le titre ne s'affichait pas si la collection était vide. Ça se réalise très facilement. On va simplement utiliser « className » et « className » va nous permettre de définir la classe. La classe va être très simple. On va vérifier la consistance de la collection items, s'il y a des items à l'intérieur, on va afficher. Sinon on va mettre la classe « hidden ». « hidden » c'est très intéressant, pourquoi ? Parce que c'est une classe CSS, que j'ai définie beaucoup plus haut. Le « .hidden » fait un « display:none », c'est suffisant pour cacher. Dernière chose que l'on va voir ensemble, c'est l'itération, qui va être exactement la même que pour les utilisateurs sauf qu'on va agir ici sur « items ». On va mapper « Items » et on va lui dire de m'afficher à chaque fois les items. Regardez, je vais chercher la propriété « task » de l'item. Où est cette propriété « task »? Un petit peu plus haut dans la constitution de mes objets. Je vous en montre un dernier et on aura fini avec cet exercice. Je peux vous dire que vous allez bien vous amuser. Il va falloir le reproduire, c’est l’exercice avant de passer au prochain chapitre. Faites-le, c’est vraiment important, il est très sympa. Il y a beaucoup de logique, il y a beaucoup de petites fonctionnalités sympa à utiliser. L’ajout se fait ici, faites bien attention, j’ai fait un « setState » sur les « items » et je récupère le « state.item » et je fais un « concat » d’un item que je mets dans un « array ». C’est important de faire ça, essayez de bien étudier cette ligne-là, pourquoi ? Parce qu’on ne peut pas agir sur le « state » et sur une propriété du « state » comme ça directement. Il faut toujours passer par « setState », c’est obligatoire, ça s’appelle de l’immutabilité. Cela veut dire que les propriétés sont protégées, on ne peut pas agir directement, il faut passer par « setState » si on veut modifier quelque chose. La technique, la petite astuce, c’est de récupérer le « state » d’avant, faire un « concat » dessus. Du coup on ne fait pas du tout d’écriture mais de la lecture et on ajoute une information et on « reset » la variable « item » dans le « state ». Comme ça on est tranquille, ça fonctionne tout seul. Voilà pour cet exemple. Vous voyez qu’on peut mettre beaucoup de logique dans les composants et on peut découper proprement pour avoir quelque chose de puissant, de performant et, en même temps, sans beaucoup de lignes de code, on a deux composants assez sympa, qui interagissent l’un avec l’autre.

L'essentiel de React.js

Exploitez pleinement React.js ! Créez des composants web complexes rapidement, découvrez leurs relations ainsi que leurs cycles de vie, passez en revue la navigation, etc.

3h28 (49 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
React.js React.js 15.3.2
Spécial abonnés
Date de parution :27 oct. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !