如何在 ReactJs 中创建域名查找应用?

react jsweb developmentfront end technology

域名查找应用是一种在线应用，允许用户使用关键字或短语查找可访问的域名。对于希望为其网站注册新域名的公司和个人来说，这是一个实用的工具。用户可以使用该软件查找域名并显示搜索结果以及费用和可用性等其他详细信息。

要构建 ReactJs 域名搜索应用，首先必须规划应用的结构并确定要包含的功能。配置开发环境后，可以添加搜索字段，以便用户输入关键词或短语来查找仍然可访问的域名。

可以使用服务或 API 来查找可用的域名。为了帮助用户找到理想的域名，搜索结果可以以有序的方式呈现给他们，并提供筛选和排序选项。

该程序可以包含收藏夹列表和域名生成器等额外功能。完成的软件可以发布到托管服务。

在使用 API 或其他服务查找域名之前，务必彻底测试应用并考虑其安全性和隐私影响。

使用 ReactJs 创建域名查找器应用的步骤

应用布局 − 第一阶段是构思布局并选择功能。确定用户希望提供的面向用户的功能，例如搜索栏、过滤和排序选项以及域名生成器。还应确定应用的布局和外观。

设置开发环境 − 安装 Node.js，然后使用 Build React App 启动一个新的 React 应用。用户可以使用它来创建一个简单的 React 应用，作为用户域名搜索应用的基础。要创建 React 应用，请使用以下命令 -

npx create-react-app domain-finder

这里的 domain-finder 是我们应用的名称和文件夹名称。使用以下命令导航到该文件夹 -

cd domain-finder

安装依赖项 - 安装所需的 npm 包以获取多个域名。使用以下命令安装"@rstacruz/startup-name-generator"。

npm install -g @rstacruz/startup-name-generator

构建搜索栏 - 第三步是创建一个搜索栏，用户可以在其中输入关键词或短语来查找仍然可用的域名。可以使用 React 组件，并添加用户输入处理功能。

利用依赖项查找域名 − 使用依赖项"@rstacruz/startup-name-generator"，我们可以找到与搜索关键词相关的域名并将其显示在网页上。

示例

在本例中，我们将使用 React.js 开发一个域名查找器应用。我们创建了一个搜索栏和卡片组件，用于搜索并在网页上显示结果。我们在项目目录中创建了一个名为 components 的文件夹以及两个文件:CardComponent.js 和 SearchComponent.js。完整的项目结构如下所示 −

文件及其各自的代码如下所示 −

App.js − 它是我们 React 应用的主要组件。在这里我们声明应用程序的状态及其各自的方法和组件。

import './App.css';
import { useState } from 'react'
import SearchComponent from './components/SearchComponent';
import CardComponent from './components/CardComponent';
const name = require('@rstacruz/startup-name-generator');
function App() {
   const [names, setNames] = useState([])
   const [searchText, setSearchText] = useState('')
   const searchTextChange = (e) => {
      setSearchText(e.target.value)
      setNames(() => {
         if (e.target.value.length > 0) {
            return name(e.target.value)
         } else {
            return []
         }
      })
   };
   return (
      <div className="App">
         <h2>Domain name finder app in <i>ReactJS</i></h2>
         <div className='main mt-5'>
            <SearchComponent searchTextChange={searchTextChange} />
            <div className='mt-2'>
               {
                  names.length > 0 ?
                  names.map(n =>
                     <CardComponent name={n} />
                  ) : null
               }
            </div>
         </div>
      </div>
   );
}
export default App;

App.css − 我们的应用程序的 CSS 文件。

.App {
   text-align: center;
}
.main {
   margin-top: 5%;
}
.mt-5 {
   margin-top: 5%;
}
.mt-2 {
   margin-top: 2%;
}
.d-flex {
   display: flex;
}
.card {
   display: inline-block;
   padding: 2%;
   width: 10%;
   margin: 1%;
   border: 1px solid gray;
   background-color: rgb(187, 255, 188);
   border-radius: 10px;
}

components.CardComponent.js − 这是我们应用程序的卡片组件。它在网页上显示每个域名。

import React from 'react'
const CardComponent = ({ name }) => {
   return (
      <div className='card'>{name}</div>
   )
}
export default CardComponent

components.SearchComponent.js − 该组件由搜索栏和搜索标签组成。

import React from 'react'
const SearchComponent = ({ searchTextChange }) => {
   return (
      <div>
         <h4>Enter your domain name here!</h4>
         <input onChange={(e) => searchTextChange(e)}
         placeholder="Enter your domain name" />
      </div>
   )
}
export default SearchComponent