如何在 ReactJS 中构建 IP 地址查找器应用程序？

在本文中，我们将构建一个 IP 地址查找器应用程序，让您可以在地图上找到客户的大致位置。 IP 地址是标识 Internet 或本地网络上的设备的唯一地址。 IP 代表“互联网协议”，它是一组规则，用于管理通过互联网或本地网络发送的数据格式。通过本文，我们将学习如何获取用户的 IP 地址以及在地图上显示他/她的大致位置。

先决条件：该项目的先决条件是：

• 反应
• 功能组件
• 反应钩子
• Axios 和 APIS
• Javascript ES6

创建 React 应用程序和模块安装：

第 1 步：通过在终端中键入以下命令来创建一个反应应用程序：

npx create-react-app ip-finder

第 2 步：现在，通过运行以下命令进入项目文件夹，即 ip-finder：

cd ip-finder

第 3 步：使用以下命令安装此项目所需的一些 npm 包：

npm install axios 
npm install react-map-gl
npm install react-icons

项目结构：它看起来像这样：

示例：让我们获取该项目所需的 Mapbox API 密钥。请按照以下简单步骤操作：

• 访问网站：https://www.mapbox.com/ 并创建一个免费帐户。
• 转到您的帐户仪表板，在页面底部，您将找到一个名为“访问令牌”的部分。

• 复制默认的公共访问令牌并将其保存在某处以供以后使用。

文件名：App.js在此文件中，我们将使用名为 https://ipapi.co/ 的免费开源 API 获取用户的 IP 地址（免费计划：1000 个请求/天）。 App.js 分为两部分，一部分用于显示用户的 IP 地址、位置和 ISP（Internet Service Provider），另一部分用于在动态地图上显示用户的大致位置。现在，在App.js组件中写下以下代码。

Javascript

import { useEffect, useState } from 'react';
import Axios from 'axios';
import Map from './Map';
import './App.css';
 
function App() {
 
  // Setting up the initial state variables
  const [ipDetails, setIpDetails] = useState([]);
  const [lat, setLat] = useState(22.5726);
  const [lon, setLon] = useState(88.3832);
 
  // Fetching the API once when the
  // component is mounted
  useEffect(() => {
    Axios.get('https://ipapi.co/json/').then((res) => {
      setIpDetails(res.data);
      setLat(res.data.latitude);
      setLon(res.data.longitude);
    });
  }, [])
 
  return (
    <>
      
IP Address Finder
      

        

          
What is my IPv4 address?
          
{ipDetails.ip}
          
Approximate location: 
           
{ipDetails.city}, {ipDetails.region},
          {ipDetails.country_name}.
 
 
          
Internet Service Provider(ISP):
           
{ipDetails.org}
 
        
        
    
  );
}
 
export default App;

在 App.js 组件中，我们导入了渲染地图的自定义 Map.js 组件。现在创建该组件。在src文件夹下创建一个名为Map.js的文件。

在Map.js组件中，我们将使用react-map-gl包导入地图。此外，我们将使用标记指向用户的大致位置。有关react-map-gl 的更多信息，请访问他们的官方文档 (https://visgl.github.io/react-map-gl/)。

文件名：Map.js现在在Map.js组件中写下以下代码。

Javascript

import React, { useEffect, useState } from 'react';
import ReactMapGL, { Marker } from 'react-map-gl';
import { RiUserLocationFill } from 'react-icons/ri';
 
const API_KEY = '';
 
const Map = ({ lat, lon }) => {
 
  // Setting up the initial viewport of the map
  const [viewport, setViewport] = useState({
    latitude: lat,
    longitude: lon,
    zoom: 14,
    bearing: 0,
    pitch: 0,
    width: '100%',
    height: '100%',
  });
 
  // Viewport re-renders whenever latitude
  // and longitude changes
  useEffect(() => {
    const a = { ...viewport };
    a.latitude = lat;
    a.longitude = lon;
    setViewport(a);
  }, [lat, lon]);
 
  return (
    

       setViewport(viewport)}
        mapStyle="mapbox://styles/mapbox/streets-v11">
        
          

            
          
        
      
    
  );
};
 
export default Map;

注意：将 替换为您自己的 Mapbox 公共访问令牌。

文件名：App.css

CSS

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
.App{
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.left{
  box-sizing: border-box;
  padding-left: 80px;
  width: 40%;
}
.map{
  width: 550px;
  height: 350px;
  border: 4px solid #1453dc;
}
.mark{
  padding: 40px;
  border-radius: 50%;
  background-color: #d2d8fabe
}
.heading{
  font-size: 60px;
  text-align: center;
  text-decoration: underline;
  font-family: 'Pacifico', cursive;
  color: #1453dc;
}
p{
  font-size: 20px;
  color: #1453dcaf;
}
#ip{
  color: #1453dc;
}

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

应用演示