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

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

• Канал "Эти Камасутра" стремится сделать мир добрее и цивилизованнее.  

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

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

• Видеоконтент будет выкладываться на двух каналах: "Эти Камасутра" и "Инкубатор".  

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

• Проект "Туду-лист" будет доработан для соответствия рыночным требованиям.  

• В курсе будут изучаться React, Redux, Svelte и другие технологии.  

• Студенты будут работать с OOP и тестировать свои навыки.  

• Версии библиотек и технологий изменились, что может вызвать проблемы.  

• Студенты должны будут доучиваться и дорабатывать самостоятельно.  

• Социальная сеть и OOP будут бесплатными, но возможны ограничения.  

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

• Обещание бесплатного контента при поддержке зрителей.  

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

• Основной акцент на React и социальную сеть.  

• Ежедневное менторство и поддержка помогут студентам.  

• Toodulist будет похож на Trello, с возможностью перетаскивания задач.  

• Изучение TypeScript и создание приложения на React.  

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

• Пошаговая инструкция по созданию проекта на TypeScript.  

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

• Начало работы с проектом в WebStorm.  

• Открыть папку как проект WebStorm.  

• Важно открыть папку с файлом package.json.  

• Проект запускается через терминал или панель NPM.  

• Запуск проекта через терминал или панель NPM.  

• Убить процесс приложения через терминал.  

• Запуск нового терминала для управления процессами.  

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

• Точка входа в приложение - index.tsx.  

• Импорт библиотеки React и использование ReactDOM.  

• Рендеринг элементов с помощью ReactDOM.  

• Использование тегов HTML для создания элементов.  

• Создание и использование компонентов в React.  

• Создание и использование выдуманных тегов в React.  

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

• Пример использования компонента App.  

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

• Создание функции для определения нового тега.  

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

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

• Важно выравнивать код для аккуратного вида.  

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

• Приложение загружается, скрипты запускаются.  

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

• Разметка включает компоненты, такие как тудулист.  

• Дебагеры помогают пошагово выполнять код.  

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

• Дебагеры могут зависать при обновлении страницы.  

• Программа выполняется по шагам с помощью F10.  

• Дебагеры позволяют шаг за шагом анализировать код.  

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

• Точки останова помогают найти нужный файл.  

• Дебагеры могут мешать выполнению программы.  

• Точки останова можно временно деактивировать.  

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

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

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

• Компоненты позволяют создавать однотипные элементы.  

• Пример добавления кнопки и чекбокса.  

• Использование горячих клавиш для удобства работы.  

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

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

• Завершение работы с разметкой и переход к следующему этапу.  

• Описание работы с тегами и компонентами.  

• Создание и использование тегов для отображения элементов.  

• Важность правильного использования закрывающих тегов.  

• Организация кода в отдельные файлы для компонентов.  

• Использование фигурных скобок для передачи атрибутов.  

• Рефакторинг кода для улучшения читаемости и структуры.  

• Экспорт и импорт функций для использования в других файлах.  

• Важность точного именования при экспорте и импорте.  

• Использование экспорта без дефолта для предотвращения ошибок.  

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

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

• Важность соблюдения интерфейсов и контрактов при взаимодействии с элементами.  

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

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

• Создание компонентов, которые ожидают данные на входе.  

• Компоненты в React работают как функции.  

• Данные передаются в компоненты в виде объектов.  

• Пример: объект с полем "title" для отображения заголовка.  

• Использование TypeScript для типизации объектов.  

• Создание типа для описания структуры объекта.  

• Пример: объект должен содержать поле "title" типа string.  

• TypeScript может вызывать ошибки при компиляции.  

• Решение: перезапуск сборки или использование подсказок.  

• Важно внимательно читать ошибки и исправлять их.  

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

• Пример: список задач с разными статусами.  

• Использование объектов для описания задач с уникальными идентификаторами.  

• Переход от жесткой верстки к динамическим данным.  

• Данные должны быть первичными, верстка вторична.  

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

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

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

• Важно упаковывать все изменяемые элементы в данные.  

• Создаем два массива задач с уникальными идентификаторами.  

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

• Компоненты возвращают актуальную разметку на основе данных.  

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

• Компоненты должны быть описаны в props.  

• Ошибки при передаче данных решаются с помощью типизации.  

• Описываем тип данных для массива задач.  

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

• Типизация помогает избежать ошибок при передаче данных.  

• Создаем переменную TaskTwo и указываем ее тип.  

• Типизация помогает избежать ошибок при передаче данных.  

• Компоненты работают с данными, переданными в props.  

• Компоненты возвращают разную разметку в зависимости от данных.  

• Используем props для доступа к данным задач.  

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

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

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

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

• Программисты работают с данными, не заботясь о визуализации.  

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

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

• На занятиях нужно выполнять задания и задавать вопросы.  

• Ментор будет давать информацию дозированно, чтобы не перегружать.  

• Важно смотреть дополнительные видео и выполнять домашние задания.  

• Информация усваивается постепенно, важно не останавливаться на достигнутом.  

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

• Не бойтесь задавать вопросы и обращаться за помощью.  

• Учитесь задавать правильные вопросы, это важный софт-скил.  

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

• Задавайте вопросы, чтобы понимать, что происходит на занятиях.  

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

• Важно понимать, что будет на следующем занятии.  

• Смотрите дополнительные видео и выполняйте домашние задания.  

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

• Остальные материалы, такие как верстка и код, вторичны.  

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

• Мы вас не оставим, важно идти до конца.  

• Цель – дойти до победы и начать получать доход за написание кода.  

• Вы – девелоперы, и ваша жизнь будет счастливой.