Python Flask and React

Python Flask and React

https://flask.palletsprojects.com/en/2.2.x/installation/

 

Create an environment

C:\flask_dev>py -3 -m venv venv

Activate the environment

C:\flask_dev>venv\Scripts\activate

Install Flask

venv C:\flask_dev>pip install Flask
C:\flask_dev\flaskreact\app.py

 
#C:\flask_dev\flaskreact\app.py
from flask import Flask
from flask_restful import Api, Resource, reqparse #ModuleNotFoundError: No module named 'flask_restful' = pip install flask-restful
from flask_cors import CORS #ModuleNotFoundError: No module named 'flask_cors' = pip install Flask-Cors
from api.ApiHandler import ApiHandler

app = Flask(__name__)

CORS(app)
api = Api(app)

api.add_resource(ApiHandler, '/flask')

@app.route("/")
def hello_world():
    return "
Hello, World!
"

if __name__ == '__main__':
    app.run(debug=True)

C:\flask_dev\flaskreact\api\ApiHandler.py

 
#C:\flask_dev\flaskreact\api\ApiHandler.py
from flask_restful import Api, Resource

class ApiHandler(Resource):
  def get(self):
    return {
      'resultStatus': 'SUCCESS',
      'message': "Hello Api Handler ApiHandler.py"
      }

flask run (venv) C:\flask_dev\flaskreact>flask run:
React JS

Create Project
C:\react-js>npx create-react-app myreactdev

Run
C:\react-js\myreactdev> npm start

C:\react-js\myreactdev\src\App.js

//C:\react-js\myreactdev\src\App.js
import './App.css';
import React, { useEffect, useState } from 'react';
import axios from 'axios'

function App() {
  const [getMessage, setGetMessage] = useState({})

  useEffect(()=>{
    axios.get('http://localhost:5000/flask').then(response => {
      console.log("SUCCESS", response)
      setGetMessage(response)
    }).catch(error => {
      console.log(error)
    })

  }, [])
  return (
    <div className="App">
      <header className="App-header">
        <p><h1>Python Flask and React</h1></p>
        <div>{getMessage.status === 200 ? 
          <h3>{getMessage.data.message}</h3>
          :
          <h3>LOADING</h3>}</div>
      </header>
    </div>
  );
}

export default App;

Run C:\react-j\myreactdev>npm start