¿Cómo conectar ReactJS con la API del matraz?

Reactjs es una de las mejores bibliotecas frontend para crear aplicaciones frontend de una sola página. Ha sido desarrollado y mantenido por Facebook con una gran comunidad. 

Flask es un micro-framework de back-end escrito en python para el proceso de desarrollo rápido. Es famoso por su sencillez e independencia. No necesita ninguna biblioteca externa para funcionar, lo que lo hace apto para principiantes y muchas personas eligen este marco. Flask se usa generalmente para construir una API REST. Para obtener más información sobre cómo puede compilar una API REST en un matraz, consulte este artículo . 

En este artículo, aprenderemos cómo se puede conectar la API del matraz con Reactjs para mostrar los datos en la página web.

Configuración del proyecto: asegúrese de crear 2 carpetas separadas para una comprensión clara, una para el backend del matraz y otra para el frontend de reacción. La estructura del proyecto debe verse como

Paso 1: Configuración de un servidor de matraz 

Crea una carpeta llamada backend y file server.js con el siguiente comando:

mkdir backend
cd backend
touch server.py

Cree un servidor de matraz básico. Escriba el siguiente código en el archivo server.py .

# Import flask and datetime module for showing date and time
from flask import Flask
import datetime
  
x = datetime.datetime.now()
  
# Initializing flask app
app = Flask(__name__)
  
  
# Route for seeing a data
@app.route('/data')
def get_time():
  
    # Returning an api for showing in  reactjs
    return {
        'Name':"geek", 
        "Age":"22",
        "Date":x, 
        "programming":"python"
        }
  
      
# Running app
if __name__ == '__main__':
    app.run(debug=True)

Paso para ejecutar la aplicación: Use el siguiente comando para ejecutar el servidor:

python server.py

Producción:

Paso 2: Configurar el proyecto Reactjs

Haga un proyecto de reacción usando el siguiente comando:

yarn create react-project frontend // OR
npx create-react-app frontend

Mover Después de crear la aplicación, muévase a la aplicación usando el siguiente comando:

cd frontend

Después de eso, abra package.json y agregue el proxy.

"proxy":"http://localhost:5000/"

Ahora, proporcionamos el proxy en el archivo react package.json porque necesitamos acceder a la URL del matraz para obtener la API de nuestra aplicación de reacción. En general, lo que hace el proxy es, cuando solicitamos en el servidor web de JavaScript que sirve la interfaz de reacción, se redirigirá automáticamente a la clave de proxy. En este caso, será nuestro servidor de frascos. 

Paso 3: Obtener la API

Para obtener la API, los ganchos useState y useEffect se usan en la aplicación de reacción. 

• useState: se usa para configurar datos de la API y proporcionarlos al jsx para mostrar los datos.
• useEffect: se utiliza para representar un método de búsqueda en una sola recarga.

// Importing modules
import React, { useState, useEffect } from "react";
import "./App.css";
  
function App() {
    // usestate for setting a javascript
    // object for storing and using data
    const [data, setdata] = useState({
        name: "",
        age: 0,
        date: "",
        programming: "",
    });
  
    // Using useEffect for single rendering
    useEffect(() => {
        // Using fetch to fetch the api from 
        // flask server it will be redirected to proxy
        fetch("/data").then((res) =>
            res.json().then((data) => {
                // Setting a data from api
                setdata({
                    name: data.Name,
                    age: data.Age,
                    date: data.Date,
                    programming: data.programming,
                });
            })
        );
    }, []);
  
    return (
        <div className="App">
            <header className="App-header">
                <h1>React and flask</h1>
                {/* Calling a data from setdata for showing */}
                <p>{data.name}</p>
                <p>{data.age}</p>
                <p>{data.date}</p>
                <p>{data.programming}</p>
  
            </header>
        </div>
    );
}
  
export default App;

Paso para ejecutar la aplicación: Use el siguiente comando para ejecutar el servidor:

npm start // OR
yarn start

Producción: