- Read Tutorial
- Watch Guide Video
Now, what I want you to do, because this video's gonna be pretty short, is I want you to spend a decent amount of time afterwards exploring the two libraries and their documentation, and part of the reason for that is something I mentioned earlier on in the course.
Because this is more advanced, you're getting really close to being able to build these types of applications and other JavaScript in whatever stack that you're in, applications, and a big part of your time is gonna be spent analyzing the documentation for libraries that you're gonna use.
So I really want you to get in the habit of doing that because there have been so many times where there'd been a package or some type of library that I'd been using for a while and I hadn't really gone through the documentation like I should have and it wasn't until sometimes years later that I realized that that library could do so much more than I ever thought possible and so because of that, it's always a really good idea to see everything that that package is going to cover and how to write with it and what it's really used for and you're also going to see when you do that how it fits in with the entire architecture of your system.
So the two libraries that we're going to work with today are gonna be Axios and if you've ever worked with any of the other courses that I've taught you on with React, then you're already probably a little familiar with axios and so axios is a library that allows you to make HTTP requests so it allows you to have your application, communicate with an outside API which we're about to start doing.
We're gonna give the ability to communicate with a outside API so that we can perform authentication and eventually create posts, upload images, do all of those kinds of things. So we're gonna use Axios and so definitely start going through the axios documentation here and this has all kinds of great examples and one thing I will point out, I have been using axios for a long time but I didn't know until later on that I could actually make parallel calls to different APIs all at the same time and have axios wrap all of those calls up. So great example's right here in the documentation.
I can create a couple of axios calls. So say I could call and get a user like they are in this case. And then I could go get that user's set of permissions. If those are two different API endpoints, I could create separate functions that perform that task, and then axios will actually run those right next to each other.
So you could say grab me the user. Then grab me that user's set of permissions and then you can extract all of that data all at once. So many times in the past, I created separate functions that had separate handlers for what to do with the data. Here, you can actually combine them which is incredibly convenient and after I found out by going through the documentation that axios could do this, I started being able to even streamline some of my own API calls.
So just one example of that happening with me. So definitely look through this documentation. I think you're gonna be able to learn quite a bit about axios, even more maybe than you already know about.
So now, that's one. Let's go to the next one. And npm JS is just kind of the repository, it's the resource or directory for where you can search for all these libraries. The next one is pretty cool. It's expo-secure-store.
So let's grab this and let's go take a look at this documentation. And there's a documentation page here on npm. I personally usually like to look at their own documentation page 'cause it's usually a little bit more up to date and extensive. So what SecureStore allows us to do is it allows us to store some items about the user directly on the device so if you went through my React course where we used cookies for authentication, then this might seem familiar to you and so whenever you're building a iOS or an Android app, you can't use cookies because we're not in the browser.
We're in an application on a device and so because of that, we have to use a different way of storing information about the user. Now, I'm not talking about information like the user's name or email address or anything like that. We're gonna use global state in order to do that. What I'm talking about is we need the ability to secure an encrypted token on the device so that whenever we make a request out to another API, then we're gonna be passing that token to the API and then the API's gonna check to see if that user is who they say they are.
That's a really neat way of doing it and if you've never used something like local storage before, then this is going to be a very good use of your time to explore exactly what SecureStore does. So go through all of this documentation and get a feel just for some of the functions that are available and then we're gonna go in over the next few guides and we're gonna actually start using these.
Definitely go through that documentation, not just so you can see how to work with the library but also if this is a new concept for you, this is a way where you can almost reverse engineer your knowledge. You're gonna be able to learn how to use secure tokens by seeing how it's implemented. So let's install these both and then after that, then I want you to go through that documentation.
So the installation process is, I'm gonna open up Visual Studio code here and I'm gonna open up the terminal and I'm just gonna say yarn add, and the first one is axios and then the next one is gonna be expo-secure-store.
terminal
yarn add axios expo-secure-store
So I'm going to hit Return there. Yarn is then going to go and it's gonna grab both of those libraries and assuming everything works, I didn't have a typo, it is going to install them, so those are installed.
You can also verify the installation by simply going to the package.json file and now you can see that it added axios with a specific version number and then expo-secure-store with another version number.
Now, if you're following along in this course and it's a couple years from now, then your version numbers are probably gonna be a little bit different but that's perfectly fine. So now that you've gone through that, you have both axios and expo-secure-store installed in your application.
Now take some time and go and research those libraries and in the next guide, we are gonna go sign up for an account on DevCamp Space where we're gonna be able to have a visual and see all of the data of our application.