React with Python Flask API : A Guide for Data Scientist

Well, you have made a machine learning model and want to build a Frontend that interacts with the model and returns the output to the users. There are many ways to do it. One is Using Flask Ajax with Python and the other is using the most popular Javascript framework React that is built by Facebook. I am going with the React Framework. In this entire tutorial, you will learn how to make an app on React with Python Flask API. You will learn to make a form and interact with the Flask API URL.

Steps by Step to Create React with Python Flask API

Step 1: Create a React App

I am assuming that you have already installed the node js in your system. If not then install from the Offical Node js site. After that Go to your command prompt type the following command to create the app.

Install create-react-app

npm install -g create-react-app

Make a New React app in this case react-flask

create-react-app react-flask

Step 2: Open up the project in your editor. You can use any editor. I am using Microsoft Visual Code.

Step 3: Create a Form Component

In this step, I will create a Form Component named App. It will contain the form fields Title and Body to send to the flask.  Copy the following code.

class App extends React.Component {
  state = {
    title:"",
    body:"",
    results:''
  };

  handleFormSubmit(e) {
    e.preventDefault();
    console.log(this.state);
    axios({
      method:'post',
      url:"http://localhost:5000/send",
      headers: {'content-type': 'application/json'},
      data:this.state
    })
        .then(result => {
          this.setState({results:result.data});
          console.log(result.data)
        })
        .catch(error=> {
          console.log(error);
        })

  }
render() {
 return(
//form here
)
}

In each form fields, you will get the values using the function defined above handleFormSubmit() and then send the data using the axiom module to the flask as a JSON response. Here I am using the port 5000 for the flask server and the React app will run on the 3000 port. Lets code for the flask app.

Step by Step to Create Flask API

Step 1: Import the necessary libraries

from flask import Flask, request, jsonify
from flask_cors import CORS

Here I am using the flask and flask_cors module. Flask Cors will alow another external URL to communicate with the Flask app.

Step 2: Create the APP

Use the following code to create a Flask app.

app = Flask(__name__)
CORS(app)

Step 3: Define the App routes

@app.route("/send", methods=["GET", "POST"])
def send():
    if request.method == "POST":
        title = str(request.json["title"])
        body = str(request.json["body"])
        return jsonify("Sended")

Step 4: Run the apps

Run both the app. React app will run on localhost:3000 and the Flask app will run on localhost:5000. When you will fill-up the form and submit you will get the output as below.

Conclusion

React is more powerful than the Flask if you want to build a Fronted. All the functionalities are like the component and you can integrate it any DOM elements. I personally suggest everyone that uses python flask for building backend and for frontend use React. You can also use python with ajax to interact with the APIs URL.

That’s all in this post. If you have any query and wants to know more information you can contact us our official Facebook Page.

Join our list

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

We respect your privacy and take protecting it seriously

Thank you for signup. A Confirmation Email has been sent to your Email Address.

Something went wrong.