Curso de JavaScript
Dale vida a la web.
Aprende a programar, crea interacciones y construye proyectos reales.
Antes de escribir HTML o CSS, planeas el estado de tu app: qué datos necesitas guardar. En una lista de tareas, eso es un array de objetos, y una función render() que dibuja la pantalla a partir de ese array.
Explicación
Antes de programar la interacción, defines los datos (el estado) y una función que dibuja la pantalla a partir de ellos:
el estado (los datos)El array tareas es la única fuente de verdad de tu app: nunca escribes HTML a mano para cada tarea, siempre sale de aquí.
function render()Recorre el estado y genera el HTML que se muestra en pantalla. Se vuelve a llamar cada vez que el estado cambia.
tareas.map(funcion)Transforma cada tarea del array en un pedazo de HTML (un string), reutilizando lo aprendido en el módulo de Arreglos.
array.join("")Une todos los pedazos de HTML generados por map en un solo string, listo para insertarlo con innerHTML.
Reto rápido
Agrega una cuarta tarea al array tareas (con completada: false) y confirma que aparece automáticamente en la lista.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Planear antes de programar significa decidir primero qué datos necesitas (el array de tareas) y después construir la vista a partir de ellos — nunca al revés.
Dato extra
Separar "estado" (los datos) de "vista" (lo que se dibuja) es el mismo patrón que usan frameworks como React o Vue; aquí lo construyes a mano con herramientas que ya conoces: arrays, objetos y el DOM.
Error común
Modificar el HTML directamente (por ejemplo agregando un <li> a mano en vez de al array tareas): el estado y lo que se ve en pantalla dejan de coincidir, y la próxima vez que se llame a render() se pierde ese cambio.
Siguiente paso
Ya tienes la estructura de datos y la función que dibuja la lista. Ahora vamos a construir la lógica para agregar, completar y eliminar tareas.
Ir a la siguiente lección