Jim's
Tutorials

I took the flask app with html frontend and decided to try and shove a react frontend there instead. I referenced this:

https://stackoverflow.com/questions/48777708/react-frontend-connecting-to-flask-backend-howto

and tried setting up a react form to interact with my flask backend. I Used curl to test if its working. Below is the rudimentary form I hooked up to “result.js”

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')
);

and below is the flask part that connects the two:

@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 given"

and here is my curl result:

curl http://127.0.0.1:5000/result
no place information given%

then, I installed create react app and made an app inside my flask app.

Then, I connected them so I was getting an input field being put through by react, and I'd type something in, and flask would throw it up. I had the flask server send a message through along with the text I’d send through react to test this out.

Then I struggled with actually getting what I put into the input field, to send to a database. This got really frustrating and I ended up needing to write a diagram to figure out what was being sent where. I determined there was a FLASK bubble. there were flask views (the two html files) being served up by the flask server (flask_app.py) hitting the models. But, then I realized this react thing would need to be a whole new react SERVER. I'd need to prevent the flask views from throwing up those html files, and instead have it connect to a react frontend and throw up a controlled component. Like, react would need to make a get or post request to flask when its trying to send the information. then when its trying to get the information from the database it will need to make a get request to get the stuff I want to display.

So it is getting confusing and convoluted and I'm worried I"ll need to start over after doing this for days. But my next move is going to be, just making a plain old controlled component (rather than using the "form action = lasdhjfakjdh" which is not allowing me to redirect from flask to react. And then link it that way. Sigh. I'm going to reference this article to make the component (so, essentially I'm going to start building up from the react side now, and see if they can meet in the middle.

React Forms tutorial: https://reactjs.org/docs/forms.html

attachments

		last modified	size
	Pic1.png	Tue Apr 16 2024 06:42 pm	22K
	Pic2.png	Tue Apr 16 2024 06:42 pm	67K