Configurando SolidJS con Tailwind para Todo App
Contenido del curso
Andres Blandon
Kenneth Angulo L
Kenneth Angulo L
Esta es la estructura
<div class="w-full h-full min-h-screen flex items-center justify-center dark:bg-gray-600 dark:text-white"> <button class="text-2xl fixed top-0 right-0">🌚</button> <div> <h1 class="text-2xl text-center">Solid Todo App</h2> <input class="border dark:text-black" type="text" /> <button class="px-2 border">Add</button> <ul> <li> <input type="checkbox" checked /> <span> <s>abrazaar pinguino</s> </span> <button>❌</button> </li> <li> <input type="checkbox" checked /> <span> <s>abrazaar pinguino</s> </span> <button>❌</button> </li> </ul> <p class="text-sm mt-4">Completed count: {0}</p> </div> </div>```
Ah bueno, menos mal, me volvio el interes por el curso ! me gusta aprender haciendo.
¿Es posible depurar la reactividad visualmente?
Sí, depurar la reactividad es fundamental y completamente posible si sabes dónde mirar. A diferencia de otros frameworks que re-renderizan componentes enteros, Solid.js actualiza únicamente el nodo específico del DOM que cambió. Para visualizar esto, las herramientas de desarrollo del navegador son tu mejor aliado.
Si abres la pestaña Elements (Elementos) en Chrome o Firefox y realizas una acción en tu aplicación (como agregar una tarea), verás que el navegador resalta en color morado o verde exclusivamente la línea de código HTML que se modificó. Esto confirma que tu reactividad es granular y eficiente. Además, puedes usar console.log dentro de tus funciones derivadas o efectos para rastrear exactamente cuándo y por qué un valor está mutando. Entender este flujo visualmente te permite identificar cuellos de botella, evitar renders innecesarios y asegurar que tu aplicación consuma la menor cantidad de memoria posible.
