In this section we're going to start working on loading up some data into our re-act application.
So let's get to it here's the general idea.
Our application is going to be running inside a user's browser.
Once they enter a search term and then hits hits enter We are going to make a Ajax request or a network
request over to API called the splash API.
Sunsplash is a company that focuses on stock images or essentially images of all types.
If we send them a request to get back a list of images with some keywords like say cars or plants or
flowers or whatever it is the splash API will send us back a big list of Sun Records this Jason is going
to contain information about a bunch of different pictures matching our search request.
We can then take that on and use it to render a big list of images on the screen and then remember that
one of our application we want to take those images and to show them as a flat list.
And then after we get that working we'll start to focus on kind of tiling them out in a nice little
format like so.
OK.
So let's take a look at the splash API and get a better idea of how it works.
Here's a link to the documentation.
So going to take that link and I'll open up a new browser tab and navigate over there.
All right.
So this is the developer's page on Slashdot com slash developers.
The first thing that we need to do is register as a developer Zeo click on that link either right there
on the left hand side or up at the top right hand side and then you can enter in some information to
create a new account.
So once you log in to their service we can go to your apps up here at the top and you'll be prompted
to create a new application the splash API has the ability for you to make separate applications as
they refer to them with their service.
These are essential essentially different little records that record your interaction with their API.
So we're going to find the button to create a new application.
They're going to ask you to accept a couple of rules right here and we're just going to say yup I agree
with these rules and then I'll accept terms on the bottom right.
And then we get prompted for a application name now for this application.
You can give it any name you wish.
There is no use to this name except for you to be able to recognize your application when you log into
the splash dashboard.
So I'll call mine re-act pics and then I'll give it a quick description of show a list of images and
I'll create the application.
OK.
So you're going to see the first thing right here says apply for production that does not apply to us.
We're not going to be using this API in a fully production application when they apply for production
right here what they're really talking about is getting access to a huge amount of images or a huge
amount of requests.
Right now our application if you scroll down a little bit further is in a development mode you're going
to see that our requests are the number of requests that we make to their API gets tracked over time.
And the rule is that you can only make 50 requests per hour.
Now it might sound like you would overwrite that or go over that limit very quickly but in practice
I think you'll be really surprised.
It's actually kind of hard to get over this request limits if you do hit the request limit and you go
over 50 requests per hour.
You could always just create a second app or a second account and get a new API you to go with it.
Speaking of API key you'll see a little bit lower right here is the API key or the access key that we
are going to need to get access to the splash API.
So you can either copy this key right here or just we'll come back later on either copy it onto some
other document right now that you could so you can get easy access to it but we'll will come back to
this page in just a little bit to get the key.
If you don't want to.
All right now Leslie I want to show you is up at the very top you can find the documentation tab and
it will tell you a little bit more about how to get started with the API.
You can find a link on the top right here that says Search photos by keyword or you can look on the
left hand side and go down to the search section.
And we want to specifically search photos.
We don't want to search collections.
We want to search photos.
All right so this will show us some information about how to make a request to search for some photos.
We'll talk more about exactly how we're going to use this end point in a circuit.
But right now let's take a quick break.
We'll come back to the next section.
We'll talk about exactly how we are going to issue a network request from our re-act application.
So a quick pause and I'll see you in just a minute.