如何在 ReactJS 中创建域名查找器应用程序？

在本教程中，我们将学习如何使用ReactJS创建一个简单的域名查找器应用程序。我们将使用WHOIS API，该API允许我们查询任何顶级域名的WHOIS信息。

步骤1 - 设置ReactJS项目

首先，我们需要设置ReactJS项目。我们可以使用React官方提供的create-react-app工具来快速创建一个React应用程序。在终端中运行以下命令来安装它：

npm install -g create-react-app

一旦安装完成，我们可以使用以下命令创建一个ReactJS项目：

create-react-app domain-lookup-app

该命令将创建一个名为domain-lookup-app的React项目，并自动安装所需的依赖项。

步骤2 - 获取WHOIS API密钥

在我们可以开始编写代码之前，我们需要获取WHOIS API密钥。我们可以在https://whois.whoisxmlapi.com/注册并获取免费的API密钥。

步骤3 - 创建简单的UI

接下来，我们将创建一个简单的UI，该UI将允许用户输入要查询的域名。打开App.js文件，并将其替换为以下代码：

import React, { useState } from 'react';
import './App.css';

function App() {
  const [domain, setDomain] = useState('');

  const handleInputChange = (event) => {
    setDomain(event.target.value)
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(domain);
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Domain Lookup App</h1>
        <form onSubmit={handleSubmit}>
          <input type="text" placeholder="Enter domain name" onChange={handleInputChange} />
          <button type="submit">Search</button>
        </form>
      </header>
    </div>
  );
}

export default App;

该代码将创建一个包含一个表单的组件。表单将允许用户输入要查询的域名。我们还将使用useState钩子来跟踪用户输入，并在用户提交表单时打印输入。

步骤4 - 发送WHOIS API请求

接下来，我们将向WHOIS API发送请求，以获取域名的WHOIS信息。首先，我们需要安装axios，这是一个JavaScript库，可用于向API发送HTTP请求。在终端中运行以下命令来安装它：

npm install axios --save

一旦安装完成，我们可以更新App.js文件中的代码，并在用户提交表单时向WHOIS API发送请求。将App.js文件替换为以下代码：

import React, { useState } from 'react';
import './App.css';
import axios from 'axios';

function App() {
  const [domain, setDomain] = useState('');
  const [results, setResults] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const handleInputChange = (event) => {
    setDomain(event.target.value)
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    fetchData();
  }

  const fetchData = async () => {
    setIsLoading(true);
    try {
      const response = await axios.get(`https://www.whoisxmlapi.com/whoisserver/WhoisService?apiKey=[YourApiKeyHere]&outputFormat=JSON&domainName=${domain}`);
      setResults(response.data);
      setIsLoading(false);
    } catch (error) {
      console.log(error);
      setIsLoading(false);
    }
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Domain Lookup App</h1>
        <form onSubmit={handleSubmit}>
          <input type="text" placeholder="Enter domain name" onChange={handleInputChange} />
          <button type="submit">Search</button>
        </form>
        {isLoading && <p>Loading...</p>}
        {results && (
          <div>
            <h2>{results.WhoisRecord.domainName}</h2>
            <p>{results.WhoisRecord.registrant.organization}</p>
          </div>
        )}
      </header>
    </div>
  );
}

export default App;

该代码将向WHOIS API发送请求，并在收到响应后将响应打印到控制台。我们还在用户提交表单时更新了UI，并添加了一个加载指示器，以指示正在向API发送请求。

步骤5 - 更新UI

最后，我们将更新UI，以显示域名的WHOIS信息。打开App.js文件，并将其替换为以下代码：

import React, { useState } from 'react';
import './App.css';
import axios from 'axios';

function App() {
  const [domain, setDomain] = useState('');
  const [results, setResults] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const handleInputChange = (event) => {
    setDomain(event.target.value)
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    fetchData();
  }

  const fetchData = async () => {
    setIsLoading(true);
    try {
      const response = await axios.get(`https://www.whoisxmlapi.com/whoisserver/WhoisService?apiKey=[YourApiKeyHere]&outputFormat=JSON&domainName=${domain}`);
      setResults(response.data);
      setIsLoading(false);
    } catch (error) {
      console.log(error);
      setIsLoading(false);
    }
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Domain Lookup App</h1>
        <form onSubmit={handleSubmit}>
          <input type="text" placeholder="Enter domain name" onChange={handleInputChange} />
          <button type="submit">Search</button>
        </form>
        {isLoading && <p>Loading...</p>}
        {results && (
          <div>
            <h2>{results.WhoisRecord.domainName}</h2>
            <p>{results.WhoisRecord.registrant.organization}</p>
            <p>{results.WhoisRecord.registrant.email}</p>
            <p>{results.WhoisRecord.creationDate}</p>
            <p>{results.WhoisRecord.expirationDate}</p>
          </div>
        )}
      </header>
    </div>
  );
}

export default App;

该代码将更新UI，以显示域名的WHOIS信息。我们使用JavaScript模板字面量来动态创建HTML元素，并使用results对象中的数据填充这些元素。

以上就是使用ReactJS创建域名查找器应用程序的全部步骤。我们希望这篇教程对您有所帮助！