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:

1. Nombre, manejado con un signal.
2. Apellido, manejado con otro signal.
3. Fecha de nacimiento, ideal para un memo que calcule edad o formato.
4. 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.