Building a Python API and Fetching it in React: A Step-by-Step Guide

APIs, or application programming interfaces, are a common way for different software systems to communicate with each other. In this article, we will learn how to create an API in Python and fetch it from a React application.

Prerequisites:

To follow along with this tutorial, you should have a basic understanding of Python and React, as well as a working development environment with Python and Node.js installed. You will also need to install the Flask and Axios libraries.

Creating the API in Python:

We will be using the Flask library to create our API in Python. Flask is a lightweight web framework that makes it easy to create web applications in Python.

To start, create a new Python file and import the Flask library. Then, create an instance of the Flask class and assign it to a variable called app.

from flask import Flask

app = Flask(__name__)

Next, we will define a function called hello that will be our API endpoint. This function will return a simple message when it is called.

@app.route('/hello')
def hello():
    return 'Hello, World!'

Finally, we will start the server by calling the run method on our app object.

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

Now, if we run our Python script, we will have an API running at http://localhost:5000/hello that returns the message "Hello, World!".

Fetching the API from React:

Now that we have our API running, we can fetch it from a React application using the Axios library. Axios is a popular library for making HTTP requests from JavaScript.

To start, create a new React project using the create-react-app tool. Then, install Axios by running npm install axios.

Next, open the App.js file and import the Axios library. Then, add a function called fetchAPI that makes an HTTP GET request to our API using Axios.

import axios from 'axios';

function fetchAPI() {
  axios.get('http://localhost:5000/hello')
    .then(response => console.log(response.data))
}

Finally, we can call the fetchAPI function when the component mounts by adding it to the componentDidMount lifecycle method.

class App extends React.Component {
  componentDidMount() {
    fetchAPI();
  }

  render() {
    return (
      // render code here
    );
  }
}

Now, when the React application is loaded, it will make an HTTP GET request to our API and log the response to the console.

Conclusion:

In this tutorial, we learned how to create an API in Python using the Flask library and fetch it from a React application using Axios. This is just a basic example, but the same principles can be applied to create more complex APIs and applications.