Componentes, props y state

Ejercicio lista de tareas

Diseño final de tareas

Tomando como referencia el diseño de la imagen y utilizando los materiales que se adjuntan para este ejercicio. Crear una aplicación de ToDo List en React.

1KB

TAREAS_CSS.zip

archive

HTML y CSS de base para el ejercicio

• Reconocer una estructura de componentes comenzando en los componentes más generales y detectando los subcomponentes ayudarían al desarrollo del frontend. Para la planificación se puede armar una estructura de árbol que guíe una planificación top-to-bottom.

• Armada la estructura de componentes, crear esos componentes en React a partir de los materiales (HTML y CSS), utilizando una estrategia de bottom-to-top, logrando quitar los elementos HTML más específicos del archivo original, para luego ir hacia los componentes padres.

• Definir una ubicación para que viva un state de tareas, que esté compuesto por un array de objetos tarea que tengan un id (Number), un nombre (String) y una propiedad completado (Boolean).

• Hacer el pasaje de las tareas como prop al componente que corresponda y en ese componente hacer un map de las tareas para crear cada uno de los componentes tarea.

• Asignar evento de click al botón para que con cada presión del botón se agregue una nueva tarea al state de tareas general. En este paso puede ser necesario enviar datos a un componente padre.