React JS : Introduction

Aujourd’hui, nous allons lancer le premier volet d’une nouvelle série de didacticiels, Dave and React . Le point positif, c’est qu’on va apprendre ensemble, vous et moi. Eh oui, y a pas longtemps que j’utilise ce framework, et j’ai encore beaucoup de choses à apprendre. Du coup, je partagerai chacune de mes expériences avec ce framework, avec vous #davidnation. Sans plus tarder, commençons.

Il était une fois React…

Qu’est ce que React?

React est une bibliothèque d’interface utilisateur développée sur Facebook pour faciliter la création de composants d’interface interactifs, dynamiques et réutilisables. Il est utilisé sur Facebook en production et Instagram.com est entièrement écrit en React.

L’un de ses arguments de vente uniques est que non seulement il fonctionne du côté client, mais il peut également être rendu côté serveur, et ils peuvent travailler ensemble de manière interopérable.

Il utilise également un concept appelé DOM virtuel ce qui permet de manipuler le moins possible le DOM afin de maintenir vos composants à jour.

Comment fonctionne le DOM virtuel?

Imaginez que vous créez un clone de vous-mêmes, ce qui veut dire qu’il possédera les mêmes caractéristiques que vous. Il va aussi refléter votre état actuel. C’est exactement ce que fait React avec le DOM.

Pensez maintenant si vous avez pris ce clone et apporté quelques modifications. Ajout d’une moustache, de doux biceps et des yeux de David Beckam. Dans React, lorsque nous appliquons ces changements, deux choses se produisent. Premièrement, React exécute un algorithme de “diffing”, qui identifie ce qui a changé. La deuxième étape est la réconciliation, dans laquelle il met à jour le DOM avec les résultats de diff.

La façon dont React fonctionne est la suivante: plutôt que de prendre la personne réelle et de la reconstruire à partir de zéro, React ne ferait que changer le visage et les bras. Cela signifie que si vous aviez du texte dans une entrée et qu’un rendu a eu lieu, tant que le nœud parent de l’entrée n’a pas été programmé pour la réconciliation, le texte resterait inchangé.

Parce que React utilise un faux DOM et non un vrai, cela ouvre également une nouvelle possibilité amusante. Nous pouvons envoyer ce faux DOM sur le serveur et boom, on obtient des rendus côté serveur.

Laisser un commentaire