Python (backend) + React (frontend)

As a software developer, you must understand how both fields work. In this article, I will explain in simple steps how to connect your Flask app to react as its front end. Bare in mind it is not a beginner's guide so I will not walk through the basics.

Lets start by creating the server-side folder, changing into that directory, and creating a python file that will hold the functions respectively using the commands:-

mkdir flask-server 
cd flask-server
touch server.py

To begin working on any python file, we need to create and activate the environment. Then install the necessary packages. Follow these command.

python3 -m venv venv 
source venv/bin/activate
pip3 install flask

Building the API

Next up, we need to create the API so that we can send that to the front end . Below is a snippet of a function that returns a simple dictionary. You save that inside server.py which we created earlier.

server.py that contains the API

To confirm that this API works, we go to our terminal and start the python server, and head on to your preferred browser or postman to confirm it runs.

python3 server.py

results from localhost port

That is probably it with the server side. Now next up we create the client side using react. In your terminal simply type:-

npx create-react-app client

This creates a few things including a package JSON file that carries the packages we need for the app to run. In that file, add a new line to set up the proxy that connects to our server-side like so:-

from package json set the proxy to your local host.

You need useState and useEffect to connect the two directories. You add this in your App.js file. To start up your client directory run:-

npm start

This will automatically open a local port 3000. Once it's open you will see the return of what you added from your APP.js. In our case, it will return the API we wrote on the server. This is what the code looks like.

App.js code snippet

Now once you open port 3000 you should see the members' dictionary. As simple as that you have connected your API to a front end. For the full code, you can find it on my github