Construyendo una Aplicación de Tareas Simple con React 📝

En este tutorial, mostraremos cómo crear una aplicación de tareas simple, también conocida como To-Do List, usando React, una de las bibliotecas de JavaScript más populares para la construcción de interfaces de usuario.

Preparando el Ambiente

Antes de comenzar, asegúrate de que tienes Node.js y npm instalados en tu computadora. Si aún no los tienes, puedes descargarlos aquí. A continuación, necesitarás instalar Create React App, una herramienta que permite crear fácilmente nuevos proyectos React:

npx create-react-app todo-app

Construyendo la Aplicación

Vamos a comenzar la construcción de nuestra aplicación de tareas. Crea un nuevo componente llamado TodoItem en un archivo llamado TodoItem.js. Este componente representará una única tarea en nuestra lista:

import React from 'react';

function TodoItem(props) {
  return (
    <div>
      <input type="checkbox" />
      <p>{props.item.text}</p>
    </div>
  );
}

export default TodoItem;

Ahora, vamos a crear un componente TodoList que va a renderizar una lista de TodoItem. Para simplificar, vamos a comenzar con una lista estática de tareas:

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

class TodoList extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: [
        { text: 'Lavar los platos' },
        { text: 'Limpiar la casa' },
        { text: 'Hacer las compras' },
      ],
    };
  }

  render() {
    const todoItems = this.state.todos.map(item => (
      <TodoItem key={item.text} item={item} />
    ));

    return <div>{todoItems}</div>;
  }
}

export default TodoList;

Ejecutando la Aplicación

Para iniciar la aplicación, ejecuta el siguiente comando en el directorio raíz del proyecto:

npm start

Esto iniciará el servidor de desarrollo y abrirá la aplicación en el navegador.

Conclusión

¡Felicidades! Has creado una aplicación de tareas básica con React. Obviamente, este es solo un comienzo. ¡Puedes expandir esta aplicación para permitir la adición de nuevas tareas, marcar tareas como completadas, y mucho más!

Para continuar aprendiendo y mejorando tus habilidades en React, consulta el artículo sobre JavaScript y React: Creando Tu Primer Componente.

¡Vamos a por ello! 🦅