Consumir una API REST (usuarios de Github) usando Fetch – React Client

En este artículo, aprenderá a desarrollar una aplicación React, que obtendrá los datos de una API REST mediante Fetch. Usaremos la API de usuarios de GitHub para obtener la información pública del usuario con su nombre de usuario. Puede encontrar la referencia de la API y los enlaces del código fuente al final de este artículo. 

Antes de pasar a la parte de desarrollo, para inicializar una aplicación de reacción simple, puede seguir los pasos que se mencionan a continuación: 

Paso 1: Crea la aplicación React.

npx create-react-app foldername

Paso 2: Mover a la carpeta del proyecto.

cd foldername

Paso 3: cree una carpeta de componentes y ahora la estructura del proyecto se verá así: 

Estructura del proyecto

Los componentes personalizados residen en la carpeta de componentes , con todo reunido en MainComponent.js , colocaremos este componente dentro de App.js, que a su vez se encuentra en el Node DOM «raíz» y todo lo que se encuentra dentro de este Node será administrado por React DOM.

Vamos a desarrollar tres componentes:

• Componente Principal: Responsable de la operación de búsqueda y cambios de estado en la aplicación.
• Barra de búsqueda: una barra de búsqueda para obtener la entrada del usuario para el nombre de usuario de GitHub.
• UserInfoCard: un componente reutilizable para mostrar la información del usuario de GitHub.

Paso 4: en el componente MainComponent.js , tenemos dos variables de estado, nombre de usuario (entrada del usuario) y userData (respuesta de la API REST). Necesitamos obtener los datos del usuario, cada vez que haya una actualización del nombre de usuario. Para lograr esto, vamos a utilizar el gancho useEffect de React. 

const [username, setUsername] = useState("");
const [userData, setUserData] = useState({});
  
useEffect(() => {
     getUserData();
 }, [username]);

Paso 5:  Ahora, para obtener la respuesta de la API de usuarios de GitHub, vamos a realizar una solicitud GET mediante Fetch, que será la función de la función getUserData(). 

var gitHubUrl = `https://api.github.com/users/${username}`;
  
const getUserData = async () => {
        const response = await fetch(gitHubUrl);
        const jsonData = await response.json();
        if (jsonData && jsonData.message !== "Not Found") {
            setUserData(jsonData);
            console.log(jsonData)
        }
        else if (username !== "") {
            console.log('Username does not exist');
        }
        else {
            setUserData({})
        }
    };

getUserData() es una función asíncrona , en la que fetch(gitHubUrl) realiza la solicitud y devuelve una promesa. Cuando se completa la solicitud, la promesa se resuelve con el objeto de respuesta . Este objeto es básicamente un marcador de posición genérico para varios formatos de respuesta. response.json()  se usa para extraer el objeto JSON de la respuesta, devuelve una promesa, de ahí la espera. 

Finalmente, nuestro archivo MainComponent.js se ve así:

import React, { useState, useEffect } from "react";
import SearchBar from "./SearchBar";
import UserInfoCard from "./UserInfoCard";
  
function Main() {
    const [username, setUsername] = useState("");
    const [userData, setUserData] = useState(Object);
      
    useEffect(() => {
        getUserData();
    }, [username]);
  
    var gitHubUrl = `https://api.github.com/users/${username}`;
  
    const getUserData = async () => {
        const response = await fetch(gitHubUrl);
        const jsonData = await response.json();
        if (jsonData && jsonData.message !== "Not Found") {
            setUserData(jsonData);
            console.log(jsonData)
        }
        else if (username !== "") {
            console.log('Username does not exist');
        }
        else {
            setUserData({})
        }
    };
      
    return (
        <div>
            <SearchBar username={username} 
                setUsername={setUsername} />
            <UserInfoCard userData={userData} />
        </div>
    );
}
  
export default Main;

Paso 6:  Ahora, pase al componente SearchBar, que tiene el propósito de recibir la entrada del usuario para el nombre de usuario. Es un componente simple, con un campo de entrada de tipo texto. En cualquier cambio, dispara el setUsername con el valor actualizado.

SearchBar.js

import React from "react";
  
function SearchBar({username, setUsername}){
  
    const onChange = (e) =>{
        setUsername(e.target.value)
    }
    return(
        <div className="searchbar">
        <input 
            placeholder="Search"
            type="text" 
            onChange={(event) => {onChange(event)}}
            onKeyUp={(event) => {onChange(event)}}
            onPaste={(event) => {onChange(event)}}
        />
        </div>
    );
}
  
export default SearchBar;

Paso 7:  Nuestro último componente es un componente de interfaz de usuario reutilizable, que es básicamente un componente de tarjeta que recibe datos de usuario como accesorios y simplemente los muestra en cualquier formato elegido. Puede modificar el archivo App.css para comprender los diversos aspectos del diseño. 

UserInfoCard.js

import React from "react";
  
function UserInfoCard({ userData }) {
    return (
        <div className="datacontainer">
            {userData.avatar_url ? (<div className="dataitem">
               <img src={userData.avatar_url} 
               alt="avatar" /></div>) : (<div></div>)}
            {userData.login ? (<div className="dataitem">Login: 
            {userData.login}</div>) : (<div></div>)}
            {userData.name ? (<div className="dataitem">
            Name : {userData.name}</div>) : (<div></div>)}
            {userData.blog ? (<div className="dataitem">
            Blog: {userData.blog}</div>) : (<div></div>)}
        </div>
    );
}
  
export default UserInfoCard;

Eso es todo, con estos tres componentes juntos, completa nuestra aplicación React, que puede descargar desde el enlace del código fuente que se proporciona a continuación y ejecutarlo en su sistema. El código fuente incluye un componente adicional para almacenar los datos recuperados en el almacenamiento local, que no se trató en este artículo. Entonces, si estás interesado, adelante y échale un vistazo también. 

Paso para ejecutar la aplicación: Para iniciar la aplicación en su sistema, ejecute el siguiente comando:

npm start

Producción:

API de usuarios de GitHub: https://docs.github.com/en/rest/reference/users

Obtener API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Código fuente: https://github.com/notnotparas/github-users-api