# Неделя #2 Продолжаем изучать React. Работаем с библиотекой компонентов
# Подготовка к выполнению задания
- Изучить все материалы второй недели курса в Личном кабинете.
# Что нужно сделать?
На этой неделе мы начнём приводить приложение в соответствие с дизайном.
Установите material-ui. Для облегчения работы можете использовать тему оформления.
В этом пакете также содержатся ассеты логотипа и иконки master card.
# Внимание!
Если вы не хотите использовать material-ui - можете использовать другую библиотеку компонентов на своё усмотрение. Можно также не использовать библиотеку компонентов вовсе и создать стилизованные компоненты самостоятельно.
Приведите внешний вид страниц, созданных на предыдущем этапе в соответствие с макетом.
# Работа с ref - добавляем карту
Добавьте карту mapbox на страницу с картой. Используйте знания о работе с ref.
Также вам возможно пригодится этот гайд: перейти
И документация mapbox: перейти
# Типизация PropTypes
На этой неделе мы познакомились с PropTypes. Укажите типы пропсов для своих компонентов.
# Контекст авторизации
Используя context-api создайте контекст авторизации.
Через контекст передайте следующие поля:
- login(email, password) - выполняет авторизацию
- logout() - меняет статус на “не авторизованный”
- isLoggedIn - содержит статус авторизации
В соответствующих компонентах получите доступ к этим методам. Используйте хук useContext.
Например метод авторизации login() из контекста вызывайте в форме логина. Метод logout() при клике на кнопке “Выйти” в хедере. Статуc isLoggedIn используйте для запрета доступа на страницы карты и профиля для не авторизованных пользователей.
# Пишем тесты
Напишите тесты для своих компонентов. Используйте react-testing-library.
Не тестируйте функциональность сторонних библиотек. Тестируйте только свой код.
Не мокайте компонент или функцию, которые вы сейчас тестируете. Возможно это очевидный совет, но на практике так иногда делают.
Если в компоненте содержится логика - тесты должны покрывать все ветки.
# Как всё успеть?
Данный план является примерным ориентиром. Вы всегда можете работать в удобном для себя темпе.
# 🗓 Понедельник
Изучаем материалы модуля "III React"
Изучаем ТЗ для второй недели
Задаем появившиеся вопросы
# 🗓 Вторник
Читаем методичку "Продвинутый React + паттерны"
Приступаем к выполнению ТЗ
# 🗓 Среда
Изучаем материалы модуля "IV React"
Работаем над ТЗ.
Задаем появившиеся вопросы
# 🗓 Четверг
Читаем методичку "Продвинутый React. Библиотечное API и паттерны"
Подготовить вопросы и оставить их на канале своего потока
Записаться к наставнику на личный созвон (тариф "Уютный")
# 🗓 Пятница
Изучаем материалы модуля "Тестирование"
Пишем тесты для компонентов
Изучаем материалы Workshop
# 🗓 Суббота
Работа над ТЗ
Читаем методичку "Тестирование"
Работаем с исходниками по модулю "Тестирование"
# 🗓 Воскресенье
Работа над ТЗ
Сдаём ТЗ второй недели на проверку