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:
Reference: