Renderizado de Listas

Curso de SolidJS

Introducción a SolidJS

Los problemas que resuelve SolidJS

Instalación de SolidJS: usando un template para nuestra aplicación

Primitiva reactiva de SolidJS: signals

Primitiva reactiva de SolidJS: effect

Primitiva reactiva de SolidJS: memo

Quiz: Introducción a SolidJS

Reactividad a profundidad

¿Qué es la reactividad?

Crea tu propia libreria reactiva: MiniSolid

Signals aplicados a un proyecto

Effects aplicados a un proyecto

Crea mejores aplicaciones con signals derivados

Memos aplicados a un proyecto

Renderizado de un proyecto en SolidJS

Quiz: Reactividad a profundidad

Renderizado en Solid

ToDo App: usando reactividad y sistemas de renderizado en un proyecto

Implementando el Dark Mode a un proyecto

Renderizado Condicional

Renderizado de Listas

Manejo de Eventos

Quiz: Renderizado en Solid

Reactividad en Listas

Stores para optimizar renderizados

Como implementar Stores a un proyecto

Función Produce para usar sintaxis de Javascript

Quiz: Reactividad en Listas

Componentes

¿Qué son componentes en SolidJS?

Usando Props para comunicación entre componentes de una aplicación

Manejando eventos en una aplicación SolidJS

Guarda el estado de una aplicación con LocalStorage

Deploy de la aplicación ToDo con Netlify

Comparte tu proyecto con la comunidad

Quiz: Componentes

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 1

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Danny González

hace un año

  <For each={todos()}>
       {(todo,index)=>(
          <li>
            <input type="checkbox" checked={(console.log("test"),todo.completed)}
            onChange={()=>{ 
              setTodos((todos)=>
                todos.map((t,i)=>{
                   return i === index()
                   ? {
                    ...t,completed:!t.completed 
                   }:
                   t;
                })

            )}} />
            <span>
              <Show when={todo.completed} fallback={todo.text}>
                <s style="pointer-events:none">
                  {todo.text}
                </s>
              </Show>
            </span>
          </li>
        )
       }
         </For>