Стрим с разбором состоялся 22 апреля. Текст задания ниже.
Итоги
Всего было прислано 14 решений. Были сильные решения.
- Самое сильное и красивое решение на мой взгляд прислал Артем.
- Мое решение
Так же на стриме были отмечены другие ребята. Всем респект!
Redirect после успешного логина
Всех больше трудностей возникло с редиректом четвертого реакт-роутера, который нужно было сделать после успешного входа с формы.
Код редиректа здесь + реализация защищенного роута (private route) у меня была выполнена так же, как у многих участников.
Тестовое задание #1
Проверяем начальные навыки: react, redux, react-router
Задача
Реализовать приложение, которое умеет показывать следующие страницы:
/— главная/login— страница ввода логина и пароля/news— страница с новостями (любая однотипная информация)/profile— страница с произвольным текстом, недоступная без авторизации
На сайте, в шапке или подвале реализовать ссылки:
- На главную (
/) - Новости (
/news) - Профиль (
/profile)
Если пользователь кликает на страницу “профиля” и он не “авторизован” — перекидывать на страницу /login
Форма входа (/login) принимает “фейковые” данные:
username: Admin
password: 12345
Если введены другие данные, то показывается сообщения:
Имя пользователя или пароль введены не верно
Если введены корректные данные, то перебрасывать на страницу /profile
Информацию об авторизации пользователя можно хранить в localStorage, простым параметром true/false. Базу данных реализовать не нужно.
Все необходимое на ваш взгляд, прокинуть через Redux.
Оформление (дизайн) — не важно. Сделайте, чтобы можно было комфортно смотреть пример в браузере.
Условия
Код оформить на GitHub с толковым Readme.md (описанием), ссылку прислать на почту maxpfrontend@gmail.com, в письме укажите ваш опыт работы с данными технологиями.
В дальнейшем задание будет усложнено, поэтому не удаляйте свой репозиторий.
P.S. задавайте вопросы в комментариях, либо отвечайте на вопросы коллег.
Если у вас не получается сделать часть задания, то присылайте решение все равно, указывая что именно не вышло и почему.
Расписания вебинаров и прочая полезная информация:
Решение Артема взято из https://github.com/neilff/react-redux-performance.
А так да, красиво
У меня почему-то с подходом Артёма (HOC для защищённого роута) была следующая проблема: при изменении URL компонент ререндерится, хотя по этому роуту распологается тот же компонент. Когда переделал под решение Макса (PrivateRoute вместо Route), всё стало работать как часы.