Cómo Solid convierte JSX al DOM real

Contenido del curso

No sé dónde empezar

Introducción a SolidJS

Reactividad a profundidad

Renderizado en Solid

Reactividad en Listas

Componentes

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:53

Cómo Solid convierte JSX al DOM real

Curso de SolidJS

Clase 12 de 27

Clase 12 / 27

Recursos

El sistema reactivo que construimos hasta ahora cubre signals, memos y efectos, pero falta una pieza clave: el renderizado. Aquí descubrirás cómo Solid convierte JSX en actualizaciones reales del DOM usando una librería externa llamada DOM Expressions, y por qué entender esto te da una ventaja directa en entrevistas técnicas de frontend avanzado.

¿Qué hace Solid cuando renderiza un signal en JSX?

Cuando escribes un signal dentro de un button en el playground de Solid, no ocurre magia. Lo que ves en la pestaña output es un template generado a partir de tu JSX, acompañado de una función insert importada desde solid-js/web.

Ese solid-js/web es en realidad un alias hacia DOM Expressions, la librería que Solid usa internamente para transformar JSX en operaciones reactivas sobre el DOM.

¿Qué es DOM Expressions? Es la librería que Solid utiliza por separado para transpilar y compilar JSX en efectos reactivos que insertan, actualizan o reemplazan nodos, atributos y propiedades del DOM.

¿Cómo se conecta el sistema reactivo con el DOM?

Si miras de cerca la función insert, vas a notar algo familiar: por dentro es simplemente un effect. Ese efecto inserta una expresión y reacciona a cambios en signals para modificar:

Propiedades del nodo, como value o checked.
Atributos HTML específicos, por ejemplo class o id.
Contenido textual mediante textContent o innerHTML.

En otras palabras, todo lo que has construido en este curso (efectos que dependen de signals) es exactamente lo que Solid hace por debajo cuando renderiza JSX.

¿Por qué no implementamos un renderizador desde cero?

Construir un sistema de renderizado completo es extremadamente complejo. Implica herramientas de transpilación, compilación y un parser de JSX, entre otras piezas. Por eso el propio Solid lo separó del core reactivo y lo delegó en DOM Expressions.

La buena noticia es que tu librería Platzi Solid ya está lista para conectarse a un sistema como ese. Tienes signals, efectos y memos funcionando, así que solo faltaría enchufar la capa que traduce JSX a esas primitivas.

¿Puedo usar mi librería reactiva con JSX? En teoría sí. Si conectas un transformador como DOM Expressions que llame a tus signals y efectos, tu mini librería podría renderizar JSX igual que Solid.

¿Qué reto práctico puedes resolver con Platzi Solid?

Para cerrar lo aprendido, hay un ejercicio que te obliga a usar todas las primitivas reactivas que construiste. La idea es crear una pequeña aplicación con cuatro inputs y reflejar los cambios en pantalla en tiempo real.

¿Qué inputs y primitivas debes usar?

La app pide cuatro campos y la combinación correcta de primitivas para mantenerlos sincronizados con el DOM:

Nombre, manejado con un signal.
Apellido, manejado con otro signal.
Fecha de nacimiento, ideal para un memo que calcule edad o formato.
Enlace a Twitter, que puede pasar por un signal derivado para validarlo o formatearlo.

Después, usa effects para actualizar el DOM cada vez que cualquiera de estos valores cambie. El resultado debe mostrar un texto compuesto con todos los datos del usuario, actualizándose al instante.

¿Qué te llevas de todo este recorrido?

Ya entiendes los flujos esenciales que mueven a una librería reactiva moderna. Hay mucho más detrás de bambalinas, pero con estas bases puedes:

Leer el código fuente de Solid y otras librerías sin perderte.
Responder con seguridad preguntas avanzadas en entrevistas técnicas.
Construir tus propias abstracciones reactivas para proyectos reales.

Comparte en los comentarios cómo resolviste el reto de los cuatro inputs con tu propia librería reactiva, y nos vemos en el siguiente módulo para entrar de lleno al renderizado en Solid.

