Renderizado de Elementos en React

Los componentes de React describen cómo debe verse la interfaz de usuario, pero aún necesitan ser renderizados para aparecer en la pantalla.

En una aplicación típica de React, hay un único elemento raíz en el archivo HTML. React utiliza esta raíz como punto de entrada donde se renderiza toda la aplicación.

A continuación se muestra un ejemplo simplificado de cómo se renderiza un componente:

import ReactDOM from "react-dom/client";

function App() {
  return <h1>Hello, React</h1>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

En este ejemplo, React toma el componente App y lo renderiza dentro del elemento HTML con el id root. No es necesario memorizar este código todavía. Está aquí para mostrar cómo React conecta los componentes con la página.

Una vez renderizado, React actualiza automáticamente la interfaz de usuario cuando cambia la salida del componente. Esto permite centrarse en describir la interfaz de usuario en lugar de actualizar la página manualmente.