Tutorial: How to make HTTP Requests in

React, Part 3
Mae Capozzi
Dec 10, 2017 · 4 min read

If you haven’t completed part 1 and part 2 of this tutorial, please do so before starting part
3.

Now we’re getting to the good part! So far, we’ve set up a new React application using
create-react-app, and we’ve wired up our component to log ‘Success!’ when we click
the button. Now, we need to make the actual HTTP request.

When I was first learning React, I wasn’t sure whether there was a built-in way to make
HTTP requests. There isn’t. We’ll have to rely on third-party services to make our
requests. I prefer axios, but there are other options, like Superagent or fetch. We’ll be
using axios in this tutorial.

Step 1: Install axios

We’ll install axios using npm :

npm install axios -S

Once we’ve installed it, we can take a look at the docs and begin writing our first HTTP
request. Sidenote: Axios uses Promises. If you aren’t familiar with Promises, you might
want to read a bit more about them and then come back.

As a quick reminder, our goal is to get back a user’s name from the /users/:username

endpoint.

Step 2: Write a get request

First, let’s add state to our component. We’ll add a username attribute to it and set it as
an empty string. Once we add state, our constructor will look like this:

constructor () {
super()
this.state = {
username: ''
}

this.handleClick = this.handleClick.bind(this)
}

Next, in our handleClick function, we’ll make a call to Github to get back the users.

First, we need to import axios into the file, so that we can use it. Put this line at the top
of your file, underneath where you’ve imported ./App.css .

import axios from 'axios'

Then, we can begin to construct our request inside of the handleClick function.
 handleClick () {
axios.get('https://api.github.com/users/maecapozzi')
.then(response => console.log(response))
}

Let’s dissect what I’ve written above a bit. I’m following the syntax set out by axios and
making a get request to Github’s /users endpoint. That endpoint looks like this:

/users/:username

:username , above, represents any username you’d like. I replaced :username with
maecapozzi , which is my username. You can replace it with your own, and get your

own data back.

I use .then to tell my program to wait for the data to come back from Github, and
then, I log the response.

If you copy the code above, you’ll see that you’ve gotten back an object that represents
all of a user’s data in the console. It will look like this:

Now, I need to display this data in a way that is meaningful to my user. I want to get
back the user’s name from the request. To do so, I need to parse that data, set the
username attribute on my state, and then display it.
My handleClick function will look like this:

handleClick () {
axios.get('https://api.github.com/users/maecapozzi')
.then(response => this.setState({username: response.data.name}))
}

My render function will look like this:

render () {
return (
<div className='button__container'>
<button className='button' onClick={this.handleClick}>
Click Me
</button>
<p>{this.state.username}</p>
</div>
)
}

Let me run through how this application works.

1. User clicks a button. Button has an onClick event on it.

2. onClick event triggers the handleClick function.

3. handleClick function makes a request to the Github API, asking for user data for
the username sent to it. In this example, it gets back data for the username
“maecapozzi.”

4. handleClick waits for data to come back from Github using a Promise.

5. handleClick updates the username attribute on state with the name returned from
the Github API.

6. <p> tag displays whatever this.state.username is. When the button has not been
clicked, it will return an empty string, but once the button has been clicked and the
request has been completed, it will show the user’s name.

Now, on your screen, you should have something that looks like this, once you’ve
clicked your button:
And there you have it! You’ve made your first HTTP request in React! I’m including a
gist of the entire component below. You can also find this code here, in case you’d like
to clone it.

1 import React, { Component } from 'react'

2 import './App.css'
3
4 import axios from 'axios'
5
6 class App extends Component {
7 constructor () {
8 super()
9 this.state = {
10 username: ''
11 }
12
13 this.handleClick = this.handleClick.bind(this)
14 }
15
16 handleClick () {
17 axios.get('https://api.github.com/users/maecapozzi')
18 .then(response => this.setState({username: response.data.name}))
19 }
20
21 render () {
22 return (
23 <div className='button container'>
 __
24 <button className='button' onClick={this.handleClick}>Click Me</button>
25 <p>{this.state.username}</p>
26 </div>
27 )
28 }
29 }
30 export default App

HTTPRequestsInReact.js hosted with ❤ by GitHub view raw

Please let me know if you have any questions or comments below, and please clap if this
tutorial has been helpful to you!

Hackernoon Newsle er curates great stories

by real tech professionals
Get solid gold sent to your inbox. Every week!

Email

First Name Last Name

Sign Up

If you are ok with us sending you updates via email, please ck the box.
Unsubscribe whenever you want.

Terms of Service

I agree to leave medium.com and submit this informa on, which will be collected
and used according to Upscribe's privacy policy.

Powered by Upscribe
 Sign up for Get Better Tech Emails via HackerNoon.com
By HackerNoon.com

how hackers start their afternoons. the real shit is on hackernoon.com. Take a look.

Emails will be sent to tahirgabol2000@gmail.com.

Get this newsletter
Not you?

JavaScript Computer Science Programming Coding React

About Help Legal

Get the Medium app