Aprender a usar componentes en Solid te permite encapsular funcionalidad y mejorar la arquitectura de tus aplicaciones. Aquí descubres qué es un componente, cómo crearlo paso a paso y por qué su rol en Solid es distinto al de otros frameworks con JSX.

Qué es un componente en Solid y por qué importa

En Solid, un componente es simplemente una función de JavaScript que combina funcionalidad y renderizado. Si una función tiene lógica y devuelve HTML mediante JSX, ya es un componente.

A diferencia de otros frameworks con JSX, en Solid los componentes no son una pieza clave del performance. Su valor está en otro lado: te ayudan a reutilizar código, mejorar la arquitectura y hacer tu aplicación más legible.

¿Qué es un componente en Solid? Es una función de JavaScript que retorna JSX y puede contener primitivas como createSignal o createEffect. Sirve para encapsular una funcionalidad específica de tu app.

Imagina que tienes todo mezclado en un solo archivo: el dark mode, la lista de tareas y el input para agregarlas. Separar cada bloque en su propio componente vuelve el código mucho más mantenible.

Cómo creo un componente reutilizable paso a paso

El flujo para encapsular funcionalidad en Solid es directo y se basa en tres movimientos sencillos [00:50].

1. Crear una carpeta components dentro de src para organizar todos tus componentes.
2. Crear un archivo .jsx por cada componente, por ejemplo ButtonDarkMode.jsx.
3. Exportar una función con el nombre del componente que retorne el JSX correspondiente.

Dentro de esa función mueves toda la lógica relacionada: las primitivas, los handlers y el HTML. Lo importante es que cada componente tenga una sola responsabilidad clara, como alternar el modo oscuro o renderizar un ítem de la lista.

Qué primitivas debo importar dentro del componente

Cuando mueves la lógica desde el archivo principal, tienes que importar manualmente las primitivas que uses. Si tu componente usa createSignal y createEffect, ambas deben aparecer en el import de solid-js. Si olvidas este paso, tu app va a romperse al renderizar.

Cómo renderizo el componente en mi aplicación

Como un componente es una función, lo invocas usando sintaxis JSX donde antes tenías el código original. Por ejemplo, reemplazas todo el bloque del botón por <ButtonDarkMode /> y agregas el import desde la carpeta components. Al refrescar, tu aplicación sigue funcionando exactamente igual, pero con el código encapsulado [02:30].

Cómo manejar fragmentos y errores al encapsular varios elementos

Cuando creas un componente más complejo, como uno para representar un ítem de tu lista de tareas, te puedes encontrar con un error común: JSX no permite varios elementos en el nodo raíz.

La solución son los fragmentos, etiquetas invisibles que envuelven varios elementos sin agregar un nodo padre real al DOM. Se escriben con <> y </> y resuelven el error de sintaxis sin afectar el HTML final.

¿Qué es un fragmento en JSX? Es una etiqueta vacía que agrupa varios elementos sin renderizar un contenedor extra. Útil cuando no quieres añadir un div solo para cumplir con la regla del nodo raíz.

Por qué mi componente se rompe al importarlo

Al mover código a un componente nuevo, es normal que la app se rompa porque el componente hijo hace referencia a variables, signals o funciones que viven en el componente padre y no existen en su nuevo contexto.

Por ejemplo, si tu componente Todo usa una función para eliminar un ítem, esa función ya no está disponible dentro del archivo aislado. La solución pasa por establecer comunicación entre padre e hijo mediante props, algo que se aborda en las siguientes clases.

Mientras tanto, identifica qué dependencias necesita cada componente:

• Signals compartidos entre varios componentes.
• Funciones de manejo de eventos definidas en el padre.
• Datos que se pasan desde una lista hacia cada ítem individual.

Esta separación es justo lo que vuelve a tu código más escalable. Cuéntame en los comentarios qué parte de tu app vas a refactorizar primero en componentes.