Tutorial paso a paso para crear una aplicación de lista de tareas con React

En este tutorial diseñado para desarrolladores principiantes e intermedios, aprenderás a crear una aplicación lista de tareas (to-do list) utilizando React. Cubriremos desde la configuración inicial del proyecto con Create React App, hasta la implementación completa con componentes funcionales, manejo de estados con React Hooks, y almacenamiento persistente usando Local Storage.

¡Vamos a profundizar en el desarrollo frontend con React juntos!

¿Qué aprenderás en este tutorial?

Configurar un proyecto React con Create React App
Crear componentes funcionales en React
Manejar estado utilizando React Hooks
Implementar funcionalidades para agregar, eliminar y marcar tareas como completas
Guardar y recuperar datos usando Local Storage para almacenamiento local React

Este tutorial lista de tareas React, ideal para quienes quieren crear to-do app React, te proporcionará todos los pasos y el código necesario con explicaciones claras.

1. Configuración del proyecto con Create React App

Para comenzar, necesitamos configurar el entorno de desarrollo con React. La forma más sencilla es usando Create React App, que crea una estructura básica lista para empezar a desarrollar.

Paso 1: Instalar Create React App e iniciar un proyecto

Abre una terminal (o línea de comandos) y ejecuta:

npx create-react-app todo-app
cd todo-app
npm start

npx create-react-app todo-app

cd todo-app

npm start

npx create-react-app todo-app crea una carpeta llamada todo-app con el proyecto inicial.
cd todo-app entra en la carpeta.
npm start inicia la aplicación en modo desarrollo, normalmente en http://localhost:3000

Si ves la página de bienvenida de React, ¡todo está listo para comenzar!

2. Estructura básica y creación de componentes funcionales

React recomienda dividir la UI en componentes que se puedan reutilizar y gestionar por separado.

Vamos a crear los siguientes componentes:

App: Componente principal que mantiene el estado y maneja la lógica
TodoForm: Formulario para agregar nuevas tareas
TodoList: Lista que muestra las tareas
TodoItem: Elemento individual de tarea

Limpieza inicial

En src/App.js, limpiaremos el código para tener una base simple:

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Lista de Tareas con React</h1>
    </div>
  );
}

export default App;

import React from 'react';

function App() {

return (

<h1>Lista de Tareas con React</h1>

</div>

);

}

export default App;

3. Manejo de estado con React Hooks

Para almacenar las tareas, usaremos el hook useState.

En React, state representa la información que puede cambiar en la aplicación.

Paso 1: Añadir estado para las tareas en App.js

import React, { useState } from 'react';

function App() {
  const [tasks, setTasks] = useState([]); // Estado para guardar todas las tareas

  return (
    <div className="App">
      <h1>Lista de Tareas con React</h1>
      {/* Aquí insertaremos el resto de componentes */}
    </div>
  );
}

export default App;

import React, { useState } from 'react';

function App() {

const [tasks, setTasks] = useState([]); // Estado para guardar todas las tareas

return (

<h1>Lista de Tareas con React</h1>

{/* Aquí insertaremos el resto de componentes */}

</div>

);

}

export default App;

El arreglo tasks guardará cada objeto tarea con propiedades como id, text y completed.

4. Crear componente para agregar tareas (`TodoForm`)

Un formulario donde el usuario escribe la nueva tarea y la añade a la lista.

Código de `TodoForm.js`:

import React, { useState } from 'react';

function TodoForm({ addTask }) {
  const [inputValue, setInputValue] = useState('');

  // Maneja el envío del formulario
  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue.trim()) {
      addTask(inputValue); // Llama la función del padre para añadir task
      setInputValue('');  // Limpia el input
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Nueva tarea..."
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button type="submit">Agregar</button>
    </form>
  );
}

export default TodoForm;

import React, { useState } from 'react';

function TodoForm({ addTask }) {

const [inputValue, setInputValue] = useState('');

// Maneja el envío del formulario

const handleSubmit = (e) => {

e.preventDefault();

if (inputValue.trim()) {

addTask(inputValue); // Llama la función del padre para añadir task

setInputValue(''); // Limpia el input

}

};

return (

<input

type="text"

placeholder="Nueva tarea..."

value={inputValue}

onChange={(e) => setInputValue(e.target.value)}

<button type="submit">Agregar</button>

</form>

);

}

export default TodoForm;

Explicación:

useState controla el valor del input.
Al enviar, se manda la tarea al componente padre con addTask.

5. Crear componentes para mostrar tareas (`TodoList` y `TodoItem`)

`TodoItem.js`

Un componente que representa una tarea individual:

import React from 'react';

function TodoItem({ task, toggleComplete, deleteTask }) {
  return (
    <div style={{
      textDecoration: task.completed ? 'line-through' : '',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginBottom: '8px'
    }}>
      <input
        type="checkbox"
        checked={task.completed}
        onChange={() => toggleComplete(task.id)}
      />
      <span>{task.text}</span>
      <button onClick={() => deleteTask(task.id)} style={{ marginLeft: '10px' }}>
        Eliminar
      </button>
    </div>
  );
}

