Learn How to Use the `axios-http` Library in your React App to Make API Calls over HTTP

1: Intro

2: Why API Calls?

• Get Existing Data to use in your components. You may be rendering a list of items, but can't hardcode these into the component. This is because items could be added, updated or deleted from the backend API server's database. An item may have been updated or deleted from the database.
  
  But without an API call, there will be no way to know. This will necessitate fetching the fresh centrally-persisted data and not use stale hard-coded data.
  
  This is the work of the HTTP `GET` method.
  
  
• Add New Data: You may have a component with a form that collects data (user registration, posting a new comment, creating a new blog post, writing a new status update, uploading a photo or video, etc.)
  
  That data needs to be saved somewhere persistent that can be accessed now and in the future for use by the current React app and, possibly, other apps.
  
  Making a `POST` call over HTTP to the backend API server will help achieve this.
  
  
• Update Existing Data: The body of the blog post you published may need to be updated.
  
  Or, a user may need to change the city and country listed in his/her social profile.
  
  Or, a picture or post may need to be marked as "unpublished" so that it can't be seen by other than the original poster (or by anyone, for that matter).
  
  Or, some other piece of data may need to be changed.
  
  Whatever it is, making an `UPDATE` call to the API server will help ensure that you render updated and currently-accurate data in your React components.
  
  
• Remove Unneeded Data: Does a comment need to be removed? Does a picture have to be deleted from an album? Does a conversation thread have to be removed from a group/forum?
  
  A `DELETE` call over HTTP to the backend API server will take care of this.
  
  Whatever you need to do to make sure that you manage the dynamic data you will be using in your components, an API call will go a long way in helping make it a reality.

3: Why Axios?

• Fetch API: This is a global JavaScript function that you can use to make HTTP calls from any valid JavaScript file, whether in a backend or frontend app. It needs no installation or special configurations to work.
  
  
• axios-http: This is one of the most popular HTTP libraries in the JavaScript/NodeJS community. It can be used in a backend app (using the ExpressJS framework, for instance) or a frontend app like React or Angular.

• can make more custom configurations of your base API-calling object
  
  
• have more than one way of making API calls. We will go into details about this later.

4: Installation and Setup

• create a new React app (using either CRA or Vite)
  
  
• install `Axios` (so that we can use it within the React app)
  
  
• organize the folders and files to hold the API-calling logic that will use `Axios`.

1. Create a React App: Create a new React app using either "Create React App" (CRA) or Vite. I will call mine `blogios` (to make it sound cool and akin to the `axios` name.)
   
   
2. Install Axios: `cd` into the React app (which I will, henceforth, just call "blogios") and install `Axios` using either:
   
   
   • `npm install axios`: if you are using NPM.
     
     
   • `yarn add axios`: if you are using Vite
     
     Upon successful installation, you should find that `axios`:
     
     
   • is listed inside both the `package.json` and `package-lock.json` files inside the root directory of your React app
     
     
   • now has a folder inside your React app's `node_modules/` folder (which would be `node_modules/axios/` and contains the folders and files for the Axios package.)
     
     
3. Create an API Folder: Next, create an `apis` folder inside the `src/` folder of your React app.
   
   The new `src/apis/` folder will now hold any files relating to your API-calling logic.
   
   You can call this folder `api`, `myApi` or anything else that is sensible and memorable (for you and your fellow/future team members.)
   
   I just called it `apis` in this case to give it a memorable and responsible name. The name doesn't really matter from a technical perspective.
   
   So:
   
   

   
   cd src && mkdir apis
   

5: Create an Axios Instance

//  apis/index.js
import axios from 'axios';

const HttpRequestHeaders = {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json',
}


const myAxios = axios.create({
    baseURL: 'https://jsonplaceholder.typicode.com/',
    headers: HttpRequestHeaders,
})

export default myAxios;

6: Create the API Object

