🖥️ Renderizado de HTML en React
Aprende cómo React renderiza elementos HTML en el navegador usando un contenedor y la función createRoot().
📌 Índice de esta entrada:
- 📂 El contenedor HTML
- ⚡ La función
createRoot() - 🖥️ Renderizado de elementos HTML simples
- 📦 Renderizado dinámico con variables
- 🔧 Renderizado de JSX complejo
📂 El contenedor HTML
React necesita un contenedor en tu página donde renderizar los elementos.
Normalmente es un <div id="root"></div> dentro del archivo index.html.
<!doctype html>
<html lang="en">
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Este contenedor será donde React mostrará todos tus elementos HTML y componentes.
⚡ La función createRoot()
La función createRoot() se encuentra en src/main.jsx y se usa para crear el nodo raíz de la aplicación React.
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<App />
)
- document.getElementById('root') indica el contenedor HTML.
- render() define qué se va a mostrar dentro del contenedor.
- Puedes renderizar elementos HTML simples, JSX o componentes completos.
🖥️ Renderizado de elementos HTML simples
Podemos renderizar directamente un encabezado o párrafo:
import { createRoot } from 'react-dom/client'
createRoot(document.getElementById('root')).render(
<h1>Hola React!</h1>
)
Resultado en el navegador:
Hola React!
📦 Renderizado dinámico con variables
React permite usar variables para renderizar contenido dinámico:
import { createRoot } from 'react-dom/client'
const nombre = "Estudiante React"
createRoot(document.getElementById('root')).render(
<h2>Hola, {nombre}!</h2>
)
Resultado en el navegador:
Hola, Estudiante React!
🔧 Renderizado de JSX complejo
Podemos usar JSX para renderizar estructuras HTML más complejas, como tablas:
import { createRoot } from 'react-dom/client'
const tabla = (
<table border="1">
<tr><th>Nombre</th></tr>
<tr><td>John</td></tr>
<tr><td>Elsa</td></tr>
</table>
)
createRoot(document.getElementById('root')).render(
tabla
)
Resultado en el navegador:
| Nombre |
|---|
| John |
| Elsa |
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias