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.
