react frontend connecting to flask backend Howto react frontend connecting to flask backend Howto reactjs reactjs

react frontend connecting to flask backend Howto


I have tweaked your code a little bit.Changes I have made:

  • added the backend path http://localhost:5000/result in frontend as form action path.
  • used request.args.get method to grab the submitted value.

The frontend is running on port 3000 and the backend is running on port 5000; both in localhost.

Frontend code:

import ReactDOM from 'react-dom';import React, {Component} from 'react';class Form1 extends Component{    render(){        return (            <div class="form">                <form action="http://localhost:5000/result" method="get">                    Place: <input type="text" name="place"/>                    <input type="submit" value="Submit"/>                </form>            </div>        );    }}ReactDOM.render(    <Form1/>,    document.getElementById('root'));

Backend Code:

from flask import Flask, requestapp = Flask(__name__)@app.route('/result', methods = ['GET', 'POST'])def result():    if request.method == 'GET':        place = request.args.get('place', None)        if place:            return place        return "No place information is given"if __name__ == '__main__':    app.run(debug = True)

Here is the screenshot of running program:

enter image description here

Reference:

Flask documentation: The request object