Spring 2018

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:


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:

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

def new_post():
    return render_template('new_post.html')
@app.route('/create/', methods=['POST'])
def create_post():
# create new post
        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)


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

Displaying the data in Home component


>>> Failed to compile
  Line 40:  'Result' is not defined  react/jsx-no-undef
>>> 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)


https://cs.marlboro.college /cours /spring2018 /jims_tutorials /web_tech /final
last modified Fri December 1 2023 8:49 pm

attachments [paper clip]

  last modified size
TXT finals.zip Fri Dec 01 2023 08:49 pm 1.4M