Стрим с разбором состоялся 22 апреля. Текст задания ниже.
Всего было прислано 14 решений. Были сильные решения.
Так же на стриме были отмечены другие ребята. Всем респект!
Всех больше трудностей возникло с редиректом четвертого реакт-роутера, который нужно было сделать после успешного входа с формы.
Код редиректа здесь + реализация защищенного роута (private route) у меня была выполнена так же, как у многих участников.
Проверяем начальные навыки: 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. задавайте вопросы в комментариях, либо отвечайте на вопросы коллег.
Если у вас не получается сделать часть задания, то присылайте решение все равно, указывая что именно не вышло и почему.
Расписания вебинаров и прочая полезная информация:
Сегодня будем использовать parcel и IntelliJ IDEA Community Edition. Все инструменты бесплатные. Инициализация elm проекта…
На данном вебинаре мы знакомились с языком Elm проводя параллели между Elm и Redux, поэтому…
Richard Feldman рассказывает как масштабировать Elm приложение без боли. Показаны техники: extended records, подход narrow…
В данной заметке вы найдете конспект видео по Elm, которые я посмотрел в ноябре 2019.…
Итоги года 2019 // Max Frontend Покажи мне свой гитхаб, и я скажу работал ли…
Почему стоит изучать Elm? Потому что это интересный вызов, редкие (но вкусные) вакансии и хороший…
View Comments
Решение Артема взято из https://github.com/neilff/react-redux-performance.
А так да, красиво
У меня почему-то с подходом Артёма (HOC для защищённого роута) была следующая проблема: при изменении URL компонент ререндерится, хотя по этому роуту распологается тот же компонент. Когда переделал под решение Макса (PrivateRoute вместо Route), всё стало работать как часы.