How to Install Axios in React to Communicate with APIs
So now that we know what the data's gonna look like, and also, the URL that we are going to access to grab our portfolio items, in the next few guides, we're gonna see what steps we need to take in order to implement the ability to go out and access that data and pull it directly into our application.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

So I'm going to try to break this into a little bit of a smaller set of guides than usual, and the reason for that is because I want you to understand each stage of this process because working with APIs, if you've never done it before, can be a little bit confusing, and so I wanna make sure that you understand everything that's going on at each stage of this development lifecycle.

So the very first thing we're gonna do is we're gonna go out and we're going to bring in a library that allows us to access different API endpoints. So, if you go to the npmjs.com site, so you can just go to the npm registry here, and type in a-x-i-o-s, and so this is Axios.

So what Axios is, is it is an npm library, it's a set of JavaScript code that allows us to call APIs and then access the data so that we can render the data in our application. You can definitely go through here and read all the documentation, we're going to follow these exact same steps for integrating this directly into the application, we're just gonna break it into a few different videos, just so it all makes sense.

So, as you can see right here, the command to run this is going to be npm install axios, so let's open up Visual Studio Code here, and let's open up our package.json file just so we can see Axios being added. You can see in our list of dependencies, we do not have it right now.

large

So if you open up your terminal and run npm i axios, and there are a few different commands. If you go through tutorials, you're gonna see all kinds of different commands, you may see npm install --save and then the name of the dependency.

But in the most modern versions, you can actually just type npm i, which is short for install, and then the name of the dependency, and if you're in a project with a package.json file, it'll automatically save that into the package.json. So you can just type npm i axios, hit return, and then this is gonna go out, it's gonna grab the Axios library, it's going to add it into our package.json file, and then like we've seen a few times before, it is then going to add the Axios code directly into our node module.

So you can see that that was added properly, and if you look now, you can see we have Axios has now been added directly into the project.

large

So that's all we're gonna do in this video, we've added Axios into our project, and so in the next guide, we're gonna see how we can use it to call an API.

Resources