¿Cómo obtener datos de una API en ReactJS?

ReactJS: ReactJS es una biblioteca de JavaScript declarativa, eficiente y flexible para crear interfaces de usuario. Es ‘V’ en MVC. ReactJS es una biblioteca front-end de código abierto basada en componentes responsable solo de la capa de visualización de la aplicación. Es mantenido por Facebook.

API: API es una abreviatura de Interfaz de programación de aplicaciones, que es una colección de protocolos de comunicación y subrutinas utilizadas por varios programas para comunicarse entre ellos. Un programador puede hacer uso de varias herramientas API para hacer su programa más fácil y simple. Además, una API facilita a los programadores una forma eficiente de desarrollar sus programas de software.

Enfoque: en este artículo, sabremos cómo obtenemos los datos de la API (interfaz de programación de aplicaciones). Para los datos, hemos utilizado el extremo de la API de http://jsonplaceholder.typicode.com/users , hemos creado el componente en App.js y hemos diseñado el componente en App.css. Desde la API tenemos el objetivo «id», «nombre», «nombre de usuario», «correo electrónico» y obtenemos los datos de los puntos finales de la API. A continuación se muestra la implementación paso a paso de cómo obtenemos los datos de una API en reaccionar. Usaremos la función de búsqueda para obtener los datos de la API.

Implementación paso a paso para obtener datos de una API en reaccionar.

• Paso 1: Crear Proyecto React 

  npm create-react-app MY-APP 

• Paso 2: Cambie su directorio e ingrese su gráfico de carpeta principal como

  cd MY-APP

• Paso 3: punto final de la API 

  https://jsonplaceholder.typicode.com/users

  

  API

• Paso 4: escriba el código en App.js para obtener datos de la API y estamos usando la función de obtención.

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo:

import React from "react";
import './App.css';
class App extends React.Component {
   
    // Constructor 
    constructor(props) {
        super(props);
   
        this.state = {
            items: [],
            DataisLoaded: false
        };
    }
   
    // ComponentDidMount is used to
    // execute the code 
    componentDidMount() {
        fetch(
"https://jsonplaceholder.typicode.com/users")
            .then((res) => res.json())
            .then((json) => {
                this.setState({
                    items: json,
                    DataisLoaded: true
                });
            })
    }
    render() {
        const { DataisLoaded, items } = this.state;
        if (!DataisLoaded) return <div>
            <h1> Pleses wait some time.... </h1> </div> ;
   
        return (
        <div className = "App">
            <h1> Fetch data from an api in react </h1>  {
                items.map((item) => ( 
                <ol key = { item.id } >
                    User_Name: { item.username }, 
                    Full_Name: { item.name }, 
                    User_Email: { item.email } 
                    </ol>
                ))
            }
        </div>
    );
}
}
   
export default App;

Escriba código en App.css para diseñar el archivo app.js.

.App {
    text-align: center;
    color: Green;
}
.App-header {
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
}
.App-link {
    color: #61dafb;
}
  
@keyframes App-logo-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.  

npm start

Salida: Abra el navegador y nuestro proyecto se muestra en la URL http://localhost:3000/