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

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

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

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

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

Получите домашнее задание №4 (react-course -h homework-4-context-auth)

Данные для авторизации:

email: stu@dent.com
password: 123

Общая информация

В этой работе вам нужно написать несколько компонентов, и связать их при помощи контекста.

Контекст создается с помощью компонента AuthProvider. Он находится в файле ./src/contexts/Auth/Auth.js.` В нем должна быть определена логика авторизации пользователя, а также функции авторизации, логаута и передача ошибки авторизации.

Функцию авторизации использует форма, в которой пользователь вводит свой логин и пароль. Она находится в файле ./src/components/LoginForm/LoginForm.js. Форма подписана на контекст, и выводит ошибку авторизации прямо у себя.

Флаг, авторизован ли пользователь получают хэдер и футер. В случае если пользователь авторизован, футер выводит приветствие, а хэдер - email и кнопку выхода из сессии. Кнопка выхода из сессии вывызвает функцию logout, которую предоставляет контекст.

Основной лэйаут рисуется компонентом Layout (./src/components/Layout/Layout.js). В него можно передать Header и Footer через props. Он должен корректно рендериться с этими компонентами и без них.

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

Привести приложение в рабочее состояние.
Перед началом работы не забудьте установить пакеты. Выполните команду yarn или npm install.
Дописать функционал контекста авторизации. Файл ./src/contexts/Auth/Auth.js.
Хранит статус авторизации. Предоставляет методы authorize и logout.
Подробнее разобраться как он должен работать можно прочитав тесты Auth.test.js.
Написать компонент Header. Файл ./src/components/Header/Header.js.
Если пользователь авторизован - показывает email и кнопку logout.
Подробности в тестах: ./src/components/Header/Header.js.
Написать компонент Footer. Файл ./src/components/Footer/Footer.js.
Показывает статус авторизации пользователя.
Подробности в тестах: ./src/components/Footer/Footer.js
Написать компонент Layout. Файл ./src/components/Layout/Layout.js.
Он содержит логику отображения лейаута включая компоненты Header и Footer, которые получает через props.
Запустить тесты и убедиться, что они прошли
Сделайте коммит и пуш изменений
Создайте пулл реквест и отправьте его на проверку наставнику

# Выполнить домашнее задание #5 (HOC)

В этой домашней работе мы закрепим знания о паттерне HOC.

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

Получите домашнее задание №5 (react-course -h homework-5-hoc)

Задача

В папке /src находятся файлы с заданиями, тесты для каждого из них должны проходить.

Запустите тесты при помощи команды yarn test
Допишите код так, чтобы все тесты проходили

Display Name

Когда вы оборачиваете компонент в HOC - его displayName теряется. Подробнее об этом в документации.

Укажите displayName для вашего HOC.

Задание находится в папке DisplayName.

Манипуляция пропами

В этом задании вам нужно написать три хока.

Один будет показывать лоадер, а второй должен передавать в обёрнутый компонент данные пользователя, а третий будет тренсвормировать полученный проп.

Задание находится в папке ManipulatingProps.

Обёртка лейаута

Иногда хоки используются для того, чтобы обернуть компонент в какой-то лейаут.

Внимание! это проще сделать при помощи паттерна RenderProps

Задание находится в папке Wrapping.

Параметры для HOC

Часто в HOC нужно передать параметры.

Давайте потренируемся это делать.

Задание находится в папке HOCParams.

⭐ Перехват рендеринга

Это задание со звёздочкой, его можно не выполнять.

Это необычный вид хока, который называется inheritance inversion HOC.

В отличие от обычного, в нём мы используем не композицию, анаследование от обёрнутого компонента.

Задание находится в файле RenderHighjacking.js.

Внимание! inheritance inversion HOC даётся только в ознакомительных целях. Избегайте использовать его в реальных проектах! Более подробное объяснение читайте в методичке

Памятка

Зарегистрируйтесь на Гитхабе

Если у вас ещё нет аккаунта на github.com, скорее зарегистрируйтесь.

Установите loftschool-react-cli

Установите утилиту для получения домашних работ:

npm i -g loftschool-react-cli

Это позволит вам выполнять команду react-course

Получите домашнюю работу

Убедитесь что вы находитесь в пустой папке. Выполните команду react-course, чтобы получить домашнюю работу:

react-course -h homework-5-hoc

!!!Домашнее задание имеет несколько репозиториев!!!

Получите домашнее задание №5.1 (react-course -h homework-5-hooks)

Получите домашнее задание №5.2 (react-course -h homework-5-localstorage-hoc)

Получите домашнее задание №5.3 (react-course -h homework-5-rp)

Выполните ДЗ. Запустить тесты и убедиться, что они прошли
Сделайте коммит и пуш изменений
Создайте пулл реквест и отправьте его на проверку наставнику

# Выполнить домашнее задание #6 (Mail client)

Получите домашнее задание №6 (react-course -h homework-6-mail-client)

Пример работы

Данные авторизации:

Почта: test@test.ru
Пароль: 321

Общая информация.

В данной работе 2 контекста: один для данных, а второй для работы с авторизацией.

Работа со стилями

Кроме того, для работы со стилями в данной работе используется новый подход — css-modules. Теперь он встроен в create-react-app.

Как происходит работа? Обратите внимание на названия css файлов. Если в названии присутствует слово .module, это значит webpack будет обрабатывать такие файлы по особенному.

При импорте css-modules модулей в js, файл становится объектом, ключами которого являются названия классов из css файла, а значениями автоматически сгенерированные с помощью webpack имена.

Webpack следит за коллизиями имен.

Теперь в каждом модуле можно определить класс container или button, а webpack проследит за тем, чтобы эти имена в реальном дом дереве не пересекались.

Для работы с несколькими классами используется библиотека classnames. В самом простом исполнении она объеденяет все строки-классы, переданные аргументами и возвращает конкатенированную строку классов для тегов.

Более подробно мы ее изучим на соответствующем занятии про стили в react.

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

Задача — написать почтвый клиент используя react-router-dom. Все данные находятся в контексте.

Внимание! Тесты для этого задания написаны на cypress и запускаются командой yarn cypress:run. Для их работы необходимо чтобы приложение было запущено (команда yarn start).

Перед началом работы не забудьте установить пакеты. Выполните команду yarn или npm install

Посмотрите пример работы, чтобы понять, как будет выглядеть финальное приложение.
Изучите cypress/integration/homework.spec.js чтобы понять какой функционал должен быть реализован.
Начните работу с RootRouter.js. В нем необходимо определить базовые роуты.
Реализуйте приватный роут. Он должен находиться в файле PrivateRoute.js.
Реализуйте лейаут и навигацию в приложении в файле AppRouter.js.
Реализуйте компоненты:

Home - в нём должно показываться приветствие
InboxList - показывает список входящих писем
InboxMail - показываетвыбранное входящее письмо
OutboxList - показывает список исходящих
OutboxMail - показывает выбранное исходящее письмо

Запустить тесты и убедиться, что они прошли
Сделайте коммит и пуш изменений
Создайте пулл реквест и отправьте его на проверку наставнику

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

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

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

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

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

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

# 🗓 Вторник

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

Возможно все еще выполняем домашнее задание 4.

# 🗓 Среда

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

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

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

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

# 🗓 Четверг

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

# 🗓 Пятница

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

Приступаем к домашнему заданию 6.

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

# 🗓 Суббота

Работа над ДЗ6

Изучаем материалы модуля "Роутинг в браузере".

# 🗓 Воскресенье

Работа над ДЗ6

Созваниваемся с наставником

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