Lista de tareas con React

La gestión de proyectos se ha vuelto cada vez más importante en el ámbito laboral y personal. Contar con una herramienta que nos permite organizar nuestras tareas de manera efectiva es fundamental para alcanzar nuestros objetivos de manera eficiente.

¿Qué es React y por qué usarlo?

React es una biblioteca de JavaScript utilizada para construir interfaces de usuario interactivas y reutilizables. Fue desarrollada por Facebook y se utiliza en aplicaciones web y móviles. Con esta biblioteca, puedes crear componentes reutilizables que encapsulan una parte de la interfaz de usuario y manejan su propio estado. Esto facilita la creación y el mantenimiento de aplicaciones web complejas.

A continuación, exploraremos cómo crear una lista de tareas utilizando React, una de las bibliotecas de JavaScript más populares en la actualidad.

Creando una aplicación con Create React App

Antes de sumergirnos en la creación de nuestra lista de tareas, es importante contar con una base sólida sobre la cual construir nuestra aplicación. Para ello, utilizaremos Create React App, una herramienta que nos permite desarollar rápidamente una aplicación de React con una configuración predefinida.

Con eso en mano, debemos asegurarnos de tener instalado Node.js en nuestro sistema. Una vez que lo hemos instalado, abrimos nuestra terminal y ejecutamos el siguiente comando:

npx create-react-app mi-aplicacion-de-tareas

Este comando creará una nueva carpeta llamada mi-aplicacion-de-tareas con toda la estructura necesaria para desarrollar lo que indica su nombre.

Paso 1: Dividir la interfaz de usuario en componentes

Lo primero que debemos hacer en el camino hacia nuestra lista de tareas es dividir la interfaz de usuario en una jerarquía de componentes. Esto nos ayudará a organizar y reutilizar el código de manera más efectiva.

Imaginemos que queremos una lista de tareas con la capacidad de agregarlas, marcarlas como completadas y eliminarlas. Podemos comenzar identificando los componentes principales de nuestra aplicación:

• App: El componente principal que contiene toda la aplicación.
• TodoAdd: Útil para agregar nuevas tareas.
• TodoItem: Permite mostrar y eliminar las tareas.
• TodoList: Contiene la lista de tareas.
• TodoUpdate: Se encarga de actualizar los datos entre los componentes.

Cada uno de éstos tendrá su propio estado y se comunicará con los demás a través de props.

Paso 2: Crear componentes estáticos en React

Una vez identificados los componentes principales de nuestra aplicación, podemos construir la versión interactiva de la interfaz de usuario.

El componente TodoAdd será responsable de agregar la tarea. Para ello tendrá esta estructura:

• Description: El nombre de la tarea.
• OnInputChange: Cuando el usuario modifica una tarea.
• OnResetForm: Se vacía el campo para ingresar description, una vez que el usuario presione Enter o el botón Agregar.

Ahora creamos la función onFormSubmit que se activará cuando el usuario presione el botón Agregar, tiene como condición, si el campo description es menor o igual que uno, se ejecutará la función newTodo, el cual permite agregar elementos a la lista. Por medio de un id formado con la fecha, description con la información que ingrese el usuario y done que determina si una tarea está pendiente o finalizada. Seguimos con la estructura HTML donde creamos un formulario y un botón.

Continuamos con el componente TodoItem, que mostrará la información de una tarea específica por medio de una lista, la cual está constituida por:

• Span: Posee el contenido de la tarea. Una vez que el usuario presione el botón agregar, se ejecutará la función handleComplete.
• Botón editar: Se activará la función handleUpdateTodo.
• Botón eliminar: Se ejecutará cuando el usuario presione el ícono de cesta de basura con la función handleDeleteTodo.

Luego, podemos agregar el componente TodoList para mostrar una lista de tareas utilizando el componente TodoItem. Comenzamos con una lista con la función map que permite iterar sobre el array todos y nos devuelve un nuevo array todo con las funciones de TodoItem como handleUpdateTodo, handleDeleteTodo y handleCompleteTodo.

Por último, el componente TodoUpdate actualizará los datos entre los componentes, donde copiamos y pegamos el mismo formulario que usamos en el componente TodoAdd, pero la clase principal será input-update con este condicional: si el usuario finaliza la tarea, entonces cambia el estado done a false y se activará la propiedad CSS text-decoration-dashed, tachando el texto de la tarea.

Paso 3: Agregar interactividad con el estado de React

Ahora que tenemos nuestra interfaz de usuario estática, es hora de agregar interactividad a nuestra lista de tareas utilizando el estado de React.

Podemos comenzar por agregar el estado a nuestro componente App y pasar los datos necesarios como props a los componentes TodoList y TodoItem. Luego, podemos agregar funciones de manejo de eventos en el componente TodoItem para actualizar el estado cuando el usuario interactúe con una tarea.

