{Code In Progress...}search
Ilustración con un robot mostrando un check list y titulo de crear un TO-DO-LIST, react y logo de react.

Crear una lista de tareas (to-do list)

Vamos a explorar cómo crear una lista de tareas (to-do list) utilizando React, TypeScript y CSS puro. Además, integraremos localStorage para que las tareas persistan incluso después de recargar la página. 

Estructura del proyecto

El proyecto sigue una estructura básica, organizada en componentes reutilizables. Aquí está el esquema de archivos:

│── /src
│   ├── /components
│   │   ├── TaskItem.tsx
│   │   ├── TaskList.tsx
│   │   ├── TaskForm.tsx
│   ├── App.tsx
│   ├── main.tsx
│   ├── index.css

Componentes principales

  1. TaskForm.tsx: Este componente se encarga de capturar la entrada del usuario para agregar nuevas tareas. Utiliza un estado local para manejar el texto ingresado y un formulario para enviar la tarea.

Captura del componente

  1. TaskItem.tsx: Este componente representa una tarea individual. Muestra el texto de la tarea, un botón para marcarla como completada o pendiente, y otro para eliminarla.

Captura del componente

  1. TaskList.tsx: Este componente se encarga de renderizar la lista de tareas. Si no hay tareas, muestra un mensaje indicando que no hay tareas pendientes.

Captura del componente

Añadiendo Persistencia con localStorage

En App.tsx, se maneja el estado global de las tareas y se definen las funciones para agregar, marcar como completada y eliminar tareas. Aquí también se integra localStorage para guardar y cargar las tareas.

Carga inicial de las tareas

Al iniciar la aplicación, necesitamos recuperar las tareas previamente guardadas en localStorage. Para ello, usamos useState con una función de inicialización.

 
const [tasks, setTasks] = useState<{ id: number; text: string; completed: boolean }[]>(() => { const savedTasks = localStorage.getItem("tasks"); return savedTasks ? JSON.parse(savedTasks) : []; });

En este fragmento de código:

  • localStorage.getItem("tasks") obtiene las tareas almacenadas.
  • Si hay tareas guardadas, JSON.parse(savedTasks) las convierte de texto a un arreglo de objetos.
  • Si no hay tareas guardadas, se inicializa con un arreglo vacío ([]).

Guardando las tareas en localStorage

Cada vez que se agregue, elimine o modifique una tarea, debemos actualizar localStorage para que los cambios se mantengan. Para ello, utilizamos useEffect, que se ejecuta cada vez que el estado tasks cambia.

 
useEffect(() => { localStorage.setItem("tasks", JSON.stringify(tasks)); }, [tasks]);
  • JSON.stringify(tasks) convierte el arreglo de tareas en una cadena de texto.
  • localStorage.setItem("tasks", ...) guarda esa cadena en localStorage.
  • Como useEffect depende de tasks, se ejecutará automáticamente cada vez que haya un cambio en las tareas.

Captura de codigo

Este proyecto es un ejemplo sencillo pero efectivo de cómo crear una lista de tareas con React y TypeScript. La integración de localStorage asegura que las tareas no se pierdan al recargar la página, lo que mejora la experiencia del usuario, puedes practicar con el siguiente repositorio.  

Captura del navegador

Code In Progress with ❤️ by Juan Pablo Amador