# Неделя #2 Продолжаем изучать React

# Подготовка к выполнению задания

  1. Изучить все материалы второй недели курса в Личном кабинете.

# Что нужно сделать?

# Выполнить домашнее задание #3 (Валидация формы)

  1. Переключитесь в ветку homework-3-form-validation
  2. Обратите внимание на работу валидаций, они выводят разные сообщения, когда нет данных, и когда данные введены не верно.
  3. Также следует учесть дополнительные классы у инпутов и полей ошибок — .t-input-firstname и .t-error-firstname для имени. Эти классы обязательны, с помощью них cypress находит поля, которые нужно проверять. Посмотрите финальную верстку, и повторите расположение данных классов у всех элементов(инпуты, поля ошибок, кнопка сабмита и картинка выводящаяся после успешной валидации).

# НЕ ОБЯЗАТЕЛЬНО Выполнить домашние задания #3*TV-Maze

Я предлагаю 3 задания со звёздочкой. Это одно и то же приложение но решить задачу нужно разными методами.

Эти упражнения не обязательны к выполнению.

Homework tv maze-1

  1. Переключитесь в ветку homework-3-tv-maze-show-cdu
  2. В данном домашнем задании уже есть компонент App, но нужно написать компонент Show, который при получении id конкретного шоу должен выполнить сетевой запрос, получить данные из сети и отразить их в своей верстке.
  3. Данный компонент нужно реализовать используя только 2 поля в state — showId и data, а также используя только 1 метод из жизненного цикла — componentDidUpdate. Успехов!

Homework tv maze-2

  1. Переключитесь в ветку homework-3-tv-maze-show-gDSFP
  2. В данном домашнем задании уже есть компонент App, но нужно написать компонент Show, который при получении id конкретного шоу должен выполнить сетевой запрос, получить данные из сети и отразить их в своей верстке.
  3. Данный компонент нужно реализовать используя только 2 поля в state — showId и data, а также используя только 2 метода из жизненного цикла — componentDidUpdate и getDerivedStateFromProps. Успехов!

Homework tv maze-3

  1. Переключитесь в ветку homework-3-tv-maze-show-key
  2. В данном домашнем задании уже есть компонент App, но нужно написать компонент Show, который при получении id конкретного шоу должен выполнить сетевой запрос, получить данные из сети и отразить их в своей верстке.
  3. Данный компонент нужно реализовать используя только 2 поля в state — showId и data, а также используя только 1 метода из жизненного цикла — componentDidMount. Обратите внимание, в компоненте App теперь кроме showId компоненту Show также передаётся props key. Это важно.

# Выполнить домашнее задание #4 (Авторизация через контекст)

  1. Переключитесь в ветку homework-4-context-auth
  2. В данном задании вам предстоит написать сразу несколько компонент, и связать их всех при помощи контекста. Контекст создается с помощью компонента AuthProvider, в нем должна быть определена логика авторизации пользователя, а также функции авторизации, логаута и передача ошибки авторизации.
  3. Функцию авторизации должна использовать форма, в которой пользователь вводит свой логин и пароль. Форма подписана на контекст, и выводит ошибку авторизации прямо у себя.
  4. Флаг, авторизован ли пользователь получают хэдер и футер. В случае если пользователь авторизован, футер выводит приветствие, а хэдер email и кнопку выхода из сессии. Кнопка выхода из сессии вывызвает функцию logout, которую предоставляет контекст.
  5. Основной лэйаут рисуется компонентой Layout, он должен понимать как рендерить main когда есть футер, когда есть хэдер, и когда есть и футер и хэдер.

# Как всё успеть?

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

# 🗓 Понедельник

Изучаем материалы модуля "React 3".

Изучаем домашнее задание 3 и выполняем его.

Подготовьте вопросы к модулю 3.

# 🗓 Вторник

Изучаем материалы модуля "React 3".

Возможно выполняем домашнее задание 3 со звёздочкой.

# 🗓 Среда

Сдаём домашнее задание 3 на проверку.

Изучаем материалы модуля "React 4".

Работаем над домашним заданием 4, осваиваемся с исходниками.

Подготовьте вопросы к модулю 4.

# 🗓 Четверг

Работа над дз4.

Возможно работа над домашним заданием 3 со звёздочкой.

# 🗓 Пятница

Работа над дз4.

Сдаём домашнее задание 3 на проверку.

Сдаём домашнее задание 4 на проверку.

Участвовать в практическом вебинаре.

← Неделя #3 Погружаемся в Redux →