En la carpeta src creamos el archivo todoReducer.js, el cual contiene funciones que toman un estado inicial y una acción, y devuelven un nuevo estado. Estas funciones son utilizadas junto con el concepto de store en Redux para gestionar el estado de una aplicación.

Cuando una acción ocurre, como un clic en un botón, se envía al reducer correspondiente junto con el estado actual. El reducer procesa la acción y devuelve un nuevo estado actualizado.

En este código, initialState es el estado inicial que se usa cuando se carga la aplicación por primera vez. Mientras que action es un objeto que contiene información sobre la acción que se está realizando.

Dentro del reducer, se utiliza una estructura switch para determinar la acción que se realiza. El código presenta cuatro casos dentro del switch para diferentes acciones, como éstas:

• Add Todo: Va a tomar un estado inicial con un action.payload, que permite pasar datos específicos de una acción a un reducer de manera estructurada, evitando así acoplar los componentes entre sí y favoreciendo la escalabilidad y mantenibilidad del código.
• Delete Todo: va a retornar un nuevo arreglo del estado inicial y filtrará el id para eliminar la tarea.
• Complete Todo: tiene la siguiente estructura:

todo: {

id: 123465597,

description: “Aprender React”,

done: que será un valor booleano, true o false

}

Entonces va a devolver un estado inicial con un nuevo array map, con la siguiente comprobación: Si todo.id es igual a action.payload, entonces retornará todo el contenido de la estructura todo, pero la propiedad done será la negación de todo.done.

• Update Todo: en este último caso, copiamos y pegamos el código de Complete Todo, pero cambiará el .payload porque será un objeto .id y la propiedad que estaremos manipulando es description.

Es importante tener en cuenta que los reducers en React son funciones puras, lo que significa que no deben tener efectos secundarios ni modificar el estado original directamente. En su lugar, se debe devolver un nuevo estado actualizado. Esto permite que las aplicaciones sean más predecibles y fáciles de depurar.

Seguimos con los hooks, que permiten usar el estado y otras características de React en componentes funcionales, sin necesidad de usar clases. Además son funciones especiales que permiten juntar el estado de React y el ciclo de vida de los componentes funcionales.

Algunos de los hooks más utilizados

• UseState: Ideal para añadir estado a componentes funcionales. Recibe un valor inicial y retorna un array con el estado actual y una función para actualizarlo.
• UseEffect: Con este hook puedes realizar efectos secundarios en componentes funcionales. Puedes usarlo para hacer peticiones a una API, suscribirte a eventos, limpiar recursos, etc.
• UseContext: Recibe un objeto de contexto como argumento y retorna su valor actual.
• UseReducer: Es similar a useState pero es más adecuado para casos donde el estado tiene una lógica compleja o donde hay muchas transiciones de estado posibles.

En este código, utilizamos useEffect para realizar una petición a una API y guardar los datos en el estado local, así los datos permanecerán si el usuario recarga la página. Es importante destacar que useEffect también puede devolver una función de limpieza, la cual se ejecuta antes de que el componente se desmonte.

Por otro lado en React, puedes utilizar el localStorage para guardar y acceder a datos en el navegador del usuario. Para empezar, puedes utilizar el método setItem para guardar datos en el localStorage.

Recuerda que localStorage solo puede almacenar cadenas de texto. Si deseas guardar objetos en localStorage, puedes utilizar JSON.stringify para convertir el objeto a una cadena de texto antes de guardarlo, y JSON.parse para convertir la cadena de texto nuevamente a un objeto al obtenerlo de localStorage.

Ten en cuenta que localStorage está disponible en el navegador y no en el servidor, por lo que no podrás acceder a él durante el proceso de renderizado del servidor.

Paso 4: Despliegue de la aplicación

Una vez que hayamos completado el desarrollo de nuestra lista de tareas con React, podemos desplegarla en un entorno de producción. Podemos utilizar servicios de alojamiento web como Netlify o Vercel para desplegar nuestra aplicación de manera fácil y rápida.

También es importante asegurarnos de optimizar nuestra aplicación para obtener un rendimiento óptimo. Podemos utilizar herramientas de optimización de rendimiento como Webpack o Babel para reducir el tamaño de los archivos y mejorar los tiempos de carga de la aplicación.

React es una herramienta poderosa que nos permite construir interfaces de usuario rápidas y eficientes para aplicaciones web. Con su enfoque modular y su sistema de componentes reutilizables, podemos crear aplicaciones escalables y fáciles de mantener.

Espero que este artículo te haya sido útil y te haya dado una idea de cómo utilizar React para desarrollar tus propias aplicaciones web. ¡Buena suerte con tu proyecto de lista de tareas!