LISTA DE TAREA

 

Lista de Tareas en React

Voy a crear un ejemplo muy básico de una lista de tareas en React que cumpla con:

1. Un campo de entrada para añadir tareas

2. Un botón para agregar la tarea

3. Una lista que muestre todas las tareas

4. Las tareas se guardarán en un array (arreglo) en el estado del componente

Aquí está el código completo y luego lo explicaré paso a paso:

jsx

Copy

Download

import { useState } from 'react';

function ListaDeTareas() {
  // Estado para almacenar la lista de tareas
  const [tareas, setTareas] = useState([]);
  // Estado para almacenar el valor del input
  const [nuevaTarea, setNuevaTarea] = useState('');

  // Función para agregar una nueva tarea
  const agregarTarea = () => {
    if (nuevaTarea.trim() !== '') {
      setTareas([...tareas, nuevaTarea]);
      setNuevaTarea(''); // Limpiar el input después de agregar
    }
  };

  // Función para manejar la tecla Enter
  const manejarKeyDown = (e) => {
    if (e.key === 'Enter') {
      agregarTarea();
    }
  };

  return (
    <div style={{ maxWidth: '400px', margin: '0 auto', padding: '20px' }}>
      <h1>Lista de Tareas</h1>
      <div>
        <input
          type="text"
          value={nuevaTarea}
          onChange={(e) => setNuevaTarea(e.target.value)}
          onKeyDown={manejarKeyDown}
          placeholder="Escribe una nueva tarea"
        />
        <button onClick={agregarTarea}>Agregar</button>
      </div>
      <ul>
        {tareas.map((tarea, index) => (
          <li key={index}>{tarea}</li>
        ))}
      </ul>
    </div>
  );
}

export default ListaDeTareas;

Explicación paso a paso:

1. Importar useState:

   • useState es un hook de React que nos permite manejar estado en componentes funcionales.

2. Estado del componente:

   • tareas: Array que almacena todas las tareas (inicialmente vacío)

   • nuevaTarea: String que almacena el valor del input (inicialmente vacío)

3. Función agregarTarea:

   • Verifica que el input no esté vacío o solo contenga espacios

   • Agrega la nueva tarea al array existente usando el spread operator (...)

   • Limpia el input después de agregar la tarea

4. Función manejarKeyDown:

   • Permite agregar tareas presionando Enter

5. Renderizado:

   • Input controlado: su valor está vinculado al estado nuevaTarea

   • Botón que ejecuta agregarTarea al hacer click

   • Lista (ul) que muestra todas las tareas usando map

Cómo usar este componente:

1. Crea un nuevo proyecto React (si no tienes uno) con:

   Copy

   Download

   npx create-react-app mi-lista-tareas

2. Reemplaza el contenido de App.js con este componente o crea un nuevo archivo para él.

3. Ejecuta la aplicación con:

   Copy

   Download

   npm start

Características adicionales que podrías agregar después:

• Eliminar tareas

• Marcar tareas como completadas

• Persistencia (guardar en localStorage)

• Editar tareas existentes

Este ejemplo es intencionalmente básico para que entiendas los conceptos fundamentales de React: estado, manejo de eventos y renderizado de listas. ¿Te gustaría que profundice en algún aspecto en particular?