В этом задании мы разобьём монолитное TODO приложение на логические компоненты.
Декомпозиция большого приложения - это важный навык в React. Когда весь код находится в одном компоненте, становится сложно понять, что где происходит, и трудно найти нужное место для изменений.
В нашем TODO приложении можно выделить несколько логических частей:
Элемент списка - одна задача с чекбоксом и кнопкой удаления
Список задач - список всех элементов или сообщение "Нет задач"
Форма ввода - поле и кнопка для добавления новой задачи
Статистика - счётчик выполненных задач
Каждая часть отвечает за свою область и может быть изменена независимо от других.
Передача функций через props - важная концепция. Дочерние компоненты не имеют доступа к состоянию родителя, но могут вызывать функции, которые это состояние изменяют. Состояние остаётся в родительском компоненте, а дочерние только отображают данные и вызывают callback-функции.
Именование props для функций - принято использовать префикс on:
onClick, onChange, onSubmit - для HTML событий
onToggle, onDelete, onAdd - для кастомных действий
Это помогает сразу понять, что prop - это функция-обработчик.
Задание
Необходимо разбить монолитный TODO компонент на маленькие переиспользуемые части. Создайте компонент TodoItem, который принимает props: todo (объект задачи), onToggle (функция переключения статуса) и onDelete (функция удаления). Он должен отображать чекбокс, текст задачи и кнопку удаления. Создайте компонент TodoList, который принимает todos (массив задач), onToggle и onDelete. Он отображает список задач с помощью TodoItem или сообщение "Нет задач", если массив пустой. Создайте компонент TodoInput, который принимает value (текущее значение поля), onChange (обработчик изменения), onAdd (функция добавления задачи). Он содержит поле ввода и кнопку "Добавить". В компоненте App оставьте только управление состоянием и композицию компонентов. Передайте все необходимые данные и функции через props.
