Cree una aplicación simple de Buscador de letras de canciones usando ReactJS

React es una biblioteca frontal súper impresionante que podemos usar para crear interfaces de usuario. En este artículo, construiremos una aplicación simple para encontrar la letra de cualquier canción. Este es un proyecto perfecto para principiantes, ya que le enseñará cómo obtener información mediante una API y mostrar esa información en consecuencia.

Requisitos previos: Los requisitos previos para este proyecto son:

• Fundamentos de React.js

Como estamos creando una aplicación de búsqueda de letras, necesitamos dos datos que son el nombre de la canción y el nombre del artista. Para ello, en la interfaz de usuario tendremos dos secciones de entrada de usuario. Después de obtener esas entradas, llamaremos a una API para obtener la letra de la canción deseada y mostrarla en consecuencia.

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 lyrics-finder

Paso 2: Ahora, vaya a la carpeta del proyecto, es decir, al buscador de letras, ejecutando el siguiente comando:

cd lyrics-finder

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

npm install axios

Estructura del proyecto: Se verá así:

Ejemplo: Construyamos la aplicación.

• App.js : este es el único componente que contendrá toda la lógica de la aplicación. Usaremos un enlace de React llamado useState para administrar estados en el componente funcional. Primero, declaramos dos variables de estado para almacenar el nombre de la canción y del artista. A continuación, crearemos una función llamada ‘searchLyrics’. Cada vez que el usuario haga clic en el botón de búsqueda, activará la función ‘searchLyrics’ que llamará a una API con los parámetros requeridos y almacenará el resultado en otra variable de estado llamada ‘lyrics’. Usaremos una API de código abierto para obtener las letras de las canciones.

import './App.css';
import Axios from 'axios';
import { useState } from 'react';
  
function App() {
    const [artist, setArtist] = useState("");
    const [song, setSong] = useState("");
    const [lyrics, setLyrics] = useState("");
  
    function searchLyrics() {
        if (artist === "" || song === "") {
            return;
        }
        Axios.get(
`https://api.lyrics.ovh/v1/${artist}/${song}`).then(res => {
            console.log(res.data.lyrics);
            setLyrics(res.data.lyrics);
        })
    }
  
    return (
        <div className="App">
            <h1>Lyrics Finder ????</h1>
  
            <input className="inp" type="text" 
                placeholder='Artist name'
                onChange={(e) => { setArtist(e.target.value) }} />
            <input className="inp" type="text" 
                placeholder='Song name'
                onChange={(e) => { setSong(e.target.value) }} />
            <button className="btn" 
                onClick={() => searchLyrics()}>
                    ???? Search</button>
            <hr />
            <pre>{lyrics}</pre>
        </div>
    );
}
  
export default App;

• App.css: ahora editemos el archivo llamado App.css para darle estilo a nuestra aplicación.

@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&family=Montserrat&display=swap");
.App {
    min-height: 100vh;
    height: auto;
    text-align: center;
    font-family: "Montserrat", sans-serif;
}
  
h1 {
    font-family: "Fredoka One", cursive;
    color: #ff7a8a;
}
  
pre {
    font-size: 24px;
    color: #113a5d;
}
  
hr {
    margin-top: 20px;
    width: 60%;
}
  
.inp {
    width: 200px;
    height: 40px;
    border: 2px solid #113a5d;
    margin: 0px 10px;
    padding-left: 6px;
    font-size: 22px;
}
  
.btn {
    width: 90px;
    height: 40px;
}

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm start

Producción: