How to Create a Flask + React Project | Python Backend + React Frontend

Arpan Neupane · 614K views · 2021 · 10:50

Open on YouTube

Web developmentPython, Ruby & scripting languagestutorial

Why Stack Overflow recommends it

Stack Overflow users cite it as the tutorial they followed when wiring a React frontend to a Flask backend, and link it when asking why the fetched data does not show up.

Recommended by 1 people across 1 different months, 2022 to 2023.

What it is

A short tutorial by Arpan Neupane on setting up a project with a Flask backend and a React frontend. It builds a Python API route that returns a list of members, then fetches and displays that data in a React app using useEffect.

What people said

Recommends Feyto · 2023-01 · Stack Overflow · on “Nothing is displayed on the page after running npm start”

It's ok, everything works, I was able to get a software window to open when I run npm start and the python program sends the data to the React program by watching this tutorial: [this video] I didn't install Flask properly, nor launch the python program so it was normal that I don't have access to the URL ` [LINK]

Cites Homerian · 2022-11 · Stack Overflow · on “When using react and flask for creating a website, why is the data not loading?”

I am attempting to follow an example that essentially displays data to the backend, as well as to the frontend; the data would be grabbed from the python flask backend. Furthermore, I am attempting to grab data from my server.py file from the frontend using useEffect(). based on the video ( [this video] ) this should work and do what I am expecting it to, but it doesn't. While I am able to get the data reference of my objects, it doesn't get displayed in the console or on the screen. Here is my code: #App.js import React, {useState, useEffect } from 'react' function App() { const [data, setData] = useState([{}]) useEffect(() => { fetch("/members").then( res => res.json() ).then( data => { setData

Cites Riderdie · 2023-08 · Stack Overflow · on “Connecting Frontend to Backend using Flask + React”

Im following a youtube tutorial ( [this video] ) in order to setup a webapp using Flask and React. Ive followed the turotial pretty closley (other than having issues with a venv, which i fixed by not using one). Everything compiles, but I keep getting an error in my console instead of what is expected (small string of data). Backend Code: from flask import Flask app= Flask(__name__) # Members API Route @app.route("/members") def menbers(): return {"members": ["Member1","Member2","Member3"]} if __name__ =="__main__": app.run(host='0.0.0.0') Frontend Code: import React, { useState, useEffect } from 'react'; function App() { const [data, setData] = useState([{}]); useEffect(() => { fetch("/members")