¿Cómo crear una aplicación de buscador de nombres de dominio en ReactJS?

En este artículo, vamos a crear una aplicación generadora de nombres de dominio que genere una gran cantidad de nombres de dominio relacionados con nuestra palabra clave de entrada disponibles para comprar. En este generador de nombres de dominio, tomaremos un texto proporcionado por el usuario y generaremos muchos nombres relacionados con el texto de entrada proporcionado, y al hacer clic en cualquiera de ellos, seremos redirigidos al sitio web de compra de dominios.

Requisitos previos: Los requisitos previos para este proyecto son.

• JavaScript ES6
• Reaccionar
• Ganchos de reacción
• Reaccionar componentes funcionales

Creación de la aplicación React e instalación del módulo:

Paso 1: Inicie un proyecto con el siguiente comando:

npx create-react-app foldername

Paso 2: Ahora, vaya a la carpeta del proyecto, es decir, nombre de la carpeta :

cd foldername

Etapa inicial de carpetas

Paso 3: Ahora, ve a la carpeta src y crea una carpeta de componentes . En la carpeta de componentes, cree las siguientes carpetas y sus respectivos archivos JSX y CSS:

• aplicación:
  • Aplicación.jsx
  • aplicación.css
• Encabezamiento:
  • Encabezado.jsx
  • Encabezado.css
• Nombre de tarjeta:
  • NameCard.jsx
  • NameCard.css
• Contenedor de resultados:
  • Contenedor de resultados.jsx
  • ResultContainer.css
• Caja de búsqeda:
  • CuadroBúsqueda.jsx
  • CuadroBúsqueda.css

Paso 4: crea otra imagen de carpeta . Importa la imagen que quieras usar.

Paso 5: Ahora, abra la consola e instale el paquete npm @rstacruz/startup-name-generator :

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

Nota: El paquete mencionado anteriormente es de código abierto en GitHub: https://github.com/rstacruz/startup-name-generator

Estructura del proyecto: Tendrá el siguiente aspecto.

Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.

npm start

Ejemplo: Escriba el código a continuación en el nombre del archivo mencionado.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App/App';
  
ReactDOM.render(<React.StrictMode >
    <App />
</React.StrictMode>,
    document.getElementById('root')
);

import React from 'react';
import Header from '../Header/Header';
import ResultContainer from '../ResultContainer/ResultContainer';
import SearchBox from '../SearchBox/SearchBox';
import './App.css';
  
const name = require('@rstacruz/startup-name-generator');
  
// Class based component
class App extends React.Component {
    state = {
        headerText: "Just Name It!!",
        headerExpanded: true,
        suggestedNames: [],
    };
    // Animation
    handleInputChange = (inputText) => {
        this.setState({ headerExpanded: !(inputText.length > 0), 
        suggestedNames: (inputText.length > 0) ? 
                        name(inputText) : [], });
    };
  
    render() {
        return (
            <div>
                <Header
                    headTitle={this.state.headerText}
                    headerExpanded={this.state.headerExpanded} />
                <SearchBox onInputChange={this.handleInputChange} />
                <ResultContainer suggestedNames=
                    {this.state.suggestedNames} />
            </div>
        );
    }
}
  
export default App;

App.css: Esto establece el fondo atractivo de la página de destino

body {
   background: #0f1228;
   overflow-x: hidden;
   color: #e7e9f0;
   font-family: 'Lato', sans-serif;
}

import React from 'react';
import'./Header.css';
import header from '../../image/header.png'
  
const Header=({headTitle , headerExpanded})=>{
    return(
        <div className="head-container">
            <img src={header} 
            className={`head-image ${headerExpanded ? 
            'head-image-expanded':'head-image-contracted'}`} 
            alt="headerImage"/>
            <h1 className="head-text">{headTitle}</h1>
        </div>
    );
};
export default Header;

.head-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px;
}
  
.head-image {
    width: auto;
    transition: max-width 1s, min-width 1.5s;
}
  
.head-image-expanded {
    min-width: 300px;
    max-width: 280px;
}
  
.head-image-contracted {
    min-width: 100px;
    max-width: 120px;
}
  
.head-text {
    font-family: 'Hachi Maru Pop', cursive;
    margin: 5px 0 15px 0;
}

NameCard.jsx: aquí todos los nombres únicos sugeridos se crean en componentes separados de nameCard

En este componente, hay un enlace de búsqueda de dominio de NameCheap al que se llamará después de que el usuario elija cualquier nombre único de los nombres sugeridos.

https://www.namecheap.com/domains/registration/results/?domain=

import React from 'react';
import './NameCard.css';
  
const nameCheapUrl = 
"https://www.namecheap.com/domains/registration/results/?domain=";
const NameCard = ({ suggestedName }) => {
    return (
        <a
            target="_blank"
            rel="noreferrer"
            className="card-link" href={`${nameCheapUrl}${suggestedName}`}>
            <div className="result-name-card">
                <p className="result-name">{suggestedName}</p>
  
            </div>
        </a>
    );
};
export default NameCard;

NameCard.css: Diseñar los componentes independientes de NameCard.

.result-name-card {
    color: #e7e9f0;
    background: #282d4f;
    margin: 10px 15px;
    min-width: 75px;
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0px 0px5pxrgba(255, 255, 255, 0.1);
    transition: background 0.35s;
    display: flex;
    justify-content: center;
}
  
.card-link {
    text-decoration: none;
}
  
.result-name-card:hover {
    background: #4a5079;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}
  
.result-name {
    margin: 0;
    font-weight: 100;
}

import React from 'react';
import NameCard from '../NameCard/NameCard';
import './ResultContainer.css'
const ResultContainer =({suggestedNames})=>{
    const suggestedNamesJsx = suggestedNames.map((suggestedName)=>{
        return <NameCard key={suggestedName} suggestedName={suggestedName}/>;
    });
    return(
        <div className="results-container">
            {suggestedNamesJsx}
        </div>
    );
};
export default ResultContainer;

.results-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px 40px;
}

import React from 'react';
import './SearchBox.css';
const SearchBox = ({ onInputChange }) => {
    return (
        <div className="search-container">
            <input onChange={(event) => onInputChange(event.target.value)} 
            placeholder="Type keywords" className="search-input" />
        </div>
    );
};
  
export default SearchBox;

SearchBox.css : estilo del cuadro de búsqueda

.search-container {
    display: flex;
    justify-content: center;
    margin: 10px;
}
  
.search-input {
    padding: 18px 25px;
    font-size: 25px;
    width: 350px;
    border-width: 0;
    background: #a592f2;
    color: #e7e9f0;
    border-radius: 50px;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
  
.search-input::placeholder {
    color: #e7e9f0;
}
  
.search-input:focus {
    outline: navy;
}

Ejecute el código: guarde todos los archivos e inicie el servidor: 

npm start

Salida: Abra http://localhost:3000/nameIt URL en el navegador. Mostrará el resultado. Nuestra aplicación ahora está completa y debería estar funcionando ahora. Codificación feliz 🙂

Resultado final