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

Monter un composant

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous entendez souvent parler de montage/démontage d'un composant. Dans la pratique, qu'est-ce que cet ensemble de termes signifie ?
03:46

Transcription

Depuis le début, je vous parle de montage/démontage de composants… Ça peut paraître un peu particulier ! Ne vous trompez pas et, surtout, ne vous embrouillez pas. Il n' y a rien de sorcier là-dedans ! Le fait de monter un composant revient à créer la classe, comme ça et à venir le définir dans une structure en HTML, dans un autre composant, par exemple. Quand vous allez le définir, il sera monté automatiquement par React. il va être créé par React et, au moment où il va avoir un rendu, le composant parent va être rendu, ce composant va être monté. C’est comme ça que ça marche. Le démontage va être un petit peu plus particulier. Le montage est très simple et quand un composant se monte, on a tous les événements qu’on a vus précédemment, qui font partie du rendu de base, vont se déclencher. Un composant monté sera, à un moment ou à un autre, rafraîchi en fonction de ce qu’on va lui donner comme « props », comme « state », etc. Pensez à quelque chose, c’est qu’on a la possibilité d’améliorer les choses, de temps en temps. Ici, on fait un appel, comme ça, on crée un composant, via la méthode « render ». Ce n’est pas très propre de faire comme ça du HTML, avec une espèce de balise. On pourrait améliorer un peu les choses et avoir quelque chose de beaucoup plus propre, notamment sur cette partie-là. On ne pourra pas le faire partout mais c’est vrai qu’ici ça vaudrait le coup. Je vous conseille de faire un tour sur la documentation de React et de performer sur toutes les API qui existent : « Top Level API », le « Component API », il y a plein de choses très intéressantes à lire, c’est un peu long, c’est un peu rébarbatif parce qu’on voit à certains endroits des explications à d’autres explications… Ici c’est vraiment la « Top Level », ça va vous donner les méthodes existantes. Il y a une méthode que j’aime bien, c'est la « createElement ». Je vous montre comment on l'utilise, elle est très simple en réalité. On va se créer ici une variable provisoire que je vais appeler « MainComponent » et « Element ». Attention de ne pas lui donner le même nom que votre composant parce que ça risque de ne pas marcher et vous allez avoir des problèmes. Je vais utiliser « React.createElement » et je vais, à l'intérieur, lui passer un premier paramètre comme ce qui est écrit dans la documentation, une « React class ». Concrètement, je vais lui dire « ok, tu vas me créer un « MainComponent » Derrière c’est un objet qui va vous permettre, comme le dit la documentation, de travailler avec les « props ». Plutôt que d’avoir des « props » sous format « string », ce n’est pas très propre, je vais pouvoir créer des « props » sous format objet. Je vais simplement lui dire ok, « color blue », tout simplement, et j’aurai créé un composant directement avec la librairie React et la fonction, l’utilitaire « createElement ». Je vais ensuite prendre cette variable provisoire que vais placer ici. Je vais enregistrer, je vais penser, n’oubliez pas, à repasser ça en Babel, sinon ça ne va pas compiler et puis, de l’autre côté, je vais juste rafraîchir ma page. Qu’est-ce que ça a changé ? Rien du tout ! C'est exactement la même chose, le même rendu. Le seul truc, c’est que c'est un peu plus propre. Écrire comme ça vous permet d’avoir un peu plus la main sur les éléments et puis, ici, c’est de l’objet, c’est quand même beaucoup mieux que d’avoir des propriétés et des attributs en HTML, on est vraiment sur un format objet. Si on veut définir des propriétés particulières ailleurs, on peut le faire, on a la possibilité de faire ça comme ça. Pensez-y, pensez à passer par React, à passer par la librairie, à passer par toutes les méthodes existantes parce que vous avez beaucoup de possibilités. Ça, c’est vrai que vous allez pouvoir le découvrir après. Je tenais vraiment à vous le montrer parce que ça existe, il ne faut pas rester sur les bases, essayez de pousser le plus loin possible tout le temps.

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 !