Skip to content

Latest commit

 

History

History
71 lines (40 loc) · 3.68 KB

README_ru.md

File metadata and controls

71 lines (40 loc) · 3.68 KB

React-SPA-IP-check


https://al3xsus.github.io/React-SPA-IP-checker/


Простое SPA для получения информации по IP адресу. Использован стек технологий React (create-react-app), Semantic UI React, SPA, localStorage. Для получения информации об IP было использовано API https://2ip.ua/ru/api/our-api. Внимание, количество ежедневных запросов ограниченно.

Как это работает

SPA состоит из трёх секций - формы ввода IP адреса, секции текущего результата запроса и секции истории запросов.

В форме пользователь вводит IP адрес в строку ввода и нажимает кнопку Get Info. Если строка ввода пуста или адрес не соответствует IP адресу (т.е. будет чем-то иным, нежели запись в виде четырёх десятичных чисел значением от 0 до 255, разделённых точками) то строка ввода будет подсвечена красным цветом, а кнопка Get Info будет неактивна. В случае успеха результат запроса будет добавлен в историю и показан на секциях текущего результата и истории соответственно. В случае ввода нового адреса текущий результат будет обнулён.

Секция текущего результата представляет собой информационную панель разделенную на три поля - IP адрес, его географическая информация и информация о провайдере.

Секция истории запросов представляет собой множество информационных панелей по каждому предыдущему запросу.

При старте приложения, если существует не пустое localStorage хранилище, данные будут получены из него. При закрытии приложения (перезагрузка страницы или перезаход на неё) данные будут записаны в localStorage.

Передвигаться по SPA можно с помощью небольшой навигационной панели слева.

Скрипты

Запускать из папки с проектом:

yarn add

Для установки модулей

yarn start

Запускает приложение в режиме разработки по адресу http://localhost:3000.

yarn build

Для сборки в папку build.

yarn global add serve

Для установки локального сервера.

serve -s build

Для запуска собранного на локальном сервере.

Скриншоты

Форма ввода IP

Форма ввода IP

Текущий результат

Текущий результат

История запросов

История запросов