Данный проект представляет собой одностраничный сайт написанный с помощью JavaScript биботеки React с помощью Create React App.
- Страница сайта расположена по адресу: https://izhubrov.github.io/mesto-react/.
- Собранный проект расположен по адресу: https://github.com/izhubrov/mesto-react.
- Применяемое API, сервер: https://mesto.nomoreparties.co
Расположен в онлайн-сервисе для разработки интерфесов - графическом редакторе Figma по адресам:
- https://www.figma.com/file/2cn9N9jSkmxD84oJik7xL7/JavaScript.-Sprint-4?node-id=0%3A1
- https://www.figma.com/file/bjyvbKKJN2naO0ucURl2Z0/JavaScript.-Sprint-5?node-id=0%3A1
- https://www.figma.com/file/kRVLKwYG3d1HGLvh7JFWRT/JavaScript.-Sprint-6?node-id=0%3A1
- Установите Node.js
- Установите Git Bash для Windows OS
- Склонируйте проект https://github.com/izhubrov/mesto-react.git
- Установите необходимые зависимости из package.json
- Для локального запуска введите команду npm run start (Страница откроется по адресу http://localhost:3000 для просмотра в браузере).
- Для сборки проекта введите команду npm run build
- Для работы с gh-pages установите пакет gh-pages следующей командой npm install gh-pages --save-dev
- Для деплоя проекта введите команду npm run deploy
- Основным требованием при верстке сайта являлось его корректное отображение на различных разрешениях экрана с плавным появлением Popup форм редактирования профиля пользователя, добавления карточек через форму Popup и увеличением картинки.
- Должна быть реализована возможность удаления карточек, лайка и увеличения изображения через Popup.
- Должна быть реализована проверка на валидность полей ввода Popup с помощью встроенного API JavaScript.
- Должна быть реализована возможность закрытия Popup с помощью нажатия клавиши Escape и клика на фон.
- Должна быть реализована возможность создания новой карточки, редактирования профиля пользователя, проверка на валидность форм.
- Проект должен быть создан с помощью Create React App.
- Флекс-бокс верстка.
- Грид таблицы.
- Выразительные семантические теги (section, ul, footer).
- Позиционирование элементов (относительное, фиксированное, абсолютное, z-index).
- Относительные пути к файлам.
- Трансформация с плавностью перехода.
- Методология наименования классов CSS БЭМ Nested.
- Относительные размеры блоков.
- Вычисляемые значения (функция calc).
- Оптимизация шрифтов (сглаживание, подгонка размера текста, рендеринг).
- Метатег корректного масштабирования страницы (@media).
- Подключение локального шрифта Inter через директиву @font-face.
- Разметка страницы создается в JSX.
- Код разбит на функциональные компоненты.
- Используются хуки React.useState, React.useEffect, React.createRef, React.createContext.
C помощью метода fetch и промисов (Promise).
- Осуществляется загрузка карточек с сервера, добавление и удаление карточек.
- Загружается и изменяются профиль и аватар пользователя с сервера.
- Загружаются и изменяются лайки пользователе.
Сайт получился отзывчивым (резиновым и адаптивным), корректно отображается на устройствах с разрешением от 320px и есть возможность изменять данные сайта с проверкой на валидность. Проект реализован на React и создан с помощью create-react-app. Проект взаимодействует с сервером.