Состояние компонента в React. useState на практике: добавляем и обновляем данные

Аватар автора
Александр Ламков — Friendly Frontend
✏️ Подключим хук useState и научим компонент хранить данные внутри себя. Объясню, как работает состояние в React и почему нельзя использовать обычные переменные. Перепишем переменную tasks на useState, чтобы To Do List стал «живым». Добавим возможность вводить текст новой задачи и сохранять его в отдельное состояние. Настроим форму добавления задачи: создадим новый объект, добавим его в список и очистим поле ввода. Покажу, как удалять все задачи разом и по одной — через setTasks и методы массивов. Перепишем логику переключения выполнения задачи по чекбоксу. Объясню, почему нельзя мутировать состояние напрямую и как работает иммутабельность в React. Всё покажем на примере To Do List — теперь он умеет сам себя обновлять при изменении данных. 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:41 | Что такое состояние в React? ▶ 04:00 | Практика: первый useState ▶ 05:29 | Добавление новой задачи ▶ 10:16 | Удаление всех задач ▶ 11:54 | Удаление конкретной задачи ▶ 13:03 | Переключение состояния выполнения задачи ▶ 14:37 | Заключение 📚 Ссылки из видео: 🧑💻 Основной телеграм-канал: 💬 Коммьюнити-чат в телеграме (помощь новичкам): 🗂️ Бесплатные курсы на канале: 📌 Автор: #reactjs

0/0


0/0

0/0

0/0