Avant de se lancer dans le vif du sujet et, après avoir rappelé un peu l'écosystème du JavaScript, voyons pourquoi il est intéressant d'utiliser ReactJS L’idée est de vous conforter dans le choix de ReactJS. Vous êtes peut-être encore dans un moment de doute, est-ce le bon framework ? Ne vais-je pas devoir l’abandonner dans 2 ans ? Sachez que quoiqu’il arrive, l’écosystème JavaScript évolue tellement que l’on ne peut rien vous garantir. Reprenez l’historique du cours précédent et vous devriez vous en rendre compte. Toujours est-il que nous sommes là avec ReactJS. Maintenant, pourquoi ce choix, comment, où et quand l’utiliser ?
Certains diront que la différence n’existe pas, d’autres qu’il n’y a pas d’intérêt à dire que c'est une librairie, … Effectivement, je suis d’accord pour affirmer que la nuance est faible mais il me semble nécessaire tout de même de l’identifier pour vous faire comprendre l’intérêt de ReactJS par rapport aux autres frameworks JavaScript. Très rapidement, voilà la différence que je souhaite faire ressortir :
En partant de ça, ReactJS en tant que tel est une librairie, ce n’est pas un framework. Il a la particularité de pouvoir être totalement indépendant de votre architecture. Quelque soit votre environnement de travail en front-end, il s’intégrera aisément. Contrairement à un framework tel qu’Angular, vous ne serez pas obligé de gérer la totalité de votre application web avec lui. Il s’intègre tout aussi bien à des projets back-end développés dans d’autres langages comme PHP ou Ruby. De fait, il vous sera très facile de travailler en amélioration continue avec cette librairie.
Enfin, je considère l’utilisation de ReactJS en tant que framework dès lors que l’on commence à utiliser un ensemble d’outils qui lui permettent de « vivre » comme tel. Par exemple, l’association de ReactJS + Redux + React Router forment un ensemble qui provoque, à mon sens, l’équivalent d’un framework.
Le DOM virtuel est un concept implémenté dans React. Il s’agit d’une représentation interne en JavaScript de l’arbre du DOM qui n’est pas le “vrai” DOM du navigateur. React va pouvoir agir sur cette abstraction et non pas directement sur le DOM du navigateur. Nous ne sommes donc pas dans la manipulation du DOM comme nous pourrions le faire avec du jQuery. A partir de ce principe, la génération d’une page HTML n’est pas obligatoirement liée à un navigateur. Il est ainsi possible de générer des pages côté serveur.
De plus, le DOM virtuel permet d’optimiser les accès au DOM du navigateur. Lors du changement d’une variable, React enclenche un cycle de vie de mise à jour du rendu. A partir de sa représentation virtuelle, il effectue le différentiel optimal à appliquer au “vrai” DOM. Les modifications sont appliquées en une fois.
React a une approche différente ce que nous avons l’habitude de voir et d’apprendre. Plutôt que de se lancer dans une multitude d’héritages de classe, React adopte une logique “composant”.
Un composant va pouvoir définir l’état dans lequel il est (state) mais aussi recevoir des informations (props). L’idée est ensuite de savoir si celui-ci a besoin de rendre de nouveaux composants (ses enfants) ou alors, s’il peut “vivre tout seul”. Pour bien le comprendre, il faut maintenant imaginer que le moindre élément HTML est en réalité l’équivalent d’un composant React.
Par exemple, prenez le champ <input type="text">. C’est un composant nommé “input” qui a un état spécifique. Celui-ci permet de nous dire que son type est “text”. En ce qui concerne sa valeur, nous n’en avons pas. En revanche, si quelqu’un vient saisir des informations, son attribut “value” va se remplir et c’est son état qui va se retrouver changer. Nous verrons tout cela plus en détails dans les prochains cours quand nous rentrerons dans le vif du sujet.