Друзья, наконец-то я дописал свое последнее, перед началом поиска работы, демонстрационное одностраничное приложение для портфолио. Оно представляет собой социальную сеть с очень узким функционалом, что неудивительно, ведь для создания полноценной социальной сети, требуется целая команда IT — специалистов и несколько месяцев работы.
В конце этой статьи я расскажу про крутые курсы по React.js
Коротко про функционал:
— Можно войти на сайт, используя логин и пароль. Происходит валидация на всех уровнях, начиная с проверки, являются ли данные, введенные в поле «email» действительно электронным адресом, количества символов пароля, заканчивая проверкой на правильность введенных данных.
— Если один и тот же пользователь войдет и выйдет из аккаунта 10 раз подряд, то сервер запросит ввод капчи, которую я тоже обработал.
— После входа у пользователя появляется возможность открывать раздел сообщения.
— Есть возможность просмотреть список всех зарегистрированных пользователей.
— На каждого участника можно подписаться или отписаться от него, при условии, что выполнен вход в аккаунт.
— Можно перейти на страницу профиля каждого пользователя.
— Можно изменять статус на странице своего профиля. Для этого достаточно нажать один раз мышкой на статус, внести в него изменения, после чего нажать мышкой в любом месте, либо нажать «Enter» на клавиатуре.
— На странице своего профиля можно добавлять новые посты. Поле для ввода текста также содержит валидацию на минимальное и максимальное количество символов. (Работает только локально. После перезагрузки страницы данные будут потеряны).
— При попытке перехода на страницу профиля или сообщений, если пользователь не авторизован, то его перенаправит на страницу входа в аккаунт.
— Если у пользователя отсутсвует фотография профиля, то отображается картинка-«заглушка» с изображением человеческого силуэта.
— Дизайн адаптирован под устройства с любыми размерами экранов.
Какие инструменты я использовал:
— Для разметки приложения и его адаптивного поведения использовался модуль CSS Grid.
— В качестве state-менеджера я использовал Redux.
— Для отслеживания URL- строки и соответствующей отрисовки компонентов, использовался React Router DOM.
— Для создания форм использовался хук useFormik() от Formik.
— Для создания контейнерных компонентов, которые подключены к хранилищу Redux, использовалась функция connect из пакета React-Redux.
— Для валидации форм использовалась библиотека Yup.
— Для взаимодействия с сервером использовалась библиотека Axios.
— Также использовал хуки useState, useEffect, useNavigate.
Интересные факты:
— Для отображения списка пользователей используется пагинация (постраничное отображение данных с сервера), а также пагинация на самой странице с пользователями. Функционал, не отображает сразу список всех страниц, а только первые 10. Нажав кнопку «Next» отобразится список со следующими 10 страницами, и тд.
— Те, кто еще не сталкивался с React скорей всего не знают, но, не смотря на то, что меняется URL браузера, а в след за ним и отображаемая информация, все действия происходят на одной единственной странице, которая динамически обновляется. В этом как раз и есть вся прелесть React.js, за что его так любят разработчики.
Приложение состоит из:
— 1691 строк кода
— 64 файлов в общей сложности
— 13 файлов js
— 26 файлов jsx
— 17 файлов сss
— 1 файл html
— 23 компонентов, включая 20 функциональных, 3 классовых, 7 контейнерных
— 11 запросов к серверу
Данное приложение частично написано по туториалу в рамках бесплатных курсов по React.js на YouTube «ReactJS — Путь самурая» на канале ITKAMASUTRA
Курс сам по себе датируется 2019 годом и содержит в себе очень много устаревшей информации и уже неработающих в наше время технологий, именно поэтому и говорю, что эту инструкцию я использовал частично. Очень много времени было потрачено на то, чтобы написать работающий функционал при помощи современных инструментов, о существовании которых я вообще не знал. Информацию о них я находил в интернете, разбирался, и применял их в приложении.
Не смотря на это, я настоятельно рекомендую этот курс новичкам. Так, как «разжевывает» информацию автор курса, больше в постсоветском интернет-пространстве не «разжевывает» никто.
Человек записал бесплатно 100 видео-уроков, общим хронометражем 50 часов. Для сравнения в украинских IT-школах предлагают платные курсы по React c программой, в лучшем случае, на 30 часов. Я считаю, что эти видео-уроки + официальная документация = отличный способ достаточно хорошо выучить Реакт.
Безусловно, предыдущие два моих пет-проекта гораздо функциональней этого. Но преимущество этого в том, что количество ошибок в коде сведено к нулю, составлена правильная архитектура приложения, задействованы все необходимые инструменты, которыми должен владеть junior react developer.
Мой путь в IT 