How to Connect ReactJS with flask API ?

Last Updated : 10 Oct, 2024

Connecting React with Flask API allows us to create a full-stack web application with React handling the user interface at frontend and Flask serving the data in backend. Here React makes the HTTP request to interact with the flask API to perform operations with the database.

Approach

To connect React JS with Flask API we will be using the data fetching methods and libraries like fetch and axios. Build the backend API using the flask and make HTTP requests from React frontend using JavaScript fetch method for efficient API communication.

Let's see a Step-by-step guide to connect Flask API with React JS to show the data on the web page.

Steps to Connect React with Flask API

Note : Make sure to make 2 separate folders for clean understanding, one for the Flask backend and one for the React frontend. The project structure should look like

Step 1: SetUp the Flask Server

Make a folder named backend and file server.js with the following command:

mkdir backend
cd backend
touch server.py

Build a basic flask server. Write down the following code in server.py file.

Example: This example craete a backend server that provides json data when http request is made at /data route.

Python

# Filename - 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)

Step to run the application: Use the following command to run the server:

python server.py

Output: This output will be visible on the http://localhost:5000/ on the browser window..

Step 2: Create React Application

Make a react project using the following command:

yarn create react-project frontend 

// OR

npx create-react-app frontend

Move After creating the app, move into the app using the following command:

cd frontend

After that open package.json and add the proxy.

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

Now, we provide the proxy in react package.json file because we need to access the flask URL in order to get the API from our react app. In general what proxy does is, when we request into the javascript web server which serves the react frontend will automatically be redirected to the proxy key. In this case, it will be our flask server.

Step 3: Fetching Data From the API

For fetching the API useState and useEffect hooks are used in react app.

useState: It is used for setting a data from the API and providing into the jsx for showing the data.
useEffect: It is used for rendering a fetch method on a single reload.

Example: This example uses the react hooks to fetche data from a Flask API and displays the name, age, date, and programming language on the webpage.

JavaScript

// Filename - App.js  // 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;