export default TodoItem;

import React from 'react';

function TodoItem({ task, toggleComplete, deleteTask }) {

return (

<div style={{

textDecoration: task.completed ? 'line-through' : '',

display: 'flex',

justifyContent: 'space-between',

alignItems: 'center',

marginBottom: '8px'

}}>

<input

type="checkbox"

checked={task.completed}

onChange={() => toggleComplete(task.id)}

<button onClick={() => deleteTask(task.id)} style={{ marginLeft: '10px' }}>

Eliminar

</button>

</div>

);

}

export default TodoItem;

`TodoList.js`

Lista que muestra todos los TodoItem:

import React from 'react';
import TodoItem from './TodoItem';

function TodoList({ tasks, toggleComplete, deleteTask }) {
  return (
    <div>
      {tasks.length === 0 ? (
        <p>No hay tareas aún.</p>
      ) : (
        tasks.map((task) => (
          <TodoItem
            key={task.id}
            task={task}
            toggleComplete={toggleComplete}
            deleteTask={deleteTask}
          />
        ))
      )}
    </div>
  );
}

export default TodoList;

import React from 'react';

import TodoItem from './TodoItem';

function TodoList({ tasks, toggleComplete, deleteTask }) {

return (

<div>

{tasks.length === 0 ? (

<p>No hay tareas aún.</p>

) : (

tasks.map((task) => (

<TodoItem

key={task.id}

task={task}

toggleComplete={toggleComplete}

deleteTask={deleteTask}

))

)}

</div>

);

}

export default TodoList;

6. Conectar componentes y manejar funcionalidades en `App.js`

Ya tenemos todos los componentes, ahora los importamos y unimos la funcionalidad.

Código actualizado `App.js`:

import React, { useState, useEffect } from 'react';
import TodoForm from './components/TodoForm';
import TodoList from './components/TodoList';

