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

Prendre en main le JSX et le compilateur Babel

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Pour que le navigateur puisse lire votre JSX, il est nécessaire d'utiliser un compilateur et de le transformer en JavaScript pur.
04:46

Transcription

Rassurez-moi, je ne vous ai pas perdu avec le JSX, vous êtes toujours là ? On va avancer un peu plus dans le JSX. J’ai envie que vous compreniez ce qui se passe derrière React. React est écrit avec un sous-langage et vous allez souvent avoir à faire ça. Je vais prendre un autre exemple : Angular qui utilise du TypeScript. Toutes les librairies et tous les Framework un peu modernes vont utiliser des sous-langages, tout simplement pour éviter d’avoir à taper du JavaScript parce que ce serait horrible. Vous ne me croyez pas ? Je vais vous montrer, regardez. Avec React, pour le JSX, on va utiliser Babel. Babel, c’est un compilateur, on va l'utiliser pour prendre notre JSX et recracher derrière du JavaScript. On peut faire ça avec pas mal de choses. Vous verrez qu’on a déjà des exemples sur le site de Babel, on va pouvoir écrire ça, comme ça. Concrètement, ça nous évite d’écrire : « fonction(n), ouverture » puis, à l’intérieur, le « return ». On peut directement écrire ça, regardez, c’est génial ou pas ? On va avoir toute cette partie-là qui va être réduite à n flèche et puis n+1. Ça voudra dire « return » ici, ça voudra dire fonction au-dessus, on n'a plus besoin des parenthèses, sauf dans le cas où vous allez avoir plusieurs paramètres. Mais vous le verrez, au fur et à mesure, vous allez comprendre très rapidement comment on écrit ce genre de chose, la courbe de progression est extrêmement rapide ! Quand vous aurez pris le coup, vous n'aurez plus du tout envie de taper ça. Ce sera terminé, vous en aurez plus besoin et puis, en plus, on gagne du temps, c’est plus clair, c’est propre et on sait comment ça fonctionne. Babel, il faudra l’installer, on verra ça plus tard, ce qui est intéressant, c’est le petit onglet, ici, « try it out ». On va l’essayer mais vous pourrez faire un tour sur les différents usages, comment ça s’utilise, ce qu’on peut faire avec, bref, beaucoup de choses. Vous avez aussi la petite section pour apprendre, vous y avez toutes les informations sur comment ça va fonctionner, quelles sont les possibilités, créer des classes, faire des « extend ». Beaucoup de choses apportées par Babel n'étaient pas possibles en JavaScript et c’est aussi ce qui fait que ça a bien fonctionné parce qu’on peut faire beaucoup de choses. Ici, j’avais déjà copié un petit exemple très sympa, on verra ça plus tard évidemment. Je vous expliquerai le code quand on commencera vraiment à travailler avec. Là, simplement, on a une définition de classe React pour créer un composant, et regardez comme c’est spectaculaire : je vais simplement écrire des choses très simples, je vais importer React depuis React, ensuite je vais utiliser React que j’ai importé pour créer une classe. À l’intérieur, je vais lui mettre différents états donc un état de base, je vais lui donner des petites fonctions métier et, à la fin, je vais lui demander de faire un « render ». Comme vous pouvez le voir là, je fais du HTML sur plusieurs lignes, avec une parenthèse ouvrante et une parenthèse fermante, pour pouvoir avoir plusieurs lignes comme ça. Que se passe-t-il de l’autre côté ? Ça passe dans le compilateur Babel, et c’est ce qui sera utilisé ensuite par mon navigateur. Vous voyez : de l’import que j’ai tout en haut, il va me créer une variable, avec un « require ». Vous connaissez peut-être déjà « require », c’est utilisé par d’autres librairies qui permettent, comme JS ou autre, de faire des imports. On va faire un « require » de React et puis, derrière, ça va utiliser la librairie React pour faire un « create class ». Ça va reprendre un peu mon code. Est-ce que c'est exactement le même ? Pas vraiment. Regardez, je définis juste ici une propriété d’objet, lui va me faire la fonction qui va avec, le « return » va être à peu près le même mais il va vraiment nous rajouter des informations. Ensuite, regardez pour le « random » qu’on a en dessous, la « get random number » pareil. Il ajoute la fonction, il ajoute pas mal de petites choses en plus et, pour le « rendering » qu’on a tout en bas, on a écrit proprement du HTML avec de l’information dedans, quelque chose de simple, et lui regardez ce qu’il a fait : il a utilisé la librairie React, avec « create element » pour créer un élément qui est une « div », avec des informations dedans, etc... Donc, tout ce qu’on devrait écrire en JavaScript normalement on n'aura plus à l’écrire. On écrit quelque chose de propre et Babel va s’occuper de transformer ce JSX directement en JavaScript pour être utilisé. Ce qui est bien, c’est qu’on pourrait lui dire de minifier, on passerait d'un fichier propre et lisible, qu’on peut maintenir facilement, à quelque chose de réduit au maximum pour que ce soit plus facile à charger pour le navigateur. On peut aussi lui demander de garder les sauts de lignes, c’est possible. Il y a pas mal de petites choses possibles avec Babel que vous ne pouviez pas faire avec JS de base, donc n’hésitez pas à utiliser ce langage-là, ne faites pas de JavaScript, sauf si vous le voulez ! Si j’ai envie d’écrire ça, j’ai le droit de le faire, je peux tout à fait être un développeur un peu fou et me dire « J'écris tout en JavaScript parce que je préfère ! » Quand même, il y a beaucoup de choses que vous apportera JSX. N’hésitez pas à faire du JSX et, de toute façon, ensemble dans cette formation on fera du JSX avec Babel.

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 !