- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.620 --> 00:00:01.453
Welcome back.
2
00:00:01.453 --> 00:00:03.890
And I hope that axios is starting
3
00:00:03.890 --> 00:00:06.450
to make a little bit more sense to you
4
00:00:06.450 --> 00:00:11.090
and it's a very key component in our application
5
00:00:11.090 --> 00:00:14.330
because our application is gonna be service based,
6
00:00:14.330 --> 00:00:18.030
which means that it is going to be call an outside service,
7
00:00:18.030 --> 00:00:20.990
an outside API for its data.
8
00:00:20.990 --> 00:00:23.280
If we disconnected the API,
9
00:00:23.280 --> 00:00:25.270
then we're gonna have some issues.
10
00:00:25.270 --> 00:00:27.080
We're no longer gonna be able
11
00:00:27.080 --> 00:00:28.810
to pull in that data.
12
00:00:28.810 --> 00:00:32.010
So it's important to understand how that works.
13
00:00:32.010 --> 00:00:34.770
And it also teaches you something.
14
00:00:34.770 --> 00:00:36.930
It teaches you a concept called
15
00:00:36.930 --> 00:00:40.040
the request-response lifecycle,
16
00:00:40.040 --> 00:00:42.640
which means that we make requests
17
00:00:42.640 --> 00:00:46.190
to APIs and then we respond back
18
00:00:46.190 --> 00:00:49.510
or it responds back and then we make adjustments
19
00:00:49.510 --> 00:00:51.410
and in our case, what we're doing
20
00:00:51.410 --> 00:00:53.870
is we're rendering out content.
21
00:00:53.870 --> 00:00:56.020
And you're gonna see in a little bit
22
00:00:56.020 --> 00:01:00.080
how we're able to even interject some state elements
23
00:01:00.080 --> 00:01:02.090
into that process
24
00:01:02.090 --> 00:01:04.750
to be able to give our users some feedback
25
00:01:04.750 --> 00:01:06.160
on what's happening.
26
00:01:06.160 --> 00:01:09.100
So let's now, in this guide, 'cause I know that last one
27
00:01:09.100 --> 00:01:11.600
was very long, let's take a little bit
28
00:01:11.600 --> 00:01:13.520
of a shorter guide
29
00:01:13.520 --> 00:01:17.110
and let's just start adding in some data elements
30
00:01:17.110 --> 00:01:18.540
that we're gonna work with.
31
00:01:18.540 --> 00:01:20.560
So first and foremost,
32
00:01:20.560 --> 00:01:23.360
let's see what kind of data that we have access to.
33
00:01:23.360 --> 00:01:26.640
Now, we could simply go and look
34
00:01:26.640 --> 00:01:28.720
at the API endpoint again
35
00:01:28.720 --> 00:01:30.220
and that's one way of doing it
36
00:01:30.220 --> 00:01:32.100
but there's gonna be many times
37
00:01:32.100 --> 00:01:33.570
where you're not gonna be able
38
00:01:33.570 --> 00:01:38.570
to just paste in a API endpoint or URL
39
00:01:38.590 --> 00:01:40.600
and see the data in the browser
40
00:01:40.600 --> 00:01:42.810
because if you're ever having to work
41
00:01:42.810 --> 00:01:46.090
with an API that requires authentication,
42
00:01:46.090 --> 00:01:48.100
then you're not gonna really be able to do that.
43
00:01:48.100 --> 00:01:50.150
So in this guide, what I wanna do
44
00:01:50.150 --> 00:01:52.120
is show you how we can access
45
00:01:52.120 --> 00:01:54.330
and see all of the data
46
00:01:54.330 --> 00:01:57.900
in a much easier-to-read format.
47
00:01:57.900 --> 00:01:59.250
So I'm gonna zoom in here
48
00:01:59.250 --> 00:02:00.680
in the browser a little bit
49
00:02:00.680 --> 00:02:03.860
and so right now, we're printing out the name
50
00:02:03.860 --> 00:02:06.320
and then the description of our data
51
00:02:06.320 --> 00:02:08.140
but what if we wanna see everything?
52
00:02:08.140 --> 00:02:11.230
I'm gonna show you a pretty cool little trick here.
53
00:02:11.230 --> 00:02:13.890
So I'm gonna get rid of name and description
54
00:02:13.890 --> 00:02:17.320
and I'm gonna add what's called a pre tag.
55
00:02:17.320 --> 00:02:19.520
And this is just for debugging purposes
56
00:02:19.520 --> 00:02:22.680
but it is something that I do on a pretty regular basis
57
00:02:22.680 --> 00:02:24.220
and is very helpful.
58
00:02:24.220 --> 00:02:28.280
So inside of this pre tag, I'm gonna say JSON.
59
00:02:28.280 --> 00:02:30.900
So this is a JavaScript module here,
60
00:02:30.900 --> 00:02:34.990
dot stringify, so this is a function
61
00:02:34.990 --> 00:02:37.830
in the JavaScript module or the JSON module,
62
00:02:37.830 --> 00:02:40.740
and this takes a number of arguments.
63
00:02:40.740 --> 00:02:42.380
So first and foremost,
64
00:02:42.380 --> 00:02:45.160
I could just say props.item
65
00:02:45.160 --> 00:02:47.320
and if I hit save here,
66
00:02:47.320 --> 00:02:49.460
what you'll see on the right-hand side
67
00:02:49.460 --> 00:02:52.030
is that we have access to all of our data.
68
00:02:52.030 --> 00:02:53.300
And we're able to see it
69
00:02:53.300 --> 00:02:55.570
but it's not the most useful
70
00:02:55.570 --> 00:02:58.020
because you can't actually scroll
71
00:02:58.020 --> 00:03:00.250
to see each one of these data elements.
72
00:03:00.250 --> 00:03:02.320
It'd be better if I could place all
73
00:03:02.320 --> 00:03:04.210
of these on separate lines
74
00:03:04.210 --> 00:03:06.540
so that I could see what kind of keys
75
00:03:06.540 --> 00:03:08.520
and data points I have access to.
76
00:03:08.520 --> 00:03:11.660
Well, thankfully, JSON.stringify takes
77
00:03:11.660 --> 00:03:13.970
in a few optional arguments.
78
00:03:13.970 --> 00:03:15.920
So the next one we're gonna pass in,
79
00:03:15.920 --> 00:03:17.490
it's gonna be null
80
00:03:17.490 --> 00:03:22.490
and then if you are looking at your IDE up here,
81
00:03:22.880 --> 00:03:25.410
it actually is telling you what stringify takes in.
82
00:03:25.410 --> 00:03:26.870
The first item's required
83
00:03:26.870 --> 00:03:28.190
and it's the value.
84
00:03:28.190 --> 00:03:30.960
The next one is gonna be the replacer,
85
00:03:30.960 --> 00:03:32.500
which we don't wanna replace anything.
86
00:03:32.500 --> 00:03:34.195
So that's why I'm typing null.
87
00:03:34.195 --> 00:03:39.195
And then the third one is gonna be a value
88
00:03:39.856 --> 00:03:42.410
which may seem kind of confusing
89
00:03:42.410 --> 00:03:44.450
but what this is actually doing
90
00:03:44.450 --> 00:03:47.040
is it's giving us the ability
91
00:03:47.040 --> 00:03:48.640
'cause we're not using that second one,
92
00:03:48.640 --> 00:03:49.840
we're just giving the ability to say
93
00:03:49.840 --> 00:03:51.930
I don't want you to do anything in this replacer
94
00:03:51.930 --> 00:03:55.330
and we wanna skip to the third one called the spacer.
95
00:03:55.330 --> 00:03:57.110
And this is what we're gonna do here.
96
00:03:57.110 --> 00:04:00.050
So I'm gonna say the second one's a null.
97
00:04:00.050 --> 00:04:02.760
Third one, let's put in two,
98
00:04:02.760 --> 00:04:04.610
just to give ourselves some space.
99
00:04:04.610 --> 00:04:07.480
Now, if I hit Save and now, watch what happens.
100
00:04:07.480 --> 00:04:09.240
Now, look at that.
101
00:04:09.240 --> 00:04:13.987
We have much easier-to-read JSON code right here
102
00:04:13.987 --> 00:04:17.360
and this is the data that we have access to.
103
00:04:17.360 --> 00:04:19.670
So with all of that in mind,
104
00:04:19.670 --> 00:04:22.840
what I can do is with everything here open,
105
00:04:22.840 --> 00:04:25.360
I can pull out the data that I want.
106
00:04:25.360 --> 00:04:28.410
So we can put in, we can put back in, I should say,
107
00:04:28.410 --> 00:04:33.410
our name and then right below it, our description
108
00:04:34.920 --> 00:04:39.090
and we can add to this list of our items
109
00:04:39.090 --> 00:04:40.260
that we're destructuring.
110
00:04:40.260 --> 00:04:43.250
So now I can just look over here on the right-hand side
111
00:04:43.250 --> 00:04:46.780
and I can say okay, I wanna get the,
112
00:04:46.780 --> 00:04:48.960
I don't want the category maybe right now
113
00:04:48.960 --> 00:04:52.240
so maybe I just wanna get the images.
114
00:04:52.240 --> 00:04:54.690
So I'll get that thumb_image_url.
115
00:04:54.690 --> 00:04:59.670
So thumb_image_url, just like that
116
00:04:59.670 --> 00:05:02.260
and lemme get the logo_url.
117
00:05:02.260 --> 00:05:04.500
I made all of my logos white
118
00:05:04.500 --> 00:05:07.590
so that they can actually be placed on top
119
00:05:07.590 --> 00:05:08.940
of that thumb image.
120
00:05:08.940 --> 00:05:11.230
So if you didn't do that that's perfectly fine.
121
00:05:11.230 --> 00:05:13.870
It's just gonna be a little bit harder to see here.
122
00:05:13.870 --> 00:05:17.430
So I've now extracted these items
123
00:05:17.430 --> 00:05:18.960
and I've destructured 'em.
124
00:05:18.960 --> 00:05:22.410
I don't care about things like the columns' names merged
125
00:05:22.410 --> 00:05:24.350
with images or anything like that.
126
00:05:24.350 --> 00:05:27.210
So let's pull in these images now.
127
00:05:27.210 --> 00:05:30.330
So underneath name and description,
128
00:05:30.330 --> 00:05:32.755
I'm gonna just do an img tag
129
00:05:32.755 --> 00:05:35.710
and then src equals,
130
00:05:35.710 --> 00:05:38.707
and then in curly brackets, thumb_image_url
131
00:05:40.380 --> 00:05:43.460
and then another one for the logo.
132
00:05:43.460 --> 00:05:44.493
The logo_url.
133
00:05:45.870 --> 00:05:49.150
And then we can get rid of that JSON stringify.
134
00:05:49.150 --> 00:05:50.040
Or actually, do you know what?
135
00:05:50.040 --> 00:05:53.970
I'm just going to comment it out
136
00:05:53.970 --> 00:05:55.660
and put it right above here
137
00:05:55.660 --> 00:05:57.680
just so you'll have it in the show notes
138
00:05:57.680 --> 00:06:00.600
just so you can see it if you wanna copy and paste that.
139
00:06:00.600 --> 00:06:03.760
Okay, let's hit Save and let's see what we have now.
140
00:06:03.760 --> 00:06:06.400
Okay, so oh wow, look at this.
141
00:06:06.400 --> 00:06:08.750
We actually have our images
142
00:06:08.750 --> 00:06:12.040
and our logos coming in from the API.
143
00:06:12.040 --> 00:06:14.750
So now we're no longer just getting
144
00:06:14.750 --> 00:06:18.700
and extracting out that data like names and descriptions,
145
00:06:18.700 --> 00:06:20.610
that text data, now we're actually able
146
00:06:20.610 --> 00:06:23.670
to pull in images and render those.
147
00:06:23.670 --> 00:06:28.300
Now, let's just kinda add some very basic styles here.
148
00:06:28.300 --> 00:06:32.200
So for the thumbnail and the logo,
149
00:06:32.200 --> 00:06:34.400
I'm just gonna give a style
150
00:06:35.460 --> 00:06:38.190
and we'll set a width at 100
151
00:06:38.190 --> 00:06:41.010
and I'm just gonna copy that and place it on both
152
00:06:41.010 --> 00:06:42.630
just so we can see everything
153
00:06:42.630 --> 00:06:44.373
on the screen a little bit easier.
154
00:06:45.470 --> 00:06:49.660
Hit Save, Refresh and now you can see each
155
00:06:49.660 --> 00:06:51.150
of our images.
156
00:06:51.150 --> 00:06:52.430
And this is looking really good.
157
00:06:52.430 --> 00:06:53.700
We still have a long way to go
158
00:06:53.700 --> 00:06:55.770
because we're not applying any real styles
159
00:06:55.770 --> 00:06:57.060
or anything like that.
160
00:06:57.060 --> 00:06:58.330
But this is pretty cool.
161
00:06:58.330 --> 00:07:02.810
We have now built out our entire component
162
00:07:02.810 --> 00:07:06.530
so that it has the ability to go out to an API,
163
00:07:06.530 --> 00:07:09.300
to get data and then render those items.
164
00:07:09.300 --> 00:07:12.040
And now we're going beyond just getting text.
165
00:07:12.040 --> 00:07:15.480
Now we have the ability to actually get some media,
166
00:07:15.480 --> 00:07:17.140
some images and some logos
167
00:07:17.140 --> 00:07:18.830
and you're gonna see in a little bit
168
00:07:18.830 --> 00:07:22.330
how we're able to even take this a step further
169
00:07:22.330 --> 00:07:26.620
and open it up and implement our own custom styles
170
00:07:26.620 --> 00:07:28.200
and some really cool behavior.
171
00:07:28.200 --> 00:07:30.180
So great job if you went through that.
172
00:07:30.180 --> 00:07:31.110
In the next guide,
173
00:07:31.110 --> 00:07:34.830
I'm gonna show you how we can build a loading state
174
00:07:34.830 --> 00:07:36.763
for these portfolio items.