<aside> 🏪 Vamos avanzando con la construcción de nuestro Marketplace 🏪 y ahora necesitamos que nuestro usuario pueda ver los detalles de un producto. Esta funcionalidad implica poderle dar click a cualquier card y se abra un componente que se lleve el foco de atención del usuario, para que se concentre en ver a detalle el precio, nombre, imagen y adicionalmente la descripción de dicho producto.
</aside>
Para este cometido podemos tener diferentes soluciones por ejemplo un aside que ocupe todo el alto de la ventana y un ancho específico. Esta es la solución propuesta en el curso y se ve así:
Esta solución cumple el cometido, ya que el usuario puede ver claramente en una sección aparte su producto de interés. No obstante existen muchas otras alternativas que podemos explorar.
Si se trata de llamar la atención del usuario para hacer que se concentre en un elemento específico, los modales son una gran opción! En React tenemos toda una serie de herramientas para crear estos modales, pero ¿Qué son?
<aside> 🪟 En React, los modales son ventanas emergentes que se superponen al contenido principal de una aplicación para mostrar información adicional o solicitar interacciones al usuario.
</aside>
Para poder tener modales, se deben crear portales con React Portals, una característica de React que permite renderizar un componente en un nodo DOM diferente al nodo raíz “root” de la aplicación. Esto es útil para crear modales, ya que puedes renderizar el contenido del modal en un nodo fuera de la estructura de componentes principal.
En nuesta aplicación de React construida con Vite, podemos ver en la raíz de nuestro proyecto el archivo index.html. Ahí podemos ver dicho root:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/Assets/astro-place-white.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Astro Place</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Los portales nos permiten ubicar como de manera habitual un componente dentro del conjunto de componentes que se renderizan en el nodo html principal del DOM, generalmente el de id = “root”, pero hacer que aparezcan en un nodo fuera de la jerarquía del DOM. Esto permite una mayor facilidad a la hora de maquetar y estilizar componentes que aparecen y desaparecen en el renderizado de nuestra página como los modales (ventanas).
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './Pages/APP'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
Entonces gracias a estos portales, por ejemplo, podemos ubicar a nuestro componente para el detalle del producto, digamos ProductDetail, en el Home junto con los otros componentes como Layout o Card, pero si lo encapsulamos con un Modal creado con React Portals, el renderizado se hará en el nodo html que nosotros indiquemos, osea fuera del “root”. Esto trae como ventaja por ejemplo poder estilizar fácilmente el modal para que aparezca por encima del resto de componentes y se lleve toda la atención del usuario!
Una vez explicado por qué resulta interesante en este caso aplicar un modal, vamos construirlo en nuestra aplicación, componente por componente.
Como hablabamos anteriormente si queremos un área de renderizado diferente donde vamos a teletransportar nuestro componente ProductDetail, necesitamos crear ese nodo nuevo en el documento principal de nuestra aplicación, el index.html. Procedemos a crear entonces un div con id modal en el index.html
<body>
<div id="root"></div>
<div id="modal"></div>
<script type="module" src="/src/main.jsx"></script>
</body>