如何在ReactJs中建立一個域名查詢應用？

---

一個允許使用者使用關鍵詞或短語查詢可用域名的線上應用程式可以被稱為域名查詢器。對於希望為其網站註冊新域名的公司和個人來說，這是一個有用的工具。此應用程式的使用者可以查詢域名並顯示搜尋結果以及其他詳細資訊，例如成本和可用性。

要構建一個ReactJs域名搜尋應用程式，首先必須規劃應用程式的結構並確定要包含的功能。配置好開發環境後，可以新增一個搜尋欄位，以便使用者可以鍵入術語或短語來查詢仍然可用的域名。

可以使用服務或API來查詢可用的域名。為了幫助使用者找到完美的域名，可以以組織有序的方式向他們呈現搜尋結果，並提供過濾和排序選項。

該程式可以包含其他功能，例如收藏夾列表和域名生成器。完成的應用程式可以釋出到託管服務。

在使用API或其他服務查詢域名之前，徹底測試應用程式並考慮其安全性和隱私影響至關重要。

在ReactJs中建立域名查詢應用程式的步驟

應用程式佈局 - 首先是構思其佈局並選擇其功能。確定希望向使用者提供的使用者介面功能，例如搜尋欄、過濾和排序選項以及域名生成器。還應確定應用程式的佈局和外觀。

設定開發環境 - 安裝Node.js，然後使用Create 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

輸出

這是一個根據使用者輸入獲取域名的有用應用程式。它將幫助使用者透過單個搜尋欄位找到所需的域名。