API calls with Axios in React

This is just a quick guide to setting up a new react app and using the Axios package receive a response from a dummy endpoint. For my own personal reference as this seems to be something I forget how to accomplish time and time again. Despite its simplicity!

  1. Make sure you have node.js installed.
  2. Open a new command line, cd into wherever you want to create the app, and enter the following to generate a new react app:
npx create-react-app axios-api

3. Once the setup has finished, cd into the project folder (cd axios-api), and install axios using npm by running the below in the command line:

npm install axios --save

4. Open the project in whatever IDE you prefer, if you have Visual Studio Code installed you can open it from the command line, if you are following on from the previous :

code .

5. In the project, open src/App.js:

6. At the top of the file Import Axios:

import axios from 'axios'

7. Replace the App function with a basic Class component:

class App extends React.Component {
  render() {
    return(
      <div></div>
    )
  }
}

8. Add state to contain the response from the API call (In this example the response will contain a list of users):

class App extends React.Component {

  state = {
    users: []
  }

  render() {
    return(
      <div></div>
    )
  }
}

9. Create a componentDidMount() lifecycle method (which executes when the component initially loads), and a function to make the API call when the component loads:

class App extends React.Component {

  state = {
    users: []
  }

  componentDidMount() {
    this.fetchUsers();
  }

  fetchUsers = () => {
    
  }

  render() {
    return(
      <div></div>
    )
  }
}

10. Define the endpoint URL in the fetchUsers() function as a variable:

fetchUsers = () => {
    const endpoint = 'https://joaosilgo.github.io/dummy_db/users.json';
}

11. Make the call to the endpoint using axios, updating the function to an async function and await the response:

fetchUsers = async () => {
    const endpoint = 'https://joaosilgo.github.io/dummy_db/users.json';
    const resp = await axios.get(endpoint);
}

12. Store the response data in a new variable we’ll call ‘data’:

fetchUsers = async () => {
    const endpoint = 'https://joaosilgo.github.io/dummy_db/users.json';
    const resp = await axios.get(endpoint);
    const data = resp.data;
    console.log(data);
}

13. We’ve also logged ‘data’ to the console so we can confirm we do in fact have an array that we can set to our users state:

14. Now lets store this array in our state:

fetchUsers = async () => {
    const endpoint = 'https://joaosilgo.github.io/dummy_db/users.json';
    const resp = await axios.get(endpoint);
    const data = resp.data;
    this.setState({
      users: data
    });
}

We can confirm that our state contains the response array by console logging it with:

console.log(this.state.users);

15. Now with our response data stored in state, we can iterate through the array in our return method:

return(
      <div>
        {this.state.users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))} 
      </div>
)

If you start the project with ‘npm start’ you’ll see the user names in the template: