L'essentiel de React.js

Comprendre la syntaxe

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Utilisez JavaScript de manière évoluée, avec une syntaxe particulière et très intéressante. Le JSX est parfait pour les développeurs.
03:37

Transcription

Bienvenue dans le monde de React ! Et bienvenue dans le monde de JSX ! Effectivement, React utilise pleinement les spécifications JSX et la façon d’écrire de JSX. C’est quoi, JSX ? En fait, EcmaScript est le nom réel de JavaScript et JSX c’est du JavaScript à la sauce XML. Concrètement, ça va nous permettre de mettre en place une espèce de spécification qui permettra de définir des composants de l’interface utilisateur sous forme de balise, généralement avec une majuscule, c’est comme ça que ça marche. On a un exemple intéressant-- je vous conseille quoi qu’il arrive de lire entièrement la spécification JSX qui est très importante et intéressante à lire. Cela vous permet de dire : ici j’ai un « drop-down », à l’intérieur j’ai un men, ensuite j’ai des « menu items » donc ça permet, avec du sucre syntaxique, de venir définir des vrais noms pour nos différents composants et de faire, avec React, le rendu et la logique qui se trouvent dans ces composants un petit peu à part. On a du « templating », qui permet de faire du rendu et puis on a ensuite de la logique métier, la logique métier sera donc dans les composants, directement dans le corps du composant. On aura beaucoup de choses qu’on peut venir définir à l’intérieur du corps du composant. Ce qui est bien aussi c’est que ça permet de faire des composants imbriqués : le « menu items » dans « menu », le « menu » dans « drop-down » et comme ça tout le monde est à sa place et on peut avoir à chaque fois de la logique par composant, c’est super propre. C’est un petit peu déroutant au départ d’écrire du JSX mais vous verrez, au fur et à mesure, que c’est extrêmement simple à utiliser. Il y a deux pages à regarder : "JSX Specification" qui est vraiment intéressante, il faut la lire et puis la garder de côté parce qu’elle définit vraiment tout ce que vous pouvez faire et les "pages de documentation" qui se trouvent sur la doc de React dans la partie Docs et directement, dès le début, « displaying data » et ici on a « JSX in-depth » qui vous permet d’avoir toute l’information sur comment on utilise JSX au sein de React. Vous verrez, on va en faire quoi qu’il arrive, pour la base de la base. On peut définir et utiliser soit des rendus de tags HTML purs donc comme ça, on va même pouvoir l’auto-fermer. Vous remarquez qu’il n’y a pas d’ouverture ou de fermeture, vous verrez que, en JSX, on écrit directement à l’intérieur du code, sans avoir à se soucier de l’ouverture ou de la fermeture sauf si on fait du multi-ligne mais on en reparlera plus tard. Là on va définir juste une variable qui contient le « templating » et avec React DOM on va faire un rendu de cette variable-là directement dans une autre balise HTML qui porte l’ID « example ». On peut aussi faire directement du rendu de classe donc de composant complet. On va définir un composant qui va être une classe React et on va définir un élément qui va donc être du « templating » pur directement dans le code JavaScript. C’est le seul truc qui pourrait un peu vous dérouter au début, c’est qu'on se dit « Je suis en train d’écrire du HTML dans le JavaScript. » Oui mais c’est comme ça, vous pouvez le faire, le JSX c’est ça ! Ça vous permet d’écrire très rapidement votre template directement dans le JS. Vous allez le faire et vous allez voir qu’au fur et à mesure, au final, on s’y fait, il n'y a pas de souci, c’est très rapide. Donc, ce composant vous voyez bien que c’est MyComponent, MyComponent est juste au dessus, c'est une classe, c’est un composant que vous avez créé avec de la logique métier dedans, vous le définissez sur une variable et, de la même manière, vous allez l’injecter, vous allez le rendre, directement quelque part. C’est le langage qui permet de faire fonctionner React, c’est le langage qui a été choisi. Gardez bien à l’esprit, on va le voir dans la prochaine vidéo, ça va recracher du JavaScript ! C’est toujours pareil : il y a toujours un « transpiler » comme ils l'appellent, qui va prendre votre JSX ou n’importe quel sous-langage et qui va recracher du JavaScript au final.

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 !