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.
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
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.
index.js
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') );
App.jsx
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
App.css
body { background: #0f1228; overflow-x: hidden; color: #e7e9f0; font-family: 'Lato', sans-serif; }
Header.jsx
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;
Header.css
.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=
NameCard.jsx
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.
NameCard.css
.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; }
ResultContainer.jsx
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;
ResultContainer.css
.results-container { display: flex; justify-content: center; flex-wrap: wrap; padding: 20px 40px; }
SearchBox.jsx
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
SearchBox.css
.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 🙂