React-Flask Frankenstein

View this on github: https://github.com/LeslieWilson/python_playground/tree/chapter4/finals

How To Run This Program

First you need to run the server. Get to the root directory, type python3 flask_app.py. Then browse into client, then flaskreact. Type npm start and that will start the dev server.

App Overview

My final project takes a flask app and hooks it up with a React front-end that is a form. I was originally intending that this form would send information to a database that I did successfully set up with flask, using peewee, (and made some mock entries into for testing) so it would be a full-stack react app. I’ve never really made something from start to finish in react, only ever been handed bits and pieces to work from or did things like concentrate on styling. This was a new frontier in coding for me and was probably the most challenging of all projects.

Being that all of this was new to me, I dove right into the React and Flask literature to try and understand JSX and figure out how to hook different servers up. Luckily, I’d done some flask work in class previously so that part went a bit more smoothly. I watched a tutorial called Python Web Apps with Flask by Ezra Zigmond, which launched me into the different kinds of routes in flask, and included information about creating a database with peewee. It also showed me a good debugging tool that ended up being quite useful down the road as things got more complicated, and I made more mistakes. I played around with assigning functions to particular addresses on my webpage, and essentially I got this form to work in a browser that takes two inputs(see picture 1) posts them, and saves them. And you can keep adding to the posts (see picture 2).

Connecting React and Flask

This was all fine and dandy, but I was using a flask template that had its own homepage thrown up by the flask server, and I wanted my front-end to be react. So I knew I needed to slice off the appropriate piece of of the flask code and instead have a react component calling for information, and sending information to flask, which could then be thrown up with react. I also read that I'd need to turn my flask app into an api, and stick that into any React components I wanted to interact with that server. First I figured that out using an article about flask/peewee RESTapi's, and a how-to guide I listed in resources:

Sample Flask API:

http://localhost:5000/api/Home

Then I got started with surgery, cutting off a bit of the flask template and attaching it with my API to react. Below is what I removed:

@app.route('/')
def home():
    # render the home page with the saved information
     return render_template('home.html', posts=Post.select().order_by(Post.date.desc()))

@app.route('/new_post/')
def new_post():
    return render_template('new_post.html')
@app.route('/create/', methods=['POST'])
def create_post():
# create new post
    Post.create(
        title=request.form['title'],
        text = request.form['text']
    )
    return the user to the home page
    return redirect(url_for('home'))

I took that arm off, and stitched this one on instead. I also included a route with a POST method, for sending information to the database, but I never actually made it far enough for information to be send, so I'll include the code that functions now:

@app.route('/api/Home', methods = ['GET']) @cross_origin() def result(): entries=Entry.select().order_by(Entry.date.desc()) array = [] for entry in entries: array.append({"name": entry.name, "email": entry.email, "country": entry.country, "state": entry.state, "city": entry.city, "zip": entry.zip}) return jsonify(array)

Database

If you check out my Models.py file, even though I coulden't figure out how to get information sent from the form to the database, I did manually enter the data that displays in the command line when you start a python prompt and import this file in. I tried to use the flask-peewee api to expose my database models but it did not work so I did it manually. In Models.py, I lined the data-fields up with the information I was expecting to be sent from the form and in the server file above I fetched the information I had manually entered to be displayed by react. Here's an example of creating an entry in the command line:

>>> from models import *
Entry.create(name = "bob2", email = "bob@gmail2", country = "america2", state = "mississippi2", zip = 123452, city = "brattleboro2")
<models.Entry object at 0x109e08d30>

React Components

• After I figured out how to connect flask to react, things got a bit easier. My file "Home.js" requests information from the flask server using a fetch call in the componentDidMount method when it loads. Home is also passing information as props to the "Results.js" component, which is rendering it.
• I also made a "Form.js" component that is sending information to the flask server using the POST method. I commented out the corresponding route in flask as I couldn't figure out how to get the submitted data from the form to the database. The Form does render the input fields and logs the changing state as you type.

Displaying the data in Home component

• After fetching the data into the Home component and saving it to state, I needed to render it on the page in some kind of organized way
• I did some reading on how to map through data and display it using components here: https://coursework.vschool.io/mapping-components-in-react/
• I mapped through the array of results saved in state and returned a result component for each object in the array, where each key in each object was passed to results via props
• I then rendered the variable results, that contained each result component with the given props
• In the result component itself I rendered each prop with a label inside a div

TroubleShooting

• The first issue I ran into was that I forgot to export and import Result with the same title. The error looked like this:

>>> Failed to compile
./src/Components/Home.js
  Line 40:  'Result' is not defined  react/jsx-no-undef

• The next issue I found was that I was getting a warning that I did not have a unique key for map to function properly. The Console error looked like this:

>>> index.js:2178 Warning: Each child in an array or iterator should have a unique "key" prop.
Check the render method of `Home`. See https://fb.me/react-warning-keys for more information.
    in Result (at Home.js:40)
    in Home (at App.js:11)
    in div (at App.js:10)
    in App (at index.js:7)

• I read here: https://reactjs.org/docs/lists-and-keys.html That you can use the index to generate unique key values so I refactored my code to include an index and set that as the key

RESOURCES

• Python Web Apps with Flask by Ezra Zigmond https://www.youtube.com/watch?v=qla-KaMF-2Q
• RESTapi peewee documentation http://docs.peewee-orm.com/projects/flask-peewee/en/latest/rest-api.html
• React Frontend Connecting to Flask Backend How-To :https://stackoverflow.com/questions/48777708/react-frontend-connecting-to-flask-backend-howto
• React Forms tutorial: https://reactjs.org/docs/forms.html
• I learned about tools I might use to expose my project’s models via a restful API: http://flask.pocoo.org/docs/0.12/tutorial/templates/ *..some debugging: https://stackoverflow.com/questions/25964312/not-null-constraint-failed-after-adding-to-models-py
• Was trying to pass in different configuration settings in flask: http://flask.pocoo.org/snippets/20/
• More info working with flask templates: http://flask.pocoo.org/docs/0.12/tutorial/templates/

attachments