Frontend-проект: "Место на React"
Описание проекта
Интерактивная страница, куда можно добавлять фотографии, удалять их и ставить лайки. В сравнении с предыдущей работой это приложение создавалось на основе CRA (Create React APP).
Ссылка на макет
https://www.figma.com/file/2cn9N9jSkmxD84oJik7xL7/JavaScript.-Sprint-4?node-id=0%3A1
Ссылка на проект
https://dayenscode.github.io/mesto-react/
Используемые языки
Установка и запуск приложения в локальном репозитории
- git clone https://github.com/DayensCode/mesto-react.git - клонировать репозиторий (с использованием HTTPS) на свое устройство
- npm install --save react-router-dom - установить зависимости
- npm start - запустить приложение в режиме разработчика
Процесс создания
Было осуществлено портирование проекта в react app, написан соответсвующий функционал. Использовались функциональные компоненты с хуками состояния и эффектов. HTML разметка описывалась посредством JSX (расширение javascript). При создании компонентов применялся метод поднятия стейта. Стейт-переменные были вынесены в родительский компонент App. Значения и обработчики пробрасывались в компоненты через "пропсы". В формах использовались упраляемые компоненты (инпуты форм), в одной из форм был использован неуправляемый компонент (элемент инпута был получен через useRef). Данные пользователя, полученные с сервера, хранятся в глобальном стейте и передаются компонентам через контекст.
Функционал
- Загрузка списка постов с сервера
- Редактирование профиля пользователя
- Добавление/удаление нового поста с фотографией места (пользователь может удалять только свои посты)
- Просмотр изображения в оригинальном размере
- Добавление и снятие лайка (есть счетчик лайков)
Планы по улучшению
- Добавление регистрации и авторизации пользователя
- Модальное окно успешной/неудачной регистрации на сайте
- Открытие и закрытие модальных окон по оверлэю и клавише "Escape"
- Добавление спиннеров загрузки
- Валидация форм
- Оптимизация приложения для людей с ограниченными возможностями (label для инпутов форм)
- Добавление функции сабмита форм нажатием на клавишу "Enter"