Le package ReactDOM et ses utilisations

Chaque développeur React a une approche unique de l’utilisation des bibliothèques externes. Certains essaient de limiter leur utilisation à l’essentiel, tandis que d’autres utilisent des bibliothèques externes pour presque tout.

Dans l’article d’aujourd’hui, nous allons nous attaquer à l’une des librairies essentielles pour React, appelée ReactDOM. Ce package fournit les méthodes nécessaires pour gérer le rendu DOM dans les applications React.

Paquet ReactDOM dans React

En combinaison avec la bibliothèque générique React, ce package est nécessaire pour créer des applications dynamiques dans React. Il fournit une fonction render() cruciale, un élément essentiel de tout composant de classe.

En général, ce paquet fournit des méthodes pour interagir avec DOM, ce qui nous permet de gérer efficacement le DOM de l’application. Voici la liste des méthodes les plus essentielles incluses dans le package ReactDOM :

• Render()
• findDOMNode()
• unmountComponentAtNode()
• hydrate()
• createPortal()

Qu’est-ce que le DOM et le DOM virtuel ?

Essentiellement, DOM (abréviation de modèle d’objet de document) est une représentation d’une page Web en tant qu’objet. Il fournit une API pour accéder, lire ou modifier le contenu de la page.

Avant la popularité de React, les développeurs JavaScript travaillaient avec des bibliothèques comme jQuery pour modifier directement le DOM. La manipulation manuelle du DOM était inefficace car les navigateurs restituaient toute la page, même si les modifications apportées au DOM étaient à peine perceptibles.

React a gagné en popularité car il a fourni un DOM virtuel, une copie arbitraire du DOM qui suit les modifications et met à jour le DOM réel en une seule fois.

Cette approche était beaucoup plus efficace, donc Virtual DOM reste l’une des principales fonctionnalités de React à ce jour. La bibliothèque ReactDOM comprend des fonctionnalités essentielles pour interagir avec DOM dans React.

Installer ReactDOM dans React

Auparavant, les méthodes ReactDOM étaient incluses dans le package générique, mais maintenant nous devons les importer séparément. Tout d’abord, vous devez sélectionner le répertoire de l’application et installer le package en saisissant ce qui suit dans la ligne de commande :

npm install react-dom

Ensuite, vous pouvez l’importer. Si vous utilisez la version moderne de JavaScript, vous pouvez le faire en utilisant l’instruction import :

import ReactDOM from 'react-dom'

Alternativement, si vous avez seulement besoin d’importer une méthode render, vous pouvez l’importer comme ceci :

import { render } from 'react-dom'

Vous pouvez utiliser le modèle suivant pour importer toute autre méthode spécifique.