Python Flask ve React Kullanımı

Videosunu izlemek için
https://www.youtube.com/watch?v=vqoHaM-L9Q4

Flask ve React'i birlikte kullanmak istiyorsanız izleyeceğiniz adımlar şöyle.

İlk olarak bir klasör içerisinde react projenizi oluşturun.

mkdir python-react
cd python-react
npx create-react-app .

React projeniz kurulduktan sonra api adında bir klasör oluşturun ve flask'ı kurun.

mkdir api
cd api
pip install flask

Flask'ı da kurduktan sonra, python-react klasöründeki package.json dosyanızı açın ve scripts altına şu komutu ekleyin

{
    ...
    scripts: {
        ...
        "start-flask": "cd api && export FLASK_APP=main.py && export FLASK_ENV=development && flask run",
    }
}

ve en altada ya da uygun bir yere proxy kodunu ekleyin

{
    ...
    "proxy": "http://127.0.0.1:5000"
}

api içine flask kurmuştuk, bir main.py dosyası oluşturup içine basit bir route tanımı yapalım.

cd api
touch main.py

main.py içine şu kodları yazalım

from flask import Flask
from time import time

app = Flask(__name__)

@app.route('/api/time')
def time():
    return {
        "time": time()
    }

artık react'i ve flask'ı şu şekilde başlatabilirsiniz

yarn start && yarn start-flask

react içinde /api/time adresine istek atarak dönen cevabı uygun şekilde gösterebilirsiniz.

import {useState, useEffect} from 'react'

function App() {

  const [time, setTime] = useState(0)

  useEffect(() => {
    fetch('/api/time').then(res => res.json()).then(data => {
      setTime(data.time)
    })
  }, [])

  return (
    <div>
      Flasktan gelen değer = {time}
    </div>
  );
}

export default App;