Comprendre React.js, la bibliothèque javascript la plus populaire

React.js (communément appelé React) est une bibliothèque JavaScript open-source créée par Facebook, qui a été initialement publiée en 2013. React est conçu pour faciliter la création d’interfaces utilisateur interactives et performantes pour les applications web et mobiles. Il se concentre sur la création de composants réutilisables et maintenables, et utilise un modèle de programmation déclaratif pour décrire l’interface utilisateur.

Principe et notions centrales de ReactJS

Les composants: React, une « single page application »

Dans React, vous n’avez qu’un seul fichier HTML, dans lequel vont ensuite s’insérer des composants. Vous allez avoir un composant global, puis des composants plus spécifiques (les pages), puis des composants plus spécifiques, etc.

Cette structuration et ses règles permettent de rendre le code réutilisable, plus facile à lire et à déboguer.

Néanmoins, cela rend l’application peu (voire pas du tout) viable pour le SEO: si vous faites « afficher le code source de la page », vous aurez simplement un fichier html avec une division vide.

Le DOM virtuel

React utilise un DOM virtuel (Virtual DOM) est une représentation en mémoire du DOM réel du navigateur. Lorsque vous travaillez avec React, c’est lui que vous manipulez, pas le « vrai » DOM. C’est React qui, une fois qu’il y a un changement dans l’état d’un composant, va créer une nouvelle version du DOM virtuel et la comparer au vrai DOM. Seuls les composants modifiés seront rechargés (« rerender »). On parle de « Reconciliation« .

Cela rend l’application particulièrement rapide et réactive (le nom vient de là ..).

Les state

Le state est un objet contenant des données. On pourrait se demander: « ne suffit-il pas de créer une variable » ? Le problème est que cette dernière serait « perdu » entre deux rendus. C’est par exemple ce qu’il se passe quand on tente de remplir un formulaire classique sous React: le texte disparait au fur et à mesure qu’on l’écrit. Pour le faire persister vous aurez besoin d’un state.

Pour cela, on utilise en général le hook useState, qui a cette syntaxe:

const [count, setCount] = useState(0);

Ici « count » est le nom de la variable, setCount la fonction pour la modifier et 0 et la valeur initiale de count.

• Sur la préservation des données : Preserving and Resetting State

Les props

Chaque composant est compartimenté, pour faire passer une valeur (ex: un state) d’un élément à un autre, vous allez devoir utiliser des « props ». C’est un mécanisme pour passer en principe des données d’un composant parent à un composant enfant. Néanmoins il est possible de faire remonter des données à l’élément parent.

Notez que le composant enfant ne doit pas modifier les props qu’il reçoit.

C’est une mécanique qui peut être très lourde quand on a beaucoup de props. Cela rend le code peu lisible, surtout si vous devez faire traverser à un prop plusieurs composants (on parle de « prop drilling »). Pour cela, il peut être intéressant d’avoir un gestionnaire d’état, comme Redux.

• Sur la dimension unidirectionnelle des props: How to Pass Props from Child to Parent Component in React

Notions importantes

Les hooks

Les hooks sont des fonctions de React. Nous venons de parler de useState(), mais il y en a beaucoup d’autres:

• useEffect permet de déclencher des effets en réponse aux changements de certaines valeurs (états ou props) qui sont listées dans son tableau de dépendances.

useEffect(() => {
  // code à exécuter
}, [dépendances]);

• useContext permet d’accéder à des valeurs n’importe où dans l’application (un peu comme Redux)
• useReducer permet de rassembler plusieurs states en un seul (un peu comme reduce() ). C’est notamment utile pour les formulaires.
• useMemo sert à stocker les calculs coûteux (on parle de « mémoïsation »).

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

computeExpensiveValue(a, b) est la fonction qui effectue le calcul coûteux et [a, b] le tableau de dépendances. useMemo recalculera la valeur mémoïsée seulement si a ou b changent.

D’autres hooks peuvent venir de vos librairies. C’est par exemple le cas de Redux, qui vous donne accès au hook useSelector. Vous pouvez également créer les vôtres.

Petit détail: les hook ne peuvent être appelés qu’à la racine de vos fonction.

Panorama des librairies et frameworks React

Les framework react: SSR et site statique

Il y a plusieurs frameworks basés sur React. Le plus populaire est NextJS, qui permet de générer un site statique ou bien de pré-rendre le contenu. Cela permet de rendre les sites produits conformes au SEO, les robots pouvant accéder directement à l’ensemble du HTML généré.

Dans la même idée, Gatsby est aussi populaire et permet de générer des sites statiques.

Gestion du state et stores

Pour éviter le « prop drilling » et la complexité dans la transmission de props, il y a des outils facilitant la gestion des states. On parle aussi de stores. Le plus connu pour React est probablement Redux.

Animations et éléments graphiques

Il y a de nombreuses librairies permettant de gérer les animations et facilitant la création d’éléments graphiques:

• React Spring propose des animations basées sur les lois physiques
• React Transition gère les transitions entre les états des composants
• React ChartJS facilite la création de graphiques.

React Native

React Native est un framework de développement mobile (Android et iOs) créé par Facebook. Vous pouvez ainsi développer non seulement des applications web, mais aussi des applications mobiles.