09.11.2023 в 19:30

Создание базовой утилиты React для получения IP-адресов для начинающих: от начала до конца

React предназначен не только для крупномасштабных проектов; он также идеально подходит для небольших утилит, которые могут значительно улучшить функциональность вашего веб-приложения. В этом руководстве мы создадим компонент React, который извлекает и отображает IP-адрес пользователя — фундаментальная задача, лежащая в основе многих сложных функций веб-приложений.

Запуск вашего проекта React

Прежде чем приступить к работе, убедитесь, что у вас готовы Node.js и npm. Начните с:

npx create-react-app react-ip-fetch

После завершения процесса войдите в новую папку проекта:

cd react-ip-fetch

Создание утилиты получения IP-адресов

Мы создадим служебный инструмент для получения сведений об IP-адресе, который станет отличным дополнением к любому веб-приложению для индивидуального пользовательского опыта или проверок безопасности.

Шаг 1. Очистка проекта

Упростите каталог src. Оставьте только файлы index.js, App.js и их CSS.

Шаг 2. Установка Axios

Вам понадобится Axios для выполнения запросов к API, поэтому установите его, используя:

npm install axios

Шаг 3. Создание компонента IpInfo

Внутри src создайте IpInfo.js с приведенным ниже кодом:

// IpInfo.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const IpInfo = () => {
  // State to store IP address
  const [ip, setIp] = useState('');

  // Effect hook to fetch IP on component mount
  useEffect(() => {
    const fetchIp = async () => {
      const apiUrl = 'https://api.ipify.org?format=json';
      try {
        const { data } = await axios.get(apiUrl);
        setIp(data.ip);
      } catch (error) {
        console.error('Error fetching IP:', error);
      }
    };

    fetchIp();
  }, []);

  // Render IP address or a loading state
  return (
    <div>
      <h2>Your IP Information</h2>
      <p>{ip ? `Your IP address is: ${ip}` : 'Fetching IP...'}</p>
    </div>
  );
};

export default IpInfo;

Шаг 4. Включение IPInfo в ваше приложение

В App.js импортируйте и отобразите IpInfo:

// App.js
import React from 'react';
import './App.css';
import IpInfo from './IpInfo';

function App() {
  return (
    <div className="App">
      <IpInfo />
    </div>
  );
}

export default App;

Оформите его по своему вкусу в App.css.

Шаг 5: Запуск приложения

Запустите свое приложение с помощью:

npm start

Это запустит ваше приложение в браузере.

Открытие OpenSign: шаг к раскрытию потенциала React в электронной подписи документов

Эта утилита IP-адреса — лишь верхушка айсберга React. Для более глубокого изучения возможностей React позвольте мне познакомить вас с OpenSign.

OpenSign — это моя инициатива с открытым исходным кодом, платформа электронной подписи, которая использует гибкость React для обеспечения бесперебойного процесса подписания документов. Это является свидетельством потенциала React в создании решений корпоративного уровня. С помощью OpenSign вы можете с легкостью управлять электронными подписями, пользуясь функциями, которые соответствуют различным процессам подписания, мерам безопасности и интуитивно понятному дизайну для лучшего взаимодействия с пользователем.

Вносите свой вклад, разветвляйте или просто просматривайте код, чтобы вдохновить вас на создание следующего проекта React на opensignlabs/opensign. Работая с OpenSign, вы не просто изучаете код; вы становитесь частью сообщества, занимающегося созданием передовых, масштабируемых и безопасных веб-приложений. Это фантастический ресурс для разработчиков React, желающих оставить свой след в мире открытого исходного кода.

Прочитав это руководство, вы сделали больше, чем просто несколько шагов в разработке React. Вы прошли путь, который расширился от простого служебного инструмента до обширного ландшафта полноценных приложений React, таких как OpenSign. Продолжайте в том же духе — ваш путь к более масштабным и влиятельным проектам React только начинается.

⭐ OpenSign on GitHub

До новых встреч, удачного программирования и надеюсь увидеть ваш вклад на GitHub!

Источник:

Selected Sort Option

#JavaScript #React

Войти на сайт