• Your API backend may have multiple API endpoints that your React app may need to call. We may have the `/users/`, `/posts/`, `/comments/`, and so on, API endpoints. So, we will create one API class/object for each of these endpoints. You can create these using JavaScript classes (which we will use here) or using custom React hooks (which are basically JavaScript functions; we won't cover that here.)
  
  
• Each API object should have one function/method whose sole purpose is to make exactly one CRUD call to the API endpoint. So, an API class method can make an HTTP call to fetch/get one blog post from the backend. But the same function should not be used to make a `POST` call to the API server to submit/create a new blog post. That's a no-no.
  
  
• You can reuse the endpoint-specific API object (and its methods) in as many places and components of your React app as you want. The type of input (fed into the object) and output (i.e. response from the API server) will be of the same type.

• `BlogPostList`: (which, as you may have guessed, will list the blog posts available).
  
  
• `NewBlogPost`: This component will enable you to write up and publish a new blog post.

1. Create the API file
   
   

   
   cd src/apis && touch BlogPostApi.js
   

2. Create the logic for the API calls to the `posts/` endpoint
   
   

   
   import myAxios from ".";
   
   class BlogPostApi {
       //  A custom object to make CRUD calls 
       //  against the 'jsonplaceholder.typicode.com/posts' endpoint.
   
       static getAllPosts(){
           return myAxios.get(`posts/`);
       }
   
       static getPost(post_id){
           return myAxios.get(`posts/${post_id}`);
       }
   
       static newPost(new_post){
           return myAxios.post(`posts`, new_post)
       }
   
       static updatePost(post_id, updated_post){
           // Replace the existing post (in the API backend) with the new `updated_post` object
           return myAxios.put(`posts/${post_id}`, updated_post)
       }
   
       static deletePost(post_url){
           return myAxios.delete(`posts/${post_id}`);
       }
   
   }
   
   export default BlogPostApi;
   

   Remember to export the API object so that we can import and reuse it in other parts of our React app. This would be in the app's components, state management files, and so on, depending on the needs, structure and complexity of your React app.

    

   Do note that you can also create class methods to handle filtering for matching objects in your API backends.

    

   For example, you may want to create a class method to make a `GET` API call, filter for all the matching blog posts and return them as the HTTP Response from the call.

    

   So, you can have a class method (for the `BlogPostApi` object) like this:

    

   
   static getPostsInCategory(categoryId){
           return myAxios.get(`posts?category=${categoryId}`)
       }
   

   This method will make an API call and filter the blog posts to get only those that belong to a certain blog category. This would be useful if you have a `CategoryComponent` which renders only the posts in a matching category (say, "poetry", "tech", "business", etc.) We don't need it in our example here, which is why we omitted it.

    

   7: Use the API Object in the Components

   Now that you have created the `BlogPostApi` API class/object, let's look at how to properly use it in our React app's components.

    

   Let's do this step-by-step:

    

   1. Create a `components` folder inside the `src/` directory of your React app, like this:

    

   
   cd src && mkdir components
   

   This new `src/components/` folder will hold the files for the components of our app.

    

   7.1: Make `GET` Calls to the API Backend

   2. Create a `BlogPostList.js` file inside the new `src/components/` folder.

    

   
   cd components && touch BlogPostList.js
   

   3. Create a namesake `BlogPostList` component and add its logic and UI to the `BlogPostList.js` file

    

   
   import React, {useState, useEffect} from 'react'
   import BlogPostApi from '../apis/BlogPostApi'
   
   const BlogPostList = () => {
       const [posts, setPosts] = useState([])
       const [apiError, setApiError] = useState("")
   
       function getPosts(){
           BlogPostApi.getAllPosts()
               .then(response => setPosts(response.data))
               .catch(error => setApiError("Error! No blog posts were found."))
       }
   
       useEffect(() => {
           getPosts()
       }, [])
   
       return (
           <div>
               {apiError && (<p style={{color:'red'}}> {apiError} </p>)}
   
               <h3> List of Blog Posts</h3>
               <ul>
               {posts.map(post => (
                   <li key={post.id}>
                       <a href={post.id}> {post.title} </a> 
                   </li>
                   ))}
               </ul>
           </div>
       )
   }
   
   export default BlogPostList
   

   Now, open your app in the browser. If you have an internet connection (and have correctly coded the API object and component), your app should:

    

   • make a call to the "https://jsonplaceholder.typicode.com/posts/" API endpoint
     
     
   • return and render a list of blog posts found at that endpoint (which could be a lot. But we won't be handling pagination here, unfortunately.)
   
   If you encounter errors, please, retrace your steps (from the `BlogPostApi` object to the `BlogPostList` component code) and fix them. Use the browser's "Dev Tools" to fish for bugs and warnings that may be causing your app not to work properly.
    
   If you encounter an unusually "stubborn" error, please, let us know in the comments section at the end of this guide.

    

   7.2 Make API Calls to DELETE Objects from the API Endpoint

   In the `BlogPostList` component we just covered, you saw how we can make API calls to fetch (aka "GET") data from a backend server.

    

   Now, take a look at how to delete objects from your components and let that reflect in your API backend (where the object will also be deleted) at the same time.

    

   We will use the same `BlogPostList` component and the `BlogPostApi` API object to demonstrate how to make an HTTP `DELETE` call to the API server.

    

   So, let's add a simple "X" button next to each blog post in the list. Once that button is clicked, an API call will be made to the API backend to remove the associated post from the list of published posts.

    

   Let's update the `BlogPostList` component to reflect that:

    

   
   // src/components/BlogPostList.js file
   
   import React, {useState, useEffect} from 'react'
   import BlogPostApi from '../apis/BlogPostApi'
   
   const BlogPostList = () => {
       const [posts, setPosts] = useState([])
       const [apiError, setApiError] = useState("")
       const [postDeleted, setPostDeleted] = useState(false)
       const [postDeleteError, setPostDeleteError] = useState("")
   
       function getPosts(){
           BlogPostApi.getAllPosts()
               .then(response => setPosts(response.data))
               .catch(error => setApiError("Error! No blog posts were found."))
       }
   
       function deletePost(post_id){
           BlogPostApi.deletePost(post_id)
               .then(response => setPostDeleted(true))
               .catch(err => setPostDeleteError("Sorry, that post could not be deleted."))
       }
   
       useEffect(() => {
           getPosts()
       }, [postDeleted])
   
       return (
           <div>
               {apiError && (<p style={{color:'red'}}> {apiError} </p>)}
   
               <h3> List of Blog Posts</h3>
               {postDeleteError && <p style={{color:'orange'}}> {postDeleteError} </p>}
               <ul>
               {posts.map(post => (
                   <li key={post.id}>
                       <button onClick={(e) => deletePost(post.id)}>X</button>
                       <a href={post.id}> {post.title} </a> 
                   </li>
                   ))}
               </ul>
           </div>
       )
   }
   
   export default BlogPostList
   

   
   You will notice with the updated `BlogPostList` component that:
   
   
   • There is a delete ("X") button next to each blog post (and an `onClick` event listener attached to each button)
     
     
   • Clicking the "delete"/"X" button will make the `onClick` event listener call the `deletePost()` event handler function to execute
     
     The `deletePost()` function will:
     
     
     • make an HTTP `DELETE` call to the backend API server using the `BlogPostApi.deletePost()` method
       
       
     • set the `postDeleted` component state to `true` if successful (it is `false` by default)
       
       
     • populate the `postDeleteError` state with an error message (if the `DELETE` API call was not successful.)
       
       
   • We passed the `postDeleted` state to the `useEffect()` hook's dependency array `[]` so that once a blog post is deleted, it triggers the component to make another API call to get the (updated) list of blog posts and re-render the component's UI.
     
     
   • The errors and/or updated list of blog post (minus the deleted one) are rendered in the component's UI.

    

   7.3 Make API Calls to CREATE New Objects

    

   Next, let's take a look at how to make an API call to submit new data to the API backend via the HTTP `POST` method.

    

   To achieve this, we will create a new aptly-named `NewBlogPost` component. It will use the same `BlogPostApi` object to make the API call to submit the new blog post's data.

    

   So:

    

   1. Create a new `NewBlogPost.js` file inside the `src/components/` folder of your React app.
      
      

      
      cd src && touch NewBlogPost.js
      

   2. Create the `NewBlogPost` component (logic, UI, etc.)
      
      

      
      import React, {useState} from 'react'
      import BlogPostApi from '../apis/BlogPostApi'
      
      const NewBlogPost = () => {
          const [title, setTitle] = useState("")
          const [body, setBody] = useState("")
          const [formError, setFormError] = useState("")
          const [newPost, setNewPost] = useState({})
          const [apiError, setApiError] = useState("")
          const [apiSuccess, setApiSuccess] = useState("")
      
          const submitPost = (e) => {
              e.preventDefault();
              if(title && body){
                  let newBlogPost = { title, body }
                  let blogPostJson = JSON.stringify(newBlogPost)
      
                  BlogPostApi.newPost(blogPostJson)
                      .then(response => {
                          setNewPost(response.data)
                          setApiSuccess("You have successfully-created a new blog post.")
                          setTitle("")
                          setBody("")
                      })
                      .catch(err => setApiError("Sorry, a new post could not be created."))
              }else {
                  setFormError("Please, fill out all form fields correctly.")
              }
          }
      
          return (
              <div>
      
                  <h3> Add a New Blog Post </h3>
                  {apiError && <p style={{'color':'orange'}}> {apiError} </p>}
                  {apiSuccess && <p style={{'color':'green'}}> {apiSuccess}: {newPost.title} </p>}
      
                  <form onSubmit={submitPost}>
                      {formError && <p style={{color:'red'}}> {formError} </p>}
                      
                      <input 
                          type="text"
                          value = {title}
                          onChange={(e) => setTitle(e.target.value)}
                          placeholder='Post Title'
                      />
                      <textarea
                          rows={10}
                          cols={13}
                          placeholder="Body of Post"
                          value={body}
                          onChange={(e) => setBody(e.target.value)}
                      />
      
                      <button type="submit"> Create New Post </button>
                  </form>
              </div>
          )
      }
      
      export default NewBlogPost
      
      
      

import React, {useState} from 'react'
import axios from "axios"

const NewBlogPost = () => {
    const [title, setTitle] = useState("")
    const [body, setBody] = useState("")
    const [formError, setFormError] = useState("")
    const [newPost, setNewPost] = useState({})
    const [apiError, setApiError] = useState("")
    const [apiSuccess, setApiSuccess] = useState("")

    const submitPost = (e) => {
        e.preventDefault();
        if(title && body){
            let newBlogPost = { title, body }
            let blogPostJson = JSON.stringify(newBlogPost)

            // BlogPostApi.newPost(blogPostJson)
            //     .then(response => {
            //         setNewPost(response.data)
            //         setApiSuccess("You have successfully-created a new blog post.")
            //         setTitle("")
            //         setBody("")
            //     })
            //     .catch(err => setApiError("Sorry, a new post could not be created."))
            
            axios({
                url: '/posts/',
                method: 'POST',
                data: blogPostJson,
                headers: {

                }
            })
        }else {
            setFormError("Please, fill out all form fields correctly.")
        }
    }

    return (
        <div>
            <h3> Add a New Blog Post </h3>
            {apiError && <p style={{'color':'orange'}}> {apiError} </p>}
            {apiSuccess && <p style={{'color':'green'}}> {apiSuccess}: {newPost.title} </p>}
            <form onSubmit={submitPost}>
                {formError && <p style={{color:'red'}}> {formError} </p>}
                
                <input 
                    type="text"
                    value = {title}
                    onChange={(e) => setTitle(e.target.value)}
                    placeholder='Post Title'
                />
                <textarea
                    rows={10}
                    cols={13}
                    placeholder="Body of Post"
                    value={body}
                    onChange={(e) => setBody(e.target.value)}
                />

                <button type="submit"> Create New Post </button>
            </form>
        </div>
    )
}

export default NewBlogPost