React vs ReactDOM

Actualmente tenemos solo dos componentes en nuestra aplicación. El componente App y el componente Message.

Cuando ejecutamos nuestra app, React tomará este árbol de componentes y creará una estructura de JavaScript llamada VirtualDOM.

!https://i.imgur.com/4D6KhqB.png

Este VirtualDOM es una representación ligera y en memoria de nuestro árbol de componentes, donde cada nodo representa un componente y sus propiedades.

Cuando los datos de un componente o su estado cambia, React actualiza el nodo correspondiente en el virtualDOM para reflejar el nuevo estado.

Luego compara la versión actual del VirtualDOM con la versión previa para identificar los nodos que deben ser actualizados en el DOM real.

!https://velog.velcdn.com/images/kylexid/post/5ad6a400-d079-4ac6-8e59-056177d25d4f/image.png

Esta actualización, no es realizada realmente por React, sino por una biblioteca diseñada únicamente para esta tarea: ReactDOM.

ReactDOM

Si vamos al archivo package.json, podemos ver que nuestra aplicación React utiliza dos bibliotecas, React y ReactDOM. Mira, te voy a mostrar cómo es que se usa ReactDOM.

Vamos al archivo index.html, vemos que como dijimos antes aquí es contenedor de nuestra aplicación (el div con el id root), y debajo, tenemos una etiqueta script que relaciona el archivo /src/main.tsx.

Si vemos dentro de este archivo, podremos encontrar que se está utilizando la biblioteca ReactDOM Para renderizar nuestro árbol de componentes justo en el contenedor root.

👀 React no está ligado a la web, quien hace ese enlace es ReactDOM, pues React puede usarse para otras plataformas, como ReactNative que sustituye a ReactDOM para poder usar React en aplicaciones móviles.

React es platform agnostic.