Découvrir React

La sélection de lignes de transcription dans cette

section vous redirigera vers l’horodatage de la
vidéo
Avant de démarrer le développement de notre
application, il est utile de connaître le
principe de fonctionnement général de
React. React a la réputation d'être très léger et
très rapide. Et c'est vrai ! Vous allez bientôt
constater par vous-même les étonnantes
performances de React. Cela dit, il n'y a rien de
magique là-derrière, juste une façon
particulièrement intelligente de gérer le DOM, le
Document Object Model. Alors, rappelez-vous : le
DOM ou Document Object Model est la manière dont
le navigateur voit votre page web. Il s'agit
d'une collection d'objets imbriqués les uns dans
les autres. Eh bien, quand on fait du JavaScript,
ce sont ces objets que l'on manipule. Par
exemple, avec document.getElementByl('id'), on va
rechercher un objet, un nœud dans le DOM. Avec
document.createElement, on crée un nouvel objet
dans le DOM ; on appelle ça un « nouveau nœud
». Avec appendChild, on attache un élément à son
élément parent et ainsi de suite. Or, il se fait
que toutes ces opérations ont un coût en termes de
performance. Traverser le DOM et modifier le DOM
demande beaucoup d'efforts au navigateur. C'est
là qu'intervient le virtual DOM de React. Pour
pallier à ces problèmes de performance, React va
créer un DOM virtuel. Ce virtual DOM est
parfaitement synchrone avec le DOM réel. La seule
différence, c'est que ce virtual DOM est un objet
JavaScript résident en mémoire et donc, l'accès à
cet objet est quasiment instantané. Quand React
doit lire un élément dans le DOM, il ne va pas le
chercher dans le vrai DOM du navigateur, ce qui
prendrait trop de temps et consommerait trop de
ressources. À la place, il va lire ces
informations dans son DOM virtuel qui rappelez-
vous, réside en mémoire, qui est donc accessible
de manière instantanée. Quand React doit modifier
le DOM, par exemple, pour faire apparaître ou
disparaître des éléments d'interface, eh bien,
React va créer une nouvelle version de son DOM
virtuel, va la comparer à la version précédente
afin de déterminer avec grande précision, ce qui
a effectivement changé dans la page et ensuite,
React va écrire ces changements dans le vrai
DOM, mais de manière optimisée. Vous n'allez
donc plus jamais lire le DOM réel du
navigateur, à la place, vous lirez le DOM virtuel
de React. Et quand vous voudrez écrire dans le
DOM, vous écrirez en réalité dans le DOM virtuel
de React et c'est lui qui par la suite, se
chargera d'impacter ces changements dans le DOM
réel, mais de manière fortement optimisée. Le
virtual DOM est ce qui donne à React ses
étonnantes performances. Alors, si tout ceci vous
paraît un peu complexe, rassurez-vous, React va
faire le gros du boulot à votre place. En tant
que développeur, vous n'allez pas directement
manipuler ni le DOM du navigateur, ni même le
virtual DOM de React ; vous utiliserez l'API de
React que nous allons étudier ensemble dans cette
formation. Alors, direction le code pour
découvrir maintenant comment fonctionne vraiment
React.

Découvrir React
La sélection de lignes de transcription dans cette
section vous redirigera vers l’horodatage de la
vidéo
Avant de démarrer le développement de notre
application, il est utile de connaître le
principe de fonctionnement général de
React. React a la réputation d'être très léger et
très rapide. Et c'est vrai ! Vous allez bientôt
constater par vous-même les étonnantes
performances de React. Cela dit, il n'y a rien de
magique là-derrière, juste une façon
particulièrement intelligente de gérer le DOM, le
Document Object Model. Alors, rappelez-vous : le
DOM ou Document Object Model est la manière dont
le navigateur voit votre page web. Il s'agit
d'une collection d'objets imbriqués les uns dans
les autres. Eh bien, quand on fait du JavaScript,
ce sont ces objets que l'on manipule. Par
exemple, avec document.getElementByl('id'), on va
rechercher un objet, un nœud dans le DOM. Avec
document.createElement, on crée un nouvel objet
dans le DOM ; on appelle ça un « nouveau nœud
». Avec appendChild, on attache un élément à son
élément parent et ainsi de suite. Or, il se fait
que toutes ces opérations ont un coût en termes de
performance. Traverser le DOM et modifier le DOM
demande beaucoup d'efforts au navigateur. C'est
là qu'intervient le virtual DOM de React. Pour
pallier à ces problèmes de performance, React va
créer un DOM virtuel. Ce virtual DOM est
parfaitement synchrone avec le DOM réel. La seule
différence, c'est que ce virtual DOM est un objet
JavaScript résident en mémoire et donc, l'accès à
cet objet est quasiment instantané. Quand React
doit lire un élément dans le DOM, il ne va pas le
chercher dans le vrai DOM du navigateur, ce qui
prendrait trop de temps et consommerait trop de
ressources. À la place, il va lire ces
informations dans son DOM virtuel qui rappelez-
vous, réside en mémoire, qui est donc accessible
de manière instantanée. Quand React doit modifier
le DOM, par exemple, pour faire apparaître ou
disparaître des éléments d'interface, eh bien,
React va créer une nouvelle version de son DOM
virtuel, va la comparer à la version précédente
afin de déterminer avec grande précision, ce qui
a effectivement changé dans la page et ensuite,
React va écrire ces changements dans le vrai
DOM, mais de manière optimisée. Vous n'allez
donc plus jamais lire le DOM réel du
navigateur, à la place, vous lirez le DOM virtuel
de React. Et quand vous voudrez écrire dans le
DOM, vous écrirez en réalité dans le DOM virtuel
de React et c'est lui qui par la suite, se
chargera d'impacter ces changements dans le DOM
réel, mais de manière fortement optimisée. Le
virtual DOM est ce qui donne à React ses
étonnantes performances. Alors, si tout ceci vous
paraît un peu complexe, rassurez-vous, React va
faire le gros du boulot à votre place. En tant
que développeur, vous n'allez pas directement
manipuler ni le DOM du navigateur, ni même le
virtual DOM de React ; vous utiliserez l'API de
React que nous allons étudier ensemble dans cette
formation. Alors, direction le code pour
découvrir maintenant comment fonctionne vraiment
React.