1
00:00:00,950 --> 00:00:05,770
In the last section we pulled up the documentation for searching photos on the splash API.

2
00:00:05,990 --> 00:00:10,790
Now before we start to get too far into this documentation we need to first discuss exactly how we're

3
00:00:10,790 --> 00:00:13,670
going to make a request from inside of re-act application.

4
00:00:13,880 --> 00:00:15,650
So we're going to see this documentation open.

5
00:00:15,650 --> 00:00:17,720
We're going to come back to it on just a little bit.

6
00:00:18,500 --> 00:00:20,480
All right so quick diagram here.

7
00:00:20,480 --> 00:00:24,800
The first thing I want you to understand is that it's not going to be the job of the re-act library

8
00:00:24,800 --> 00:00:31,610
itself to make request over to that on Splash API react as a library like all the code inside of it

9
00:00:31,820 --> 00:00:38,240
is only about showing HTL to our users or showing content to our users and interacting or handling user

10
00:00:38,240 --> 00:00:44,450
interaction to actually make a network request or a Ajax request to get some information is going to

11
00:00:44,450 --> 00:00:48,040
be the job of some separate piece of code inside of our app.

12
00:00:48,290 --> 00:00:53,240
Now this Ajax client right here or essentially the thing we're going to use to make a request over to

13
00:00:53,240 --> 00:00:54,630
the splash API.

14
00:00:54,750 --> 00:00:58,460
Oh we've got a couple of different options on what we use exactly for this.

15
00:00:58,460 --> 00:01:02,370
I'm going to show you two of the most commonly used options in re-act applications.

16
00:01:02,510 --> 00:01:08,570
What ultimately we're going to settle on one option or actually handing all this networking stuff.

17
00:01:08,570 --> 00:01:08,930
OK.

18
00:01:08,960 --> 00:01:11,450
So these are two different software libraries.

19
00:01:11,630 --> 00:01:15,860
Technically fetch is not a library but we'll just brush over that for a second that are frequently used

20
00:01:15,950 --> 00:01:21,560
in re-act applications for managing network requests and fetching some amount of data.

21
00:01:21,580 --> 00:01:26,930
Actually this is a standalone third party package that can be very easily installed into a react project

22
00:01:27,020 --> 00:01:32,370
using and PM you and I eventually are going to be using axes.

23
00:01:32,420 --> 00:01:35,630
The other option is the fetch function.

24
00:01:35,660 --> 00:01:38,220
Now unlike X-C else this is not a separate package.

25
00:01:38,240 --> 00:01:43,100
It is a singular function that is built into almost all modern browsers.

26
00:01:43,430 --> 00:01:48,560
So with fecche we don't have to install any third party packages which means that our final application

27
00:01:48,560 --> 00:01:54,620
size or the amount of code we have to send down to a user's browser is slightly smaller if we make use

28
00:01:54,620 --> 00:01:56,400
of fetch over ASIO's.

29
00:01:56,720 --> 00:02:04,210
However on the flip side batch is a far more basic and lower level function to use to fetch data.

30
00:02:04,490 --> 00:02:09,530
It's not the worst thing in the world but to be honest with you if you use fetch you're going to end

31
00:02:09,530 --> 00:02:14,620
up having to write a lot of code that is already written for you in ASIO's.

32
00:02:14,990 --> 00:02:20,450
That's kind of a question of do it yourself with fetch and maybe not do the best job in the world unless

33
00:02:20,450 --> 00:02:21,760
you really know what you're doing.

34
00:02:21,860 --> 00:02:27,650
Or just use X-ers and all the nuts and bolts and fine grained details are going to be taken care of

35
00:02:27,650 --> 00:02:28,240
for you.

36
00:02:29,480 --> 00:02:34,940
Personally I use X-ers on all of my projects that I work on personal and professional because ASIO's

37
00:02:34,970 --> 00:02:40,970
handles network requests in a very predictable fashion but fetch has a couple of corner cases that are

38
00:02:41,060 --> 00:02:44,270
really just not great to work with.

39
00:02:44,270 --> 00:02:48,620
Now the only reason I mentioned these two separate competing solutions is that you will see a lot of

40
00:02:48,620 --> 00:02:51,400
documentation referring to the fetch function.

41
00:02:51,410 --> 00:02:57,680
So if you want to you could absolutely fetch but I highly recommend you give ASIO's a shot because it

42
00:02:57,680 --> 00:03:01,330
makes the developer experience just much much nicer.

43
00:03:01,630 --> 00:03:01,870
OK.

44
00:03:01,910 --> 00:03:03,690
So that's my little two cents on this.

45
00:03:03,710 --> 00:03:08,420
So we're going to first install Axel's as a third party package and then we're going to use it to make

46
00:03:08,450 --> 00:03:15,560
a request over to the splash API so to install X-ers I'm going to flip on over to my code editor and

47
00:03:15,560 --> 00:03:17,810
find my running project right here.

48
00:03:17,840 --> 00:03:24,140
Now I'm going to start the project with control C and then I'll install X-posts with NPM install dash

49
00:03:24,140 --> 00:03:30,210
dash save ASIO's like cell.

50
00:03:30,220 --> 00:03:30,550
All right.

51
00:03:30,550 --> 00:03:33,100
So this will only take two or three seconds to install.

52
00:03:33,100 --> 00:03:35,860
Otherwise I would have something else to say.

53
00:03:35,860 --> 00:03:36,340
There we go.

54
00:03:36,340 --> 00:03:36,560
All right.

55
00:03:36,580 --> 00:03:42,210
Let's start this back out some going to start my server back up with NPM start and I'll just let that

56
00:03:42,210 --> 00:03:43,150
do its thing.

57
00:03:43,530 --> 00:03:47,430
So now I'm going to find my app file and it's on my app file.

58
00:03:47,430 --> 00:03:51,880
I'm going to import x CEOs from X sales.

59
00:03:51,920 --> 00:03:57,840
Now traditionally by convention we usually put imports for third party packages or dependencies that

60
00:03:57,840 --> 00:04:02,720
are installed into our project above import statements for files that you and I create.

61
00:04:02,910 --> 00:04:09,340
So by convention I would want to put the import statement for X use above the one for search bar.

62
00:04:09,360 --> 00:04:11,570
There's not a technical reason for us for this.

63
00:04:11,580 --> 00:04:13,340
Again it is just convention.

64
00:04:13,620 --> 00:04:18,400
So now we can make use of X-posts to make request over to the splash API.

65
00:04:18,750 --> 00:04:20,250
We definitely want to make the request.

66
00:04:20,310 --> 00:04:26,460
When a user submits a search term or when this function gets called right here rather than cancel logging

67
00:04:26,490 --> 00:04:32,820
out a term we will replace it with a call to the axioms function before going through that entire process.

68
00:04:32,820 --> 00:04:37,230
Let's take a quick pause because we are going to end up having to put a decent amount of code in here

69
00:04:37,440 --> 00:04:40,550
so quick pause and we'll write this stuff out in the next section.