Kevin J. Zea Alvarado

Hace 8 meses

A mí se me ocurrió hacerlo de la siguiente manera:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Project</title>
  </head>
  <body>
    <input id="first-name-input" type="text" />
    <input id="last-name-input" type="text" />
    <input id="date-of-birth-input" type="date" />
    <input id="twitter-username-input" type="text" />

    <p>
      Hey! I'm
      <a id="twitter-link" href="https://twitter.com/">
        <span id="first-name"></span>
        <span id="last-name"></span>
      </a>
      . I'm
      <span id="age"></span>
      years old
    </p>

    <script type="importmap">
      {
        "imports": {
          "solid": "./solid.js"
        }
      }
    </script>

    <script type="module">
      import { createEffect, createSignal } from 'solid';

      const BASE_URL = 'https://twitter.com/';

      const [firstName, setFirstName] = createSignal('');
      const [lastName, setLastName] = createSignal('');
      const [dateOfBirth, setDateOfBirth] = createSignal('');
      const [username, setUsername] = createSignal('');

      const $firstNameInput = document.querySelector('#first-name-input');
      const $lastNameInput = document.querySelector('#last-name-input');
      const $dateOfBirthInput = document.querySelector('#date-of-birth-input');
      const $usernameInput = document.querySelector('#twitter-username-input');

      const $firstName = document.querySelector('#first-name');
      const $lastName = document.querySelector('#last-name');
      const $age = document.querySelector('#age');
      const $twitterLink = document.querySelector('#twitter-link');

      $firstNameInput.addEventListener('input', (e) => {
        setFirstName(e.target.value);
      });

      $lastNameInput.addEventListener('input', (e) => {
        setLastName(e.target.value);
      });

      $dateOfBirthInput.addEventListener('input', (e) => {
        const date = new Date(e.target.value);
        const age = (Date.now() - date.getTime()) / 1000 / 60 / 60 / 24 / 365;

        setDateOfBirth(Math.floor(age));
      });

      $usernameInput.addEventListener('input', (e) => {
        setUsername(e.target.value);
      });

      createEffect(() => {
        $firstName.textContent = firstName();
      });

      createEffect(() => {
        $lastName.textContent = lastName();
      });

      createEffect(() => {
        $age.textContent = dateOfBirth();
      });

      createEffect(() => {
        $twitterLink.href = BASE_URL + username();
      });
    </script>
  </body>
</html>

Acepto todo tipo de feedback

Introducción a SolidJS

SolidJS vs React: reactividad granular explicada

Python para Principiantes: Fundamentos y Aplicaciones Básicas

Signals en SolidJS: crea datos reactivos

createEffect y side effects en SolidJS

Signals derivados vs createMemo en Solid

Reactividad a profundidad

Qué es la reactividad en Solid

Creación de una Librería Reactiva MiniSolid desde Cero

Implementación de Signals en Librería Reactiva Solid

Cómo createEffect conecta signals y efectos

Señales derivadas sin nuevas primitivas

createMemo para evitar renderizados innecesarios

Cómo Solid convierte JSX al DOM real

Renderizado en Solid

Configurando SolidJS con Tailwind para Todo App

Dark mode en SolidJS con signals

Renderizado Condicional en Solid: Técnicas y Optimización

Renderizado de listas reactivas con For en Solid

Manejo de Eventos en Elementos HTML con SolidJS

Reactividad en Listas

Optimización de Renderizado y Reactividad en Listas con SolidJS

Cómo funcionan los stores en Solid JS

Stores de SolidJS para datos complejos

Función produce para mutar stores en Solid

Componentes

Qué son los componentes en Solid

Comunicación padre-hijo con props en SolidJS

Eventos personalizados entre componentes React

Persistencia con localStorage y useEffect

Deploy de app Solid en Netlify

Solid y el futuro del desarrollo web

Cómo Solid convierte JSX al DOM real