Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de React.js

Ajouter des animations

Testez gratuitement nos 1338 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Partez à la découverte des plug-ins React et des animations disponibles. Les animations sont possibles à l'aide d'un plug-in jouant avec des CSS.
06:24

Transcription

On va parler un peu des Add-ons. L'idée est de vous éclairer sur l'existance des Add-ons dans React... c'est-à-dire des choses qu'on peut rajouter à React pour y rajouter de l'information. Vous verrez aussi comment les utiliser dans le code. Le souci dans la documentation de React est que tous les add-ons vont du principe que vous utiliserez??? mais en faisant des require. Avec tous nos exemples on utilise pas React au hasard. Ce qui est un peu embêtant, car on ne peut utiliser la documentation. En outre, elle n'est pas traduite pour qu'on l'utilise comme les autres. C'est un peu particulier, mais je vais vous guider dans le processus. On pourra après parler de tous les add-ons. On ne les verra pas vraiment en pratique, mais je vous les ferai découvrir pour que vous puissiez performer seul, car vous aurez beaucoup à apprendre. Surtout partez du princique que les add- ons qui rajoutent les fonctions à React n'existent pas juste ici. Vous en trouverez partout sur Internet... et vous pourrez rajouter des fonctionnalités à React très facilement. Pour les exemples de la documentation, faites un tour sur Getting Started. Et sous celui-ci, vous téléchargez le Starter Kit. Pourquoi le télécharger? Parce que vous y trouverez assez d'éléments. Vous trouverez surtout des build qui sont des fichiers java script... qui ont été construits avec des add-ons. C'est intéressant car on en aura besoin pour les utiliser dans notre code. Vous allez prendre le react-with-addons dans build et le copier dans le projet. Vous l'utiliserez à l'endroit où on faisait avant l'import de react. Vous bénéficierez de React et des add-ons. Le seul problème est que sur unpkg il n'y a pas react avec les add-ons ou les add-ons react à part. Maintenant React pousse pour qu'on n'utilise que MPM. Notre application tombe dans le navigateur... et on a pas besoin d'utiliser du MPM. Voilà l'astuce pour utiliser les add-ons. Je vais vous montrer comment j'ai implémenter les animations. Chaque fois que vous serez sur un add-on vous aurez sa documentation. Dès fois elle est un peu large. Mais vous verrez les exemples en eux- mêmes à chaque fois... dans des blocs avec une couleur différente. Il est donc très facile de comprendre le fonctionnement de ces add-ons. L'add-on d'animation permet de créer un bloc au-dessus... de ce qu'il y a à animer, comme des items. Donc ça va être la même chose. Je l'ai mis sur de l'itération. Concrètement, vous allez définir ici des temps d'entrée et de sortie... et pourquoi pas simplement une classe ou un nom de transition. Ce qui est intéressant c'est que React va venir ajouter sur les items... des classes d'entrée et de sortie selon ce qui se passe dans le code. Et c'est bien, car on a pas à se soucier de l'entrée ou la sortie d'éléments... du montage ou du démontage d'un composant... qui sont gérés automatiquement par les transitions. Voilà comment je l'utilise dans mon cas. Je mets CSSTransitionGroup dans une variable et ce sera: J'attire votre attention sur les exemples fournis dans le Starter kit... car vous avez dedans plein d'exemples assez basiques... sur l'utilisation et qui viennent importer les librairies. Vous pouvez donc trouver comment les importer dans les exemples. Je bénéficie maintenant de CSSTransitionGroup... que je pourrai mettre au dessus de mon itération... et mon itération est celui de nos items qu'on avait avant. Une fois ces blocs ajoutés, je les referme en dessous... sinon ça crée une erreur en React. Ensuite dans mon index.html, j'ajoute tout un tas de classes. Je vais y passer doucement pour que vous puissiez récupérer cette partie. Tout ça me permettra de jouer avec les enter, active... leave c'est-à-dire l'entrée et la sortie des éléments. Vous remarquerez que ce ne sont que les transitions en CSS. Il y a deux parties: une qui vient ajouter toutes les classes automatiquement... à l'entrée et à la sortie des éléments au moment du rendu... et une autre qui est la classe CSS pour contrôler l'animation. Vous l'avez déjà peut-être fait avec du Java script pure et du CSS pure. L'intéressant avec ce plug-in c'est qu'il va vous ajouter directement lui-même les classes sur les éléments pendant les transitions d'éléments. Regardez ce que ça donne quand ça fonctionne. J'ajoute une tâche et elle s'anime automatiquement dès qu'elle entre. Vous pouvez ajouter de l'animation à une application facilement avec cet add-on. Parcourez d'autres exemples pour apprendre davantage. On peut animer le montage initial. On peut aussi créer des classes customisées. On peut animer des groupes, un seul ou plusieurs éléments ou aucun. On a donc plein de possibilités avec ce plug-in. Bref, si vous devez animer une application utilisez ce plug-in très riche. Si vous avez déjà fait de l'art, vous devez connaître le superbe ng-animate. En fait, cette librairie est complètement inspirée de ng-animate. On va retrouver ces petits si vous avez déjà travailler avec ng-animate. C'est pas compliqué à utiliser! Il suffit juste de définir un bloc qui viendra ajouter une fois les animations. C'est simple à installer et utiliser... et vous pourrez vite animer une application sans effort. Voilà pour cet exemple et on verra tous les autres existants. On parlera des plug-in les plus importants pour moi. Sachez qu'il en existe plein sur Internet et ce sera toujours pareil. Il faudra importer le plug-in et l'utiliser une fois dans votre html. Vous n'aurez plus qu'à suivre la documentation... pour savoir tout ce qu'il est possible de faire.

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 !