How to connect python backend to react frontend

I'm not quite sure if my question is a duplicate, but I wasn't able to find something helping me in my case.

Set Up
I've built a frontend webpage which contains a couple of services, for example show some timeseries and other information about my system. The website is build with the react framework and so using javascript in general.
Now I want to do some calculations about the timeseries for example calculate the similarity and other features of my sensordata. For that I'm using python which offers me a lot of libraries I've used for a long time and are easy to use.

What I'm looking for:
I'm looking for a very simple way to call my backend-timeseries-analysis-python script from the react GUI passing some variables like the length of the series. Also I want to process the returned values and safe the current values needed for normalization (like max,min) for further calculations.

So the procedure would look like the following:

1) Type value in react frontend input box
2) react/javascript calls pythonscript/ initialize a class and passes variables to class
3) python calculates similarity of sensor data 
4) python returns similarity values to frontend and saves classes for later call
5) react displays returned values
6) react/javascript calls pythonscript
7) python compares latest data to past data and refreshs treshholds(like max, min)
8) python calculates similarity of sensor data 
9) continue.. 

Thanks for your help!

asked Mar 4, 2020 at 14:54

4

You can expose your Python scripts on a REST API which will be called by your React frontend. Database connection will be made by this API, and the response is sent to your frontend.

See Flask (very simple for small projects) or even Django to build Python APIs.

answered Mar 4, 2020 at 15:05

SayydikaSayydika

1281 silver badge7 bronze badges

4

Check out Streamlit. It's a very good alternative to Flask /Django. I am a backend python guy and have no experience in using frontend but I was able to spin up the front end quickly with Streamlit.

answered Oct 9, 2021 at 11:00

1

React is a JavaScript web application framework for building rich user interfaces that run in web browsers.

React is an implementation of the JavaScript frameworks concept. Learn how these pieces fit together in the web development chapter or view the table of contents for all topics.

Beginner React tutorials

Generally before you start working with React you will want to learn how to build your Python backend with a web framework such as Django, Flask or Pyramid. Once you get comfortable with the web development basics with one of those frameworks as well as JavaScript then it will be much easier to tack on React to build your client-side user interfaces.

• JavaScript fundamentals before learning React provides a gut check that you have the prerequisite knowledge to avoid getting impossibly stuck while trying to learn React.

• The official React tutorial is one of the best ways to start using React because many other tutorials quickly fall out of date while this one tends to stick to the basics that are relevant to beginners.

• 9 things every React.js beginner should know is not a tutorial but instead the author gives some strong opinions for what beginners should know as they start learning React.

• React Bootstrap (source code replaces the existing Bootstrap JavaScript with React components that do not rely on jQuery.

Python+React tutorials

• How to set up Django with React presents one developer's opinionated way of combining a Django-powered back end with React on the front end, including how to serve up static assets.

• Django REST with React (Django 2.0 and a sprinkle of testing) combines a Django plus Django REST Framework (DRF) backend with React on the front end and shows how to stich it all together.

• This Modern Django 4-part tutorial series is well-done, has freely available source code and includes:

  1. Setting up Django and React
  2. Redux and React Router setup
  3. Creating an API and integrating with React
  4. Adding authentication to React SPA using DRF

• Build a Simple CRUD App with Python, Flask, and React shows how to combine a Flask backend with React.

• Learn React app is a Git repository with a code tutorial and instructions for how to follow along, as well as exercises to ensure you are tested as you go.

Other React resources

• React interview questions is a good quiz to see what you know or still need to learn about the fundamentals of using React.

• Under-the-hood-ReactJS examines the React codebase itself rather than teaching you how to use it.

Do you need to style your app or deploy it?

My app runs but looks awful. How do I style the user interface?

I've built a Python web app, now how do I deploy it?

How should I host and serve static content files?

Can you use React with Python backend?

How do you integrate frontend and backend in Python?

How do you connect backend with frontend in React?