In the last section we pulled up the documentation for searching photos on the splash API.
Now before we start to get too far into this documentation we need to first discuss exactly how we're
going to make a request from inside of re-act application.
So we're going to see this documentation open.
We're going to come back to it on just a little bit.
All right so quick diagram here.
The first thing I want you to understand is that it's not going to be the job of the re-act library
itself to make request over to that on Splash API react as a library like all the code inside of it
is only about showing HTL to our users or showing content to our users and interacting or handling user
interaction to actually make a network request or a Ajax request to get some information is going to
be the job of some separate piece of code inside of our app.
Now this Ajax client right here or essentially the thing we're going to use to make a request over to
the splash API.
Oh we've got a couple of different options on what we use exactly for this.
I'm going to show you two of the most commonly used options in re-act applications.
What ultimately we're going to settle on one option or actually handing all this networking stuff.
OK.
So these are two different software libraries.
Technically fetch is not a library but we'll just brush over that for a second that are frequently used
in re-act applications for managing network requests and fetching some amount of data.
Actually this is a standalone third party package that can be very easily installed into a react project
using and PM you and I eventually are going to be using axes.
The other option is the fetch function.
Now unlike X-C else this is not a separate package.
It is a singular function that is built into almost all modern browsers.
So with fecche we don't have to install any third party packages which means that our final application
size or the amount of code we have to send down to a user's browser is slightly smaller if we make use
of fetch over ASIO's.
However on the flip side batch is a far more basic and lower level function to use to fetch data.
It's not the worst thing in the world but to be honest with you if you use fetch you're going to end
up having to write a lot of code that is already written for you in ASIO's.
That's kind of a question of do it yourself with fetch and maybe not do the best job in the world unless
you really know what you're doing.
Or just use X-ers and all the nuts and bolts and fine grained details are going to be taken care of
for you.
Personally I use X-ers on all of my projects that I work on personal and professional because ASIO's
handles network requests in a very predictable fashion but fetch has a couple of corner cases that are
really just not great to work with.
Now the only reason I mentioned these two separate competing solutions is that you will see a lot of
documentation referring to the fetch function.
So if you want to you could absolutely fetch but I highly recommend you give ASIO's a shot because it
makes the developer experience just much much nicer.
OK.
So that's my little two cents on this.
So we're going to first install Axel's as a third party package and then we're going to use it to make
a request over to the splash API so to install X-ers I'm going to flip on over to my code editor and
find my running project right here.
Now I'm going to start the project with control C and then I'll install X-posts with NPM install dash
dash save ASIO's like cell.
All right.
So this will only take two or three seconds to install.
Otherwise I would have something else to say.
There we go.
All right.
Let's start this back out some going to start my server back up with NPM start and I'll just let that
do its thing.
So now I'm going to find my app file and it's on my app file.
I'm going to import x CEOs from X sales.
Now traditionally by convention we usually put imports for third party packages or dependencies that
are installed into our project above import statements for files that you and I create.
So by convention I would want to put the import statement for X use above the one for search bar.
There's not a technical reason for us for this.
Again it is just convention.
So now we can make use of X-posts to make request over to the splash API.
We definitely want to make the request.
When a user submits a search term or when this function gets called right here rather than cancel logging
out a term we will replace it with a call to the axioms function before going through that entire process.
Let's take a quick pause because we are going to end up having to put a decent amount of code in here
so quick pause and we'll write this stuff out in the next section.