function App() {
  // Cargamos las tareas desde Local Storage o inicializamos vacío
  const [tasks, setTasks] = useState(() => {
    const savedTasks = localStorage.getItem('tasks');
    return savedTasks ? JSON.parse(savedTasks) : [];
  });

  // Guardar tareas en Local Storage cada vez que cambien
  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }, [tasks]);

  // Añadir nueva tarea
  const addTask = (text) => {
    const newTask = {
      id: Date.now(), // Identificador único
      text: text,
      completed: false
    };
    setTasks([...tasks, newTask]);
  };

  // Eliminar tarea
  const deleteTask = (id) => {
    setTasks(tasks.filter((task) => task.id !== id));
  };

  // Marcar tarea completada / no completada
  const toggleComplete = (id) => {
    setTasks(
      tasks.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  return (
    <div className="App" style={{ width: '400px', margin: '30px auto', fontFamily: 'Arial, sans-serif' }}>
      <h1>Lista de Tareas con React</h1>
      <TodoForm addTask={addTask} />
      <TodoList tasks={tasks} toggleComplete={toggleComplete} deleteTask={deleteTask} />
    </div>
  );
}

export default App;

import React, { useState, useEffect } from 'react';

import TodoForm from './components/TodoForm';

import TodoList from './components/TodoList';

function App() {

// Cargamos las tareas desde Local Storage o inicializamos vacío

const [tasks, setTasks] = useState(() => {

const savedTasks = localStorage.getItem('tasks');

return savedTasks ? JSON.parse(savedTasks) : [];

});

// Guardar tareas en Local Storage cada vez que cambien

useEffect(() => {

localStorage.setItem('tasks', JSON.stringify(tasks));

}, [tasks]);

// Añadir nueva tarea

const addTask = (text) => {

const newTask = {

id: Date.now(), // Identificador único

text: text,

completed: false

};

setTasks([...tasks, newTask]);

};

// Eliminar tarea

const deleteTask = (id) => {

setTasks(tasks.filter((task) => task.id !== id));

};

// Marcar tarea completada / no completada

const toggleComplete = (id) => {

setTasks(

tasks.map((task) =>

task.id === id ? { ...task, completed: !task.completed } : task

)

);

};

return (

<h1>Lista de Tareas con React</h1>

</div>

);

}

export default App;

Explicación paso a paso:

Usamos useState con una función inicializadora para cargar tareas almacenadas en Local Storage.
Cada vez que tasks cambian, el efecto con useEffect guarda la lista actualizada en el almacenamiento local.
Las funciones addTask, deleteTask y toggleComplete modifican el estado de las tareas.
La UI renderiza el formulario y la lista pasando estas funciones como props.

7. Estructura de carpetas recomendada

Para un proyecto organizado, se sugiere esta estructura dentro de src:

src/
│
├── components/
│   ├── TodoForm.js
│   ├── TodoList.js
│   └── TodoItem.js
├── App.js
├── index.js

src/

│

├── components/

│ ├── TodoForm.js

│ ├── TodoList.js

│ └── TodoItem.js

├── App.js

├── index.js

8. Mejoras y buenas prácticas

Añade validación para evitar tareas vacías.
Usa useCallback para optimizar funciones si el proyecto crece.
Estiliza con CSS o frameworks (Bootstrap, Material UI).
Considera usar useReducer para manejar estados complejos.
Agrega filtros para mostrar tareas completadas o pendientes.
Implementa tests para componentes y funciones.

9. Finalizando.

¡Felicidades! Has creado tu propia aplicación to-do list con React desde cero. Has aprendido a configurar un proyecto React, crear componentes funcionales, manejar estados con React Hooks y almacenar datos en el navegador con Local Storage.

Esta lista de tareas te servirá como base sólida para proyectos frontend más complejos y mejorar tus habilidades en desarrollo React.

¿Cuál es el siguiente paso?

Experimenta agregando nuevas funcionalidades:
Editar tareas
Ordenar la lista
Filtros por estado
Integra styled-components o CSS Modules para mejorar estilos
Publica tu aplicación con GitHub Pages o Vercel

Comparte este tutorial lista de tareas React con otros desarrolladores y sigue aprendiendo con más tutoriales React hooks tutorial y almacenamiento local React.

¡Mucho éxito en tu camino como desarrollador frontend!

Código completo `App.js` para referencia

import React, { useState, useEffect } from 'react';
import TodoForm from './components/TodoForm';
import TodoList from './components/TodoList';

function App() {
  const [tasks, setTasks] = useState(() => {
    const savedTasks = localStorage.getItem('tasks');
    return savedTasks ? JSON.parse(savedTasks) : [];
  });

  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }, [tasks]);

  const addTask = (text) => {
    const newTask = {
      id: Date.now(),
      text: text,
      completed: false
    };
    setTasks(prevTasks => [...prevTasks, newTask]);
  };

  const deleteTask = (id) => {
    setTasks(prevTasks => prevTasks.filter(task => task.id !== id));
  };

  const toggleComplete = (id) => {
    setTasks(prevTasks =>
      prevTasks.map(task =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  return (
    <div className="App" style={{ width: '400px', margin: '30px auto', fontFamily: 'Arial, sans-serif' }}>
      <h1>Lista de Tareas con React</h1>
      <TodoForm addTask={addTask} />
      <TodoList tasks={tasks} toggleComplete={toggleComplete} deleteTask={deleteTask} />
    </div>
  );
}

export default App;

import React, { useState, useEffect } from 'react';

import TodoForm from './components/TodoForm';

import TodoList from './components/TodoList';

function App() {

const [tasks, setTasks] = useState(() => {

const savedTasks = localStorage.getItem('tasks');

return savedTasks ? JSON.parse(savedTasks) : [];

});

useEffect(() => {

localStorage.setItem('tasks', JSON.stringify(tasks));

}, [tasks]);

const addTask = (text) => {

const newTask = {

id: Date.now(),

text: text,

completed: false

};

setTasks(prevTasks => [...prevTasks, newTask]);

};

const deleteTask = (id) => {

setTasks(prevTasks => prevTasks.filter(task => task.id !== id));

};

const toggleComplete = (id) => {

setTasks(prevTasks =>

prevTasks.map(task =>

task.id === id ? { ...task, completed: !task.completed } : task

)

);

};

return (

<h1>Lista de Tareas con React</h1>

</div>

);

}

export default App;

Tutorial paso a paso para crear una aplicación de lista de tareas con React

¿Qué aprenderás en este tutorial?

1. Configuración del proyecto con Create React App

Paso 1: Instalar Create React App e iniciar un proyecto

2. Estructura básica y creación de componentes funcionales

Limpieza inicial

3. Manejo de estado con React Hooks

Paso 1: Añadir estado para las tareas en App.js

4. Crear componente para agregar tareas (TodoForm)

Código de TodoForm.js:

Explicación:

5. Crear componentes para mostrar tareas (TodoList y TodoItem)

TodoItem.js

TodoList.js

6. Conectar componentes y manejar funcionalidades en App.js

Código actualizado App.js:

Explicación paso a paso:

7. Estructura de carpetas recomendada

8. Mejoras y buenas prácticas

9. Finalizando.

¿Cuál es el siguiente paso?

Código completo App.js para referencia

4. Crear componente para agregar tareas (`TodoForm`)

Código de `TodoForm.js`:

5. Crear componentes para mostrar tareas (`TodoList` y `TodoItem`)

`TodoItem.js`

`TodoList.js`

6. Conectar componentes y manejar funcionalidades en `App.js`

Código actualizado `App.js`:

Código completo `App.js` para referencia