Virtual DOM, composant et JSX

Virtual DOM

Le virtual DOM est un concept clé de React. Il s’agit d’une copie du DOM réel qui est interprété par le navigateur. Cette copie du DOM, est plus rapide à mettre à jour. Donc, offre une meilleure expérience utilisateur car l’application devient plus réactive. Le fait de convertir le Dom virtuel en DOM réel qui sera manipulé par le navigateur est connue sous le nom de réconciliation.

La réconciliation consiste à comparer l'ancien virtual DOM avec le nouveau afin de savoir quels éléments qui douvent être mis à jours dans le DOM réel à travers Diffing Algorithm.

Composant React (component)

Un composant, est un élément qui fait partie de l’interface graphique. Il peut donc contenir du texte, des images, des boutons ou tout autre type de contenu visible. L’avantage du composant react réside dans sa réutilisabilité. En effet, un même composant peut être utilisé de nombreuses fois afin de construire des vues différentes de l’application.

En React, un composant peut être fonctionnel ou de classe. Les composant fonctionnelles sont les plus utilisées. Il s’agit seulement d’une fonction qui retourne du JSX, comme vous pouvez le voir dans le code du composant App.js. Le composant à classe utilise la syntaxe orientée objet, mais il est de moins en moins utilisé en React.

JSX - Javascript Syntax Extension

JSX (pour JavaScript Syntax Extension et parfois JavaScript XML) est une extension du langage Javscript utilisé dans React. En effet, JSX est du Javascript écrit de manière semblable à du HTML afin de faciliter la description des composants.

JSX en tant que tel n’est pas compris par le navigateur. Donc, il sera transpilé en code Javascript compréhensible à l’aide de Babel
.
JSX permet d’intégrer des composants plus facilement. À titre d’exemple, au lieu d’écrire quelque chose comme ceci :
Avec JSX, on peut simplement écrire quelque chose du plus simple:
Et si on veut intégrer du contenu dynamique dans du JSX (comme une variable Javascript), alors on utilise ce que l’on appelle l’interpolation JSX. Cela consiste à placer notre élément dynamique entre les accolades :

Virtual DOM, composants et JSX en vidéo