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 request. HTTP 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 and begin writing our first HTTP request. Axios uses Promises. If you aren’t familiar with Promises, you might want to and then come back. docs Sidenote: read a bit more about them As a quick reminder, our goal is to get back a user’s name from the endpoint. /users/:username 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: () { ( .state = {username: ''} constructor super )this .handleClick = .handleClick.bind( )} this this this Next, in our function, we’ll make a call to Github to get back the users. handleClick 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 axios 'axios' import from Then, we can begin to construct our request inside of the function. handleClick 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 endpoint. That endpoint looks like this: /users /users/:username , above, represents any username you’d like. I replaced with , which is my username. You can replace it with your own, and get your own data back. :username :username maecapozzi I use to tell my program to wait for the data to come back from Github, and then, I log the response. .then If you copy the 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: code 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 function will look like this: handleClick handleClick () {axios.get('https://api.github.com/users/maecapozzi').then(response .setState({username: response.data.name}))} => this My function will look like this: render render () { (<div className='button__container'><button className='button' onClick={ .handleClick}>Click Me</button><p>{ .state.username}</p></div>)} return this this Let me run through how this application works. User clicks a button. Button has an onClick event on it. onClick event triggers the handleClick function. 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.” handleClick waits for data to come back from Github using a Promise. handleClick updates the username attribute on state with the name returned from the Github API. tag displays whatever 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. <p> this.state.username 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 , in case you’d like to clone it. here Please let me know if you have any questions or comments below, and please clap if this tutorial has been helpful to you!
