¿Cómo crear una aplicación de diccionario en ReactJS?

En este artículo, crearemos una aplicación de diccionario muy simple con la ayuda de una API. Este es un proyecto perfecto para principiantes, ya que le enseñará cómo obtener información de una API y mostrarla y algunos conceptos básicos sobre cómo funciona realmente React. Además, aprenderemos cómo usar los íconos de React. Vamos a empezar.

Enfoque: nuestra aplicación contiene dos secciones, una para tomar la entrada del usuario y la otra para mostrar los datos. Cada vez que un usuario busca una palabra, almacenamos esa entrada en un estado y activamos una llamada API basada en el parámetro de palabra clave buscada. Después de eso, cuando se realiza la llamada a la API, simplemente almacenamos esa respuesta de la API en otra variable de estado y, finalmente, mostramos la información correspondiente.

Requisitos previos: Los requisitos previos para este proyecto son:

• Reaccionar
• Componentes funcionales
• Ganchos de reacción
• Reaccionar Axios y API
• Javascript ES6

Creando una aplicación React e instalando algunos paquetes npm:

Paso 1: Cree una aplicación de reacción escribiendo el siguiente comando en la terminal:

npx create-react-app dictionary-app

Paso 2: ahora, vaya a la carpeta del proyecto, es decir, aplicación de diccionario, ejecutando el siguiente comando:

cd dictionary-app

Paso 3: instalemos algunos paquetes npm necesarios para este proyecto:

npm install axios

npm install react-icons --save

Estructura del proyecto: Debería verse así:

Ejemplo: Es el único componente de nuestra aplicación que contiene toda la lógica. Usaremos una API de código abierto gratuita (no se requiere autenticación) llamada ‘API de diccionario libre’ para obtener todos los datos requeridos. Nuestra aplicación contiene dos secciones, es decir, una sección para tomar la entrada del usuario y un botón de búsqueda, la otra es para mostrar los datos. Aparte de mostrar la información que recibimos, también tendremos un botón de altavoz que permite a los usuarios escuchar la fonética.

Ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código. Aquí, el nombre del archivo es App.js y App.css

import { React, useState } from "react";
import Axios from "axios";
import "./App.css";
import { FaSearch } from "react-icons/fa";
import { FcSpeaker } from "react-icons/fc";
 
function App() {
  // Setting up the initial states using react hook 'useState'
 
  const [data, setData] = useState("");
  const [searchWord, setSearchWord] = useState("");
 
  // Function to fetch information on button
  // click, and set the data accordingly
  function getMeaning() {
    Axios.get(
      `https://api.dictionaryapi.dev/api/v2/entries/en_US/${searchWord}`
    ).then((response) => {
      setData(response.data[0]);
    });
  }
 
  // Function to play and listen the
  // phonetics of the searched word
  function playAudio() {
    let audio = new Audio(data.phonetics[0].audio);
    audio.play();
  }
 
  return (
    <div className="App">
      <h1>Free Dictionary</h1>
      <div className="searchBox">
 
        // Taking user input
        <input
          type="text"
          placeholder="Search..."
          onChange={(e) => {
            setSearchWord(e.target.value);
          }}
        />
        <button
          onClick={() => {
            getMeaning();
          }}
        >
          <FaSearch size="20px" />
        </button>
      </div>
      {data && (
        <div className="showResults">
          <h2>
            {data.word}{" "}
            <button
              onClick={() => {
                playAudio();
              }}
            >
              <FcSpeaker size="26px" />
            </button>
          </h2>
          <h4>Parts of speech:</h4>
 
           
<p>{data.meanings[0].partOfSpeech}</p>
 
 
          <h4>Definition:</h4>
 
           
<p>{data.meanings[0].definitions[0].definition}</p>
 
 
          <h4>Example:</h4>
 
           
<p>{data.meanings[0].definitions[0].example}</p>
 
        </div>
      )}
    </div>
  );
}
 
export default App;

@import url(
'https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url(
'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,600;0,800;1,300&display=swap');
 
.App {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f6f6f6;
  background-image: linear-gradient(315deg, #f6f6f6 0%, #e9e9e9 74%);
  font-family:'Poppins', sans-serif;
}
 
h1 {
  text-align: center;
  font-size: 3em;
  font-family: 'Pacifico', cursive;
  color: #4DB33D;
  padding: 1.5em;
}
 
h2{
  font-size: 30px;
  text-decoration: underline;
  padding-bottom: 20px;
}
 
h4{
  color: #4DB33D;
}
 
input{
  width: 400px;
  height: 38px;
  font-size: 20px;
  padding-left: 10px;
}
 
.searchBox > button{
  background-color: #4DB33D;
  height: 38px;
  width: 60px;
  border: none;
  color: white;
  box-shadow: 0px 3px 2px #439e34;
  cursor: pointer;
  padding: 0;
}
 
.showResults{
  width: 500px;
  padding: 20px;
}
 
.showResults > h2 > button{
  background: none;
  border: none;
  cursor: pointer;
}

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

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: