Render HTML avec React : Comprenez Comment React Interagit avec le DOM

1. Comment React Rend du Contenu HTML ?

React utilise une méthode appelée ReactDOM.render() pour insérer du contenu dans le DOM réel. Cette méthode prend deux arguments principaux :

• Le JSX : Le composant ou élément React à rendre.
• L'élément cible : L'élément DOM où le contenu sera injecté.

Voici un exemple simple :

📋 Copier le code

import React from 'react';
import ReactDOM from 'react-dom';

function Bonjour() {
return <h1>Bonjour, monde !</h1>;
}

ReactDOM.render(<Bonjour />, document.getElementById('root'));

Explication détaillée :

1. import React from 'react'; :
   • Nous importons React pour pouvoir utiliser ses fonctionnalités, notamment le JSX.
2. import ReactDOM from 'react-dom'; :
   • Nous importons ReactDOM, qui est utilisé pour intéragir directement avec le DOM.
3. function Bonjour() { ... } :
   • Cette fonction définit un composant React appelé Bonjour.
   • Elle retourne du JSX contenant un élément <h1>.
4. ReactDOM.render(<Bonjour />, document.getElementById('root')); :
   • Cette ligne utilise ReactDOM.render() pour insérer le composant Bonjour dans l'élément HTML ayant l'id root.
   • document.getElementById('root') spécifie où dans le DOM le composant doit être rendu.

2. La Différence entre DOM Natif et Virtual DOM

Avant d'explorer davantage la méthode ReactDOM.render(), il est important de comprendre la différence entre le DOM natif et le Virtual DOM de React.

• DOM Natif : Représente la structure réelle du document HTML dans le navigateur.
• Virtual DOM : Une version légère et virtuelle du DOM créée par React pour minimiser les manipulations coûteuses du DOM natif.

Lorsque vous mettez à jour l'état ou les props d'un composant, React met à jour le Virtual DOM avant de synchroniser les changements avec le DOM natif. Cela garantit des performances optimales.

3. Exemple Pratique : Affichage Dynamique avec Render

Imaginons que vous souhaitez afficher un message personnalisé selon une condition. Voici comment cela peut être fait :

📋 Copier le code

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Message() {
const [nom, setNom] = useState('');

function handleChange(event) {
setNom(event.target.value);
}

return (
<div>
	<input type="text" value={nom} onChange={handleChange} placeholder="Entrez votre nom..." />
	{nom.trim() !== '' && <p>Bonjour, {nom} !</p>}
</div>
);
}

ReactDOM.render(<Message />, document.getElementById('root'));

Explication détaillée :

1. import React, { useState } from 'react'; :
   • Nous importons React et le hook useState pour gérer l'état local.
2. const [nom, setNom] = useState(''); :
   • Cette ligne initialise l'état nom avec une chaîne vide.
   • setNom est une fonction permettant de mettre à jour cet état.
3. function handleChange(event) :
   • Cette fonction est appelée chaque fois que l'utilisateur saisit du texte dans le champ d'entrée.
   • setNom(event.target.value) met à jour l'état nom avec la valeur saisie.
4. {nom.trim() !== '' && <p>Bonjour, {nom} !</p>} :
   • Ce fragment utilise une logique booléenne pour afficher un message seulement si le champ de saisie n'est pas vide.
   • nom.trim() supprime les espaces inutiles autour de la valeur saisie.
5. ReactDOM.render(<Message />, document.getElementById('root')); :
   • Cette ligne rend le composant Message dans l'élément HTML ayant l'id root.

4. Manipulation du DOM avec React

Bien que React utilise le Virtual DOM pour minimiser les manipulations du DOM natif, il est parfois nécessaire d'accéder directement au DOM. Pour cela, React fournit des **références** via le hook useRef. Voici un exemple :

📋 Copier le code

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';

function FocusInput() {
const inputRef = useRef(null);

function handleClick() {
inputRef.current.focus(); // Met le focus sur le champ d'entrée
}

return (
<div>
	<input type="text" ref={inputRef} placeholder="Cliquez ici pour me sélectionner..." />
	<button onClick={handleClick}>Mettre le focus</button>
</div>
);
}

ReactDOM.render(<FocusInput />, document.getElementById('root'));

Explication détaillée :

1. import React, { useRef } from 'react'; :
   • Nous importons React et le hook useRef pour créer une référence vers un élément DOM.
2. const inputRef = useRef(null); :
   • Cette ligne crée une référence appelée inputRef, initialement définie à null.
3. ref={inputRef} :
   • Associe la référence inputRef au champ d'entrée (<input>).
4. inputRef.current.focus(); :
   • Cette ligne met le focus sur l'élément référencé lorsque le bouton est cliqué.

5. Meilleures Pratiques pour Render avec React

Pour maximiser les performances et maintenabilité de vos applications React, voici quelques conseils :

• Utilisez le Virtual DOM autant que possible : Évitez les manipulations directes du DOM natif pour profiter des optimisations internes de React.
• Gérez l'état efficacement : Utilisez des hooks comme useState pour contrôler dynamiquement le contenu affiché.
• Privilégiez les composants fonctionnels : Ils offrent une syntaxe plus concise et sont généralement plus performants grâce aux hooks.

Conclusion

Vous avez maintenant appris comment React rend du contenu HTML dynamique en utilisant ReactDOM.render() et en interagissant avec le DOM via le Virtual DOM. En combinant gestion de l'état et manipulation du DOM, vous pouvez créer des interfaces utilisateur interactives et performantes.

Prochain chapitre : Conditionnelles dans React