Разработка простого приложения To-Do в React

Для создания простого приложения To-Do в React мы можем использовать компоненты для отображения списка задач, их добавления, удаления и обновления. Давайте начнем с создания основного компонента To-Do и его дочерних компонентов для отображения задач, добавления новой задачи и удаления задачи.

Основной компонент To-Do:

import React, { useState } from 'react';
import TaskList from './TaskList';
import AddTaskForm from './AddTaskForm';

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

  const addTask = (taskText) => {
    setTasks([...tasks, { id: tasks.length + 1, text: taskText }]);
  };

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

  return (
    <div>
      <h1>To-Do List</h1>
      <AddTaskForm addTask={addTask} />
      <TaskList tasks={tasks} deleteTask={deleteTask} />
    </div>
  );
};

export default TodoApp;

Компонент для отображения списка задач (TaskList):

import React from 'react';

const TaskList = ({ tasks, deleteTask }) => {
  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>
          {task.text}
          <button onClick={() => deleteTask(task.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
};

export default TaskList;

Компонент для добавления новой задачи (AddTaskForm):

import React, { useState } from 'react';

const AddTaskForm = ({ addTask }) => {
  const [taskText, setTaskText] = useState('');

  const handleChange = (event) => {
    setTaskText(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!taskText.trim()) return;
    addTask(taskText);
    setTaskText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={taskText} onChange={handleChange} />
      <button type="submit">Add Task</button>
    </form>
  );
};

export default AddTaskForm;

Теперь у нас есть основной компонент TodoApp, который содержит компоненты для отображения списка задач (TaskList) и добавления новой задачи (AddTaskForm). Мы также использовали хуки useState для управления состоянием и обработчики событий для добавления и удаления задач.

Это простое приложение To-Do позволяет добавлять новые задачи, удалять их и отображать список текущих задач. Вы можете дополнить его дополнительными функциями, такими как обновление задач, фильтрация по статусу и т. д., в зависимости от ваших потребностей.