Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de React.js

Ajouter des enfants aux éléments

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les sous-composants sont utiles pour segmenter le code et avoir des petits bouts de code. Vous allez alors créer un second composant.
03:59

Transcription

C’est facile quand on fait, comme ça, absolument tout à l’intérieur, vous avez vu comment on fait un seul composant. Mais imaginons maintenant que cette partie-là, le « input » et le « state » qui se trouve juste en-dessous, j’ai envie de les sortir dans un sous- composant. J’ai envie de faire un autre petit composant qui prenne celui-ci. C’est pas un problème ! On a la possibilité de découper le code en plusieurs composants. On va commencer d’abord par créer une classe, qui va s'appeler « SearchComponent ». De la même manière elle va « extends », faites bien attention à respecter ceci, c’est un « R» majuscule, sinon vous aurez des erreurs. On va reprendre quasiment la même chose que ce qu’on a là, un constructeur. On va pouvoir faire un copier-coller. Pensez bien à indenter proprement, il y a un « super », il y a un « state » qui va pas prendre de « name » mais juste une « query » et ici il y a uniquement le « name », comme ça, on va rester sur quelque chose de correct. Le « changeName », on en n'a pas besoin, le « this.update », on en a besoin. De l’autre côté, c’est le « this.update » qui va sauter. Ensuite on va prendre le « update » et on va le couper et on va venir le caler ici. On se retrouvera pour le moment avec un composant qui comporte de la logique pour l’« update» d’un champ et un constructeur assez simple qui a un « state » et une « query ». Pour le moment, tout va bien. Maintenant, le « render ». Le « render » va quasiment être pareil, il va définir un élément au-dessus comme on l’a vu juste avant, sinon on risque d’avoir des problèmes. On pense bien à tout fermer, sinon on va se tromper et on pense aussi à avoir un élément ouvrant et fermant, qui peut ensuite accepter ce qu’on va y mettre. Enfin, on va déplacer ces deux lignes-là qui sont intéressantes dans le cas de notre « SearchComponent » mais pas dans le cas de « MyComponent ». On pourra d’ailleurs le renommer en « MainComponent », qui est plus parlant, qui veut dire que c’est notre composant principal. Si vous renommez la classe, vous penserez bien à renommer également car ce que vous allez faire au rendu à la fin c’est bien le « MainComponent ». Maintenant, ça c’est pas trop mal, par contre si je recharge la page, je n’ai plus mon « SearchComponent » et, en plus, j’ai une erreur. On me dit que j’ai un souci quelque part. Alors il faut regarder un petit peu... On n'a pas fermé la classe de « render » ! Faites bien attention aux messages d’erreur, ils sont importants, ils vous donnent toujours de l’information c’est bien de regarder ce qui se passe. On a perdu le composant, voilà. Le souci maintenant, c’est qu’il va falloir ajouter le « SearchComponent » et qu’on le mette à l’intérieur de notre « MainComponent ». Ce n’est pas un souci non plus. Le « MainComponent », c’est un « MainComponent » donc on pourrait très bien venir utiliser le « SearchComponent » à l’intérieur de notre « MainComponent ». Bon, ce « templating », on va ouvrir une balise et on va lui dire qu’à cet endroit-là, il y a un « SearchComponent » qui ne prend pas de valeur particulière, il n'a pas de configuration et on va pouvoir retrouver la fonctionnalité qu’on avait développée avant. Je vous conseille le plus possible de faire des petits composants. D’ailleurs, ce qu’on a au-dessus, c’est-à-dire le titre qui change en fonction du « click », ça pourrait aussi être un petit composant qui ne prend que cette logique-là. À force, vous allez pouvoir découper en plein de petits composants et vous allez pouvoir les imbriquer. On parle ici de composant parent, le « MainComponent » et de composant enfant, le « SearchComponent » qui est rendu à l’intérieur du « MainComponent ». L’idé c’est de tous les déclarer d’abord. Quand vous ferez le rendu final d’un composant qui en comporte d’autres, React va venir tout compiler mais attention le scope d’exécution de ce composant-là, c’est un scope d’exécution qui est à part de l’exécution du « MainComponent ». Ce qui ne veut pas dire qu’on ne va pas pouvoir passer d’information. Imaginez bien qu’ici j’aurais tout à fait pu définir des options qui viennent encore, en entrée, remplacer ce qui se trouve ici. Donc il n'y a pas de problème pour faire du passage, on peut passer des informations, on peut remonter des informations, c’est assez simple d’utiliser les différents composants ensemble.

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
Votre/vos formateur(s) :
Date de parution :27 oct. 2016
Durée :3h28 (49 vidéos)

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 !