Renderizado de Interfaces de Usuario (UI)

Para entender cómo funciona React, primero necesitamos comprender cómo los navegadores interpretan tu código para crear (o renderizar) interfaces de usuario (UI).

Cuando un usuario visita una página web, el servidor devuelve al navegador un archivo HTML que puede verse así:

Dos diagramas lado a lado: a la izquierda el código HTML y a la derecha el árbol DOM.

El navegador entonces lee el HTML y construye el Modelo de Objetos del Documento (DOM).

¿Qué es el DOM?

El DOM es una representación en objetos de los elementos HTML. Actúa como puente entre tu código y la interfaz de usuario, y tiene una estructura en forma de árbol con relaciones padre-hijo.

Dos diagramas lado a lado: a la izquierda el árbol DOM y a la derecha la UI renderizada.

Puedes usar métodos del DOM y JavaScript para escuchar eventos del usuario y manipular el DOM seleccionando, añadiendo, actualizando y eliminando elementos específicos en la interfaz de usuario. La manipulación del DOM no solo te permite apuntar a elementos específicos, sino también cambiar su estilo y contenido.

En la siguiente sección aprenderás cómo usar JavaScript y los métodos del DOM.

Recursos adicionales:

On this page