Создаём проект для работы с React
- Узнаем, что такое React и зачем он нужен
- Поговорим о том, что такое CRUD-операции
- Создадим первый проект на React со сборщиком Vite и пакетным менеджером pnpm
- Рассмотрим структуру проекта на React: модули, пакеты, JSX
- Разберёмся, зачем нужны компоненты
- Проведём декомпозицию кода, выделим свой первый компонент
- Объект props: знакомимся и используем
-TypeScript: первые шаги
- JS: Типы данных. Особенности объектов как ссылочного типа данных. Копирование объектов. Синтаксис деструктуризации
<Неделя 2>
Стэйт-менеджмент
- Создаем state-приложения: useState
- Изменения в state: коллбэки
- Знакомимся с понятием иммутабельности
- Обновление интерфейса и изменение state: установим связь
- Узнаем, как рендерить списки: атрибут key
- Учим JS: методы массивов map и filter
- ES6: деструктуризация на практике
- И типизируем, типизируем, типизируем…
- JS: Методы массивов map, filter, sort и др. “Полифилы” методов массивов. Array.prototype как “хранилище” методов. + практика
<Неделя 3>
Обрабатываем события
- Добавляем пакеты в проект
- Наращиваем функционал проекта
- Обрабатываем события: onClick, onChange
- Продолжаем обрабатывать события: onKeyDown
-Встречаемся с объектом Event
- Продолжаем работу с TypeScript
- Разбираем, как сделать код "human-readable"
- JS: Методы массивов slice, splice, toSpliced, reduce + практика
<Неделя 4>
Развитие интерфейса
- Продолжаем развивать функционал проекта
- Учимся валидировать пользовательский ввод
- Local state – углубляем понимание
- Осваиваем коцепцию контролируемого элемента ввода (input)
- User-friendly interface: условное присвоение классов
- User-friendly interface: условный рендеринг
- JS: Синтаксис вычисляемых свойств объекта (“ассоциативный массив“), map-set, object.keys, object.values, object.entries