06 - Todolist на React TypeScript | Практика JS планировщик Todolist | Слив курса из IT-INCUBATOR.IO

• Дмитрий представляет курс по созданию тудулиста.  

• Проект будет развиваться в более сложный тудулист с функционалом Dragon Drop и авторизацией.  

• Видео доступно бесплатно, но для большего охвата нужно поставить лайк и оставить комментарий.  

• Дмитрий обсуждает необходимость переиспользования кода.  

• В проекте используется React для добавления новых значений в тудулист.  

• Планируется создание отдельной компоненты для добавления новых значений.  

• Дмитрий создает компонент для добавления значений в тудулист.  

• Компонент будет принимать ID тудулиста и функцию для добавления нового значения.  

• Перенос логики добавления значений в отдельную компоненту.  

• Перенос логики добавления значений в новую компоненту.  

• Удаление ненужных элементов из старой компоненты.  

• Компонента становится более компактной и функциональной.  

• Дмитрий приглашает в IT-инкубатор для обучения и стажировки.  

• Инкубатор предлагает помощь в решении проблем и поддержку профессионалов.  

• Возможность самостоятельного обучения и помощи от менторов.  

• Обсуждение передачи данных между компонентами.  

• Необходимость создания функции-обертки для передачи только тайтла.  

• Создание функции, которая принимает тайтл и вызывает исходную функцию.  

• Создание функции-обертки для передачи данных.  

• Передача тайтла и ID в исходную функцию.  

• Проверка работы функции-обертки.  

• Проверка работы формы и добавление данных.  

• Отправка данных родителю через компонент.  

• Добавление данных в todo-лист.  

• Передача функции, принимающей тайтл.  

• Создание нового todo-листа и добавление его в массив.  

• Добавление нового todo-листа в объект.  

• Добавление строгой типизации для объекта.  

• Создание типа для объекта с задачами.  

• Импорт и использование типа для проверки данных.  

• Изменение структуры хранения задач.  

• Переделка функций для работы с todo-листами.  

• Добавление фильтра и использование мапа для отрисовки.  

• Планы на следующее занятие: создание компонента для редактирования текста.  

• Занятия разделены на мелкие куски для удобства студентов.  

• Цель - закрепить знания на примерах, а не изучать новое.  

• Важно не перегружать студентов, чтобы они не потеряли интерес.  

• Задача - сделать спам кликабельным и изменяемым.  

• Создание компонента для управления состоянием спама.  

• Компонент принимает заголовок и преобразует его в редактируемый элемент.  

• Компонент должен уметь превращаться из спама в редактируемый элемент и обратно.  

• Компонент управляет своим состоянием самостоятельно, без вмешательства извне.  

• Внешний мир не должен знать о внутренних изменениях компонента.  

• Компонент активирует режим редактирования при двойном клике.  

• Внешний мир не знает о внутренних изменениях компонента.  

• Компонент самостоятельно управляет своим состоянием.  

• Компонент деактивирует режим редактирования при клике мимо.  

• Внешний мир не должен знать о внутренних изменениях компонента.  

• Компонент самостоятельно управляет своим состоянием.  

• Компонент активирует автофокус при клике.  

• Внешний мир не должен знать о внутренних изменениях компонента.  

• Компонент самостоятельно управляет своим состоянием.  

• Компонент отображает заголовок, а не вводимый текст.  

• Для ввода текста нужно изменить значение заголовка.  

• Компонент должен реагировать на изменения заголовка и отображать вводимый текст.  

• Создаем функцию для обработки изменений в локальном состоянии.  

• Устанавливаем стартовое значение как пустую строку.  

• При попытке ввода нового значения вызываем обработчик события change.  

• Импортируем обработчик события change для HTML Input элемента.  

• Устанавливаем значение локального состояния на новое значение из события.  

• Перерисовываем компонент для отображения нового значения.  

• При двойном клике активируется режим редактирования.  

• Локальное состояние обновляется с актуальным значением из props.  

• При выходе из режима редактирования локальное состояние сбрасывается.  

• При изменении значения в режиме редактирования уведомляем родителя.  

• Используем callback для передачи нового значения родителю.  

• Родитель реагирует на изменения и обновляет данные.  

• Создаем обработчик события change для task.  

• Обновляем значение title в task и уведомляем родителя.  

• Родитель обновляет данные в task list.  

• Используем многоуровневую структуру callback для передачи изменений.  

• Родитель уведомляет дочерний компонент о изменениях.  

• Дочерний компонент обновляет данные в task list.  

• Родитель получает callback для уведомления о изменениях в task list.  

• Дочерний компонент обновляет данные в task list.  

• Родитель обновляет данные в task list, используя ID task.  

• Создаем копию объекта для реакции на изменения.  

• Проверяем, что изменения происходят быстро, микросекунды.  

• Применяем это для редактирования заголовка списка.  

• Используем компонент для редактирования заголовка.  

• Создаем функцию для обработки изменений.  

• Передаем новое значение в функцию для перерисовки.  

• Находим нужный элемент в массиве.  

• Изменяем значение заголовка и перерисовываем компонент.  

• Обновляем массив для сохранения изменений.  

• Проверяем работу функции в браузере.  

• Деактивируем режим редактирования перед перерисовкой.  

• Обновляем данные в компоненте для корректной работы.  

• Компоненты должны получать данные извне.  

• Данные хранятся в стейке или локальном стейке.  

• Компоненты накапливают данные и вызывают функции для изменения.  

• Компоненты не могут изменять данные напрямую.  

• Необходим внешний управляющий механизм для управления состоянием.  

• На следующих занятиях будет использоваться библиотека Redux для управления состоянием.