Interacting with a server over HTTP is a core part of any web developer's job. Your user will navigate to a view within your app, expecting to see data presented to them in some manner. Sometimes this data is static and you don't have to request it from the backend. But most often, this data is dynamic or too large to store statically on the client. When this happens in your React app, it is necessary to use an HTTP client in order to make requests to the server containing the data you need.
In this guide, you will learn how to use the Axios HTTP client inside your React components in order to load a view based on a given response.
Let's get started!
Note: This guide assumes that you have already created or are working within a React app.
The first part of loading a view based on an HTTP response is to download and start using an HTTP client. In this guide, we have chosen Axios as our HTTP client library of choice. There are many alternatives! Fetch is a great native client that you can use if you are trying to restrict the number of dependencies you are using in your app.
To download Axios, navigate to your root project directory where your package.json
file is located, and run the command: npm install --save axios
. Now you have Axios installed inside your React project and can start using it!
In the code below, you will see the basic shell of a DinosaurView
component. This component's job is to request a list of dinosaurs from the server via HTTP and then render a list of Dino
components based on the response.
1class DinosaurView Extends React.Component {
2 constructor(props) {
3 super(props);
4
5 this.state = {
6 dinosaurs: []
7 }
8 }
9
10 componentDidMount() {
11 ...
12 }
13
14 render() {
15 ...
16 }
17}
You need to set our dinosaurs
state based on a list of dinosaurs requested within the componentDidMount
lifecycle method. The componentDidMount
lifecycle method will ensure that the dinosaur data is only requested after the initial render of the DinosaurView
component. This is helpful because you can display a simple loading screen while we wait for the request to complete.
Below is the updated code that shows how to use Axios to make a request to our private dinosaur API.
1import axios from 'axios';
2
3class DinosaurView Extends React.Component {
4 constructor(props) {
5 super(props);
6
7 this.state = {
8 dinosaurs: []
9 }
10 }
11
12 async componentDidMount() {
13 const dinoResponse = await axios.get(this.props.dinosaurUrl);
14 this.setState({ dinosaurs: dinoResponse.dinosaurs });
15 }
16
17 render() {
18 ...
19 }
20}
Wow, that was easy! In the above code, you first imported the Axios HTTP client library. Then, you marked componentDidMount
as an async
function. This enables the use of theawait
keyword in order to resolve the Promise
returned from the call to axios.get
. With the response successfully loaded, you then simply used the setState
function in order to set the dinosaurs
state of the component.
With your data requested, now it's time to load your view. Remember, this component simply wants to display a list of Dino
components. This can be achieved by implementing the following render
function.
1 ...
2
3 render() {
4 const dinosaurs =
5 this.state
6 .dinosaurs
7 .map(dino => <Dino name={dino.name} type={dino.type} roar={dino.roar} />);
8
9 return (
10 <ul>{dinosaurs}</ul>
11 )
12 }
13}
HTTP is almost imperative when it comes to dynamically loading views inside your React app. In order to interact with servers via HTTP, you need to use some sort of HTTP client on the frontend. You can use Axios, the native Fetch client, or any of the other HTTP client NPM packages available for download.
Of course, HTTP isn't the only way! GraphQL is becoming a popular choice when it comes to loading views based on requested data from the backend. For more information about GraphQL, please check out the GraphQL documentation.