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

Créer un premier composant

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous créerez un premier composant. Vous apprendrez à déclarer le composant pour le rendre disponible.
04:58

Transcription

Si vous avez compris ce qu’on a fait juste avant, il est maintenant temps de créer soi-même son propre composant ! On va commencer avec quelque chose de très simple. Je vais devoir vous expliquer donc peut-être devrez-vous re-regarder cette vidéo. Je vous conseille aussi de mettre pause et de recopier, ou alors de regarder un petit peu les différentes imbrications et tout ce qu’on aura mis dans le fichier. C’est très simple, regardez : on va y aller simplement, on va créer une page HTML. Je crée dans un dossier React, qui est un dossier de projet, index.HTML. C’est un document HTML assez basique, avec DOCTYPE, HTML, head et body. Dans le « head », je vais avoir trois scripts à utiliser. Je vais utiliser via unpkg.com, la dernière version de React, la 15.3.2, je vais utiliser aussi ReactDOM parce que j’en ai besoin et je vais également utiliser le compilateur Babel ou le pseudo-JavaScript que je vais écrire dans ma page, en Babel. Ensuite, dans mon « body », je vais uniquement avoir besoin, pour le moment, d’un point de montage, une « mountNode ». Concrètement c’est simplement une « div », avec un ID qui va me permettre d’injecter mon composant à l’intérieur. À partir de là, que vais-je faire ? Je vais ouvrir ici un « tag text » qui va être « text/babel ». J’aurais pu faire du JavaScript, comme ça, ça aurait été bien, j’aurais eu la coloration syntaxique. Le seul problème c’est que le compilateur Babel qu’on a intégré ici ne comprend que ce type de texte, le texte Babel, pour pouvoir ensuite le compiler. Vous allez être obligés d’utiliser ça. Et ensuite que fais-je ? Je vais créer, avec du JavaScript de base, mon « mount point » dans une variable. Je vais lui dire : document.GetElementByID et « mountNode ». Il va récupérer cet élément-là. Maintenant je vais créer vraiment ici le corps de mon composant. Ça marche toujours pareil en React, dans cette version-là, vous allez créer une classe, « class MyComponent » qui va faire un « extends React » (avec R majuscule) « .component ». Ensuite, vous allez ouvrir à l’intérieur et ne créer qu’une seule fonction, la fonction « render ». Cette fonction va faire un « return » comme ça et puisqu’ici j’ai envie de bénéficier des sauts de lignes, etc... et de pouvoir taper ce que je veux en HTML à l’intérieur, je vais utiliser ouverture de parenthèse et fermeture de parenthèse. J’aurais tout à fait pu, sans aucun problème, venir mettre ma ligne à la suite du « return », Babel le comprend aussi mais je vous conseille quand même d’utiliser les parenthèses, c’est quand même plus intéressant parce que vous allez pouvoir travailler sur des lignes différentes à l’intérieur de votre composant. Ensuite à la fin, j’ai tout fermé, ma classe c’est toute cette partie-là. je vais écrire ReactDOM donc je vais utiliser ReactDOM et je vais lui demander de faire un rendu de mon composant. Vous remarquez qu’ici c’est un « tag » qui est auto-fermé, qui porte le nom de ma classe. C’est ce que vous devez respecter : le nom d'une classe que vous avez créée, la classe étant un composant à part entière et vous allez faire le rendu. Où est-ce que vous allez faire le rendu ? Dans la « mount Node » que vous avez placée dans une variable juste avant. Donc concrètement, on crée une classe de composants, on lui demande de faire simplement un « return » « Hello, world! » dans un titre de niveau 1, puis on l'attache sur un nœud HTML déjà existant, c’est tout ce qu’on a à faire. Cette partie-là, quand vous allez l’ouvrir dans le navigateur, voilà ce qui va se passer : vous allez avoir « Hello, world! » qui s’affiche. Si j’ouvre mon panneau, vous allez allez sur l’onglet React, ça va se connecter et vous allez bien voir qu’ici, vous avez bien un composant qui comporte le code « Hello, world! » Alors attention, je l’ai ouvert sur mon serveur HTTP. Je vous conseille de faire comme ça et pas de façon différente, c’est-à-dire qu’on pourrait simplement lui dire : ouvre-le moi comme ça dans Google, directement depuis les fichiers. Ça c’est possible, le seul problème en faisant ça, si vous ne le faites pas tourner sur un serveur web, c’est que vous n’allez pas pouvoir vous connecter à votre React. Votre React doit forcément tourner sur un serveur web si vous voulez pouvoir interagir avec le code. Vous devrez faire pointer votre serveur web sur votre dossier React. Quand vous aurez fait, ça ce sera bon, vous serez ok et il n’y aura plus qu’à commencer à coder. Alors retenez simplement ça : on vient de créer un premier composant qui est très simple. Voilà comment ça marche, on a simplement besoin de créer la classe de composant, de venir faire le rendu dans un point de montage qu’on a, au préalable, placé dans une variable et ça se fait tout seul. Gardez en tête qu’on vient d’écrire du Babel, ni plus ni moins, c’est-à-dire qu’on vient d’écrire du JSX ! En JavaScript on ne peut pas faire tout ça, on n'a pas la possibilité de faire des « extend », etc... Ce sont vraiment JSX et Babel qui nous permettent de venir travailler avec une écriture comme celle-là, extrêmement simple et très esthétique. Certes, pour le moment elle n’est pas colorée, mais ça viendra !

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 !