Portals (React)

Les Portals en React permettent de rendre des composants en dehors de leur hiérarchie DOM (Document Object Model) parent, tout en conservant leur hiérarchie logique dans l'application. Cette fonctionnalité est particulièrement utile pour des éléments comme les modales, les tooltips, ou les notifications qui doivent apparaître au-dessus de tout le reste dans l'interface utilisateur.

Explication des Portals

Normalement, lorsqu'on rend un composant en React, il est inséré directement dans l'élément DOM où le composant parent est rendu. Cependant, avec les Portals, on peut rendre un composant dans un élément DOM différent. Cela signifie que tu peux rendre un élément visuellement en dehors de son parent, mais logiquement il fait toujours partie de l'arborescence React de son parent.

Exemple en TypeScript

Préparation du DOM : Ajoute un élément dans ton HTML où tu veux rendre le Portal. Par exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Portals Example</title>
</head>
<body>
    <div id="root"></div>
    <div id="portal-root"></div> <!-- Élément pour le Portal -->
    <script src="path/to/your/bundle.js"></script>
</body>
</html>

Création du composant avec Portal : Utilise ReactDOM.createPortal pour rendre le contenu dans un autre élément DOM.

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

// Déclare les types des props du composant
interface ModalProps {
    isOpen: boolean;
    onClose: () => void;
}

// Composant Modal utilisant un Portal
const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
    if (!isOpen) {
        return null;
    }

    return ReactDOM.createPortal(
        <div style={modalStyles}>
            <div style={modalContentStyles}>
                <button onClick={onClose}>Close</button>
                {children}
            </div>
        </div>,
        document.getElementById('portal-root') as HTMLElement // Le parent du Portal
    );
};

// Styles pour le modal
const modalStyles: React.CSSProperties = {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
};

const modalContentStyles: React.CSSProperties = {
    backgroundColor: 'white',
    padding: '20px',
    borderRadius: '5px',
    minWidth: '300px',
};

export default Modal;

Utilisation du composant Modal : Rends le composant Modal depuis un autre composant.

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

const App: React.FC = () => {
    const [isModalOpen, setModalOpen] = useState(false);

    const openModal = () => {
        setModalOpen(true);
    };

    const closeModal = () => {
        setModalOpen(false);
    };

    return (
        <div>
            <h1>React Portals Example</h1>
            <button onClick={openModal}>Open Modal</button>
            <Modal isOpen={isModalOpen} onClose={closeModal}>
                <h2>Modal Content</h2>
                <p>This is a modal rendered using a Portal!</p>
            </Modal>
        </div>
    );
};

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

Explication du Code

Modal Component: Le composant Modal utilise ReactDOM.createPortal pour rendre ses enfants dans un autre élément DOM (ici, #portal-root).
Portal Root: L'élément avec l'ID portal-root dans le fichier HTML est le parent DOM où le contenu du Modal sera rendu.
Rendering conditionnel: Le Modal se rend uniquement si isOpen est true.
Styles: Quelques styles en ligne sont ajoutés pour la démonstration (à améliorer selon tes besoins).

Conclusion

Les Portals sont une fonctionnalité puissante de React qui te permettent de gérer les éléments UI nécessitant d'être rendus en dehors de leur parent logique. Ils sont très utiles pour des cas d'utilisation comme les modales, les notifications, ou tout autre élément nécessitant de sortir du flux normal du DOM.

Pour approfondir ta compréhension et tes compétences en développement avec React et TypeScript, voici une liste de notions et de concepts à explorer :

Notions Avancées en React

Contexts API (React) : Comprends comment partager des données à travers l'arborescence de composants sans avoir à passer les props manuellement à chaque niveau.
Connaissance/Higher-Order Components : Explore comment réutiliser la logique entre les composants en créant des composants d'ordre supérieur.
Render Props : Apprends à partager des fonctionnalités entre les composants en utilisant une fonction comme prop.
Hooks (React) : Familiarise-toi avec les hooks personnalisés, useReducer, useMemo, useCallback, etc.
React-Suspense|React-Suspense et lazy loading : Découvre comment charger les composants de manière asynchrone et gérer les états de chargement.
Concurrent Mode : Apprends à optimiser les performances et la réactivité de ton application avec le mode concurrent de React.
React Server Components : Comprends comment rendre des composants React côté serveur pour améliorer les performances et l'optimisation SEO.

Notions Complémentaires

State Management : Explore des bibliothèques de gestion d'état comme Redux, Zustand, ou Recoil.
Routing : Apprends à utiliser des bibliothèques de routage comme React Router pour gérer la navigation dans ton application.
Gestion des formulaires : Découvre des solutions pour la gestion des formulaires comme Formik ou React Hook Form.
tests (programmation) : Familiarise-toi avec les tests unitaires, d'intégration, et end-to-end en utilisant des outils comme Jest, react-testing-library|React Testing Library, et Cypress.