Crear aplicaciones organizadas y fáciles de mantener es uno de los objetivos centrales al trabajar con SolidJS. Los componentes son la herramienta principal para lograrlo, ya que permiten separar funcionalidades en piezas independientes con su propia lógica y representación visual. A continuación se explican los fundamentos para construir y utilizar componentes de forma efectiva.
¿Qué es un componente en SolidJS?
En SolidJS, un componente es simplemente una función de JavaScript que combina dos elementos: funcionalidad (lógica) y renderización (HTML). Si una función contiene ambas cosas, se considera un componente [0:20].
A diferencia de otros frameworks que también usan JSX, los componentes en SolidJS no afectan el rendimiento de la aplicación. Su propósito principal es mejorar la reutilización de código, la arquitectura y el diseño de las aplicaciones [0:50].
Cuando una aplicación tiene toda la lógica mezclada en un solo archivo, como el manejo de un dark mode, una lista de tareas y un input, el código se vuelve difícil de leer y mantener. Encapsular cada funcionalidad en su propio componente resuelve este problema.
¿Cómo se crea un componente paso a paso?
El proceso comienza creando una carpeta llamada components dentro del directorio source del proyecto [1:20]. Cada componente se define en su propio archivo .jsx.
¿Cómo encapsular el botón de dark mode?
Se crea un archivo ButtonDarkMode.jsx y se exporta una función con ese nombre. Dentro de ella se coloca:
- La lógica extraída del archivo principal, como la señal de estado y el efecto.
- El HTML correspondiente, en este caso el botón con el sistema de toggle para cambiar el ícono [1:40].
Es importante importar las primitivas necesarias en el nuevo archivo. Si el componente usa createSignal y createEffect, ambas deben importarse desde SolidJS dentro del componente [2:30].
Para renderizar el componente, se llama como una función de JavaScript directamente en el lugar donde antes estaba el HTML original. Se importa desde la carpeta de componentes y se invoca con la sintaxis habitual de JSX [2:50].
¿Qué son los fragmentos en JSX?
Al crear un componente que retorna múltiples elementos al mismo nivel (sin un padre común), JSX genera un error. Para resolverlo se utilizan los fragmentos, representados con etiquetas vacías <></>. Funcionan como contenedores invisibles que agrupan elementos sin añadir nodos extra al DOM [4:00].
Este concepto resulta útil al encapsular componentes como un ToDo item, donde se tienen un input, un span y un botón de eliminación, todos al mismo nivel.
¿Qué pasa con la comunicación entre componentes?
Al extraer un componente como ToDo.jsx y utilizarlo dentro de la lista principal, es posible que la aplicación se rompa [4:30]. Esto ocurre porque el componente hijo hace referencia a variables o funciones que no existen en su propio contexto.
Este es un problema esperado cuando se trabaja con la relación entre componentes padres e hijos. La comunicación entre ellos, por ejemplo pasar datos de la lista principal hacia cada ToDo item, requiere mecanismos específicos que permiten mantener el flujo de información aunque la lógica esté separada en archivos distintos [4:50].
Los puntos clave al trabajar con componentes en SolidJS son:
- Cada componente es una función que retorna JSX.
- Se deben importar todas las primitivas que el componente necesite.
- Los fragmentos resuelven el problema de múltiples elementos raíz.
- La encapsulación mejora la legibilidad y la reutilización.
- La comunicación padre-hijo requiere patrones específicos para compartir datos.
Si ya has probado crear tus propios componentes, comparte cómo organizas tu código y qué estrategias te han funcionado mejor para mantener la comunicación entre ellos.
