- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.660 --> 00:00:03.080
You should now have some sample data to work with.
2
00:00:03.080 --> 00:00:04.160
And if you want,
3
00:00:04.160 --> 00:00:07.400
you can even use my data if you would like to.
4
00:00:07.400 --> 00:00:09.660
And I'll show you how you can do that here in a moment.
5
00:00:09.660 --> 00:00:14.660
But if you added your own sample images and your titles
6
00:00:15.160 --> 00:00:17.940
and descriptions, then if you come to
7
00:00:17.940 --> 00:00:20.450
that your dev camp space dashboard,
8
00:00:20.450 --> 00:00:25.230
and then go to the all items endpoint here and click on it,
9
00:00:25.230 --> 00:00:28.220
then you should see some JSON data.
10
00:00:28.220 --> 00:00:30.830
Now, I have mine formatted here,
11
00:00:30.830 --> 00:00:35.030
yours might look more something like this.
12
00:00:35.030 --> 00:00:38.140
So yours might be kind of all scrunched together.
13
00:00:38.140 --> 00:00:43.140
I'm using a browser tool that is a JSON expander.
14
00:00:44.520 --> 00:00:47.930
And it just formats all of this nicely.
15
00:00:47.930 --> 00:00:50.380
I believe the if you look,
16
00:00:50.380 --> 00:00:55.127
the name of it is something like JSON Chrome extension.
17
00:00:56.490 --> 00:00:59.130
And it's just this JSON view,
18
00:00:59.130 --> 00:01:01.420
but there are a lot of extensions that do this.
19
00:01:01.420 --> 00:01:04.480
So if you are wanting to have the same type and look
20
00:01:04.480 --> 00:01:08.310
and feel that I have here, then you can go here,
21
00:01:08.310 --> 00:01:09.800
I'll even put this in the show notes,
22
00:01:09.800 --> 00:01:12.120
and you can install it if you're using Chrome.
23
00:01:12.120 --> 00:01:15.450
So that's how I'm able to see the data the way I am.
24
00:01:15.450 --> 00:01:18.960
So let's take a look at what our data looks like
25
00:01:18.960 --> 00:01:22.590
before we go and we actually try to render it onto the page
26
00:01:22.590 --> 00:01:24.750
and pull it into our application.
27
00:01:24.750 --> 00:01:29.750
So right here, you can see we have a portfolio items name,
28
00:01:30.040 --> 00:01:31.300
this is a key.
29
00:01:31.300 --> 00:01:36.300
Now JSON stands for JavaScript Object Notation.
30
00:01:37.310 --> 00:01:40.050
So this is part of the reason why
31
00:01:40.050 --> 00:01:42.320
if I open up our code here,
32
00:01:42.320 --> 00:01:44.210
this is part of the reason why
33
00:01:44.210 --> 00:01:47.720
I created our items array here.
34
00:01:47.720 --> 00:01:50.620
And I formatted it the way that I did.
35
00:01:50.620 --> 00:01:53.410
Let's take a look and kind of compare at
36
00:01:53.410 --> 00:01:56.260
how these items look like each other.
37
00:01:56.260 --> 00:01:58.790
I'm just gonna come up to portfolio items
38
00:01:58.790 --> 00:02:01.120
and I'm just gonna come in let me just grab
39
00:02:01.120 --> 00:02:04.590
and copy this first element here.
40
00:02:04.590 --> 00:02:08.581
So I'm gonna grab everything from portfolio items down to
41
00:02:08.581 --> 00:02:11.470
the end of the first curly bracket.
42
00:02:11.470 --> 00:02:12.810
And this isn't gonna matter,
43
00:02:12.810 --> 00:02:14.780
we're actually gonna pull this data in,
44
00:02:14.780 --> 00:02:17.230
I'm just showing you this as an example.
45
00:02:17.230 --> 00:02:21.240
So let me extend this browser or this window out,
46
00:02:21.240 --> 00:02:23.410
so you can see it a little bit better.
47
00:02:23.410 --> 00:02:26.560
And notice here, we have portfolio items.
48
00:02:26.560 --> 00:02:30.210
And then it says, we have this little colon
49
00:02:30.210 --> 00:02:32.770
and then we have brackets.
50
00:02:32.770 --> 00:02:34.760
Well, that means it's an array.
51
00:02:34.760 --> 00:02:36.270
So we have a collection.
52
00:02:36.270 --> 00:02:40.580
Well, let's go down to our items array right here.
53
00:02:40.580 --> 00:02:43.990
This is the same concept if you wanted to make it easier,
54
00:02:43.990 --> 00:02:47.210
we could even say, portfolio underscore items.
55
00:02:47.210 --> 00:02:49.400
And notice how similar these are.
56
00:02:49.400 --> 00:02:51.950
This is a reason why, in the very beginning,
57
00:02:51.950 --> 00:02:54.750
I simply added some hard coded values there
58
00:02:54.750 --> 00:02:57.340
because it's mimicking exactly what we're gonna
59
00:02:57.340 --> 00:02:58.550
be pulling in.
60
00:02:58.550 --> 00:02:59.810
So we have this array.
61
00:02:59.810 --> 00:03:02.130
So we understand that part.
62
00:03:02.130 --> 00:03:05.580
Now inside of it, look at this, we have an object.
63
00:03:05.580 --> 00:03:07.610
So JavaScript Object Notation,
64
00:03:07.610 --> 00:03:10.230
its named that because the elements
65
00:03:10.230 --> 00:03:14.660
that you receive look a lot like JavaScript objects.
66
00:03:14.660 --> 00:03:17.060
So just like we have it down here,
67
00:03:17.060 --> 00:03:19.110
we have our three objects.
68
00:03:19.110 --> 00:03:23.400
They have IDs, titles, and descriptions.
69
00:03:23.400 --> 00:03:25.670
Come down here and you'll see,
70
00:03:25.670 --> 00:03:29.690
our portfolio items array is filled with these objects.
71
00:03:29.690 --> 00:03:31.250
Now they're a little bit longer.
72
00:03:31.250 --> 00:03:34.150
They have more items, but it's the same concept.
73
00:03:34.150 --> 00:03:38.680
We have an ID, we have a name, we have a description,
74
00:03:38.680 --> 00:03:42.330
we have a URL, we have all of these kinds of things here.
75
00:03:42.330 --> 00:03:46.510
So that is a reason why we structured our items array
76
00:03:46.510 --> 00:03:49.030
the way we did, because now what we're gonna be able
77
00:03:49.030 --> 00:03:52.290
to do is we're gonna be able to call this API,
78
00:03:52.290 --> 00:03:55.030
pull this data in and then we're gonna be able
79
00:03:55.030 --> 00:03:59.450
to treat it in a very similar manner as we did
80
00:03:59.450 --> 00:04:02.090
when it was hard coded into your application.
81
00:04:02.090 --> 00:04:03.850
So let's get started with that.
82
00:04:03.850 --> 00:04:08.267
Now, you are gonna learn a lot in this guide,
83
00:04:08.267 --> 00:04:12.530
we are gonna cover some pretty important concepts.
84
00:04:12.530 --> 00:04:14.740
And so definitely pay attention.
85
00:04:14.740 --> 00:04:19.570
And don't worry if I'm going kind of fast through a few
86
00:04:19.570 --> 00:04:22.820
of these concepts, because in order to get them all to work,
87
00:04:22.820 --> 00:04:26.490
I am gonna have to introduce to you a number
88
00:04:26.490 --> 00:04:29.310
of different things all at one time.
89
00:04:29.310 --> 00:04:33.360
And so don't worry, though, if it's a little bit confusing,
90
00:04:33.360 --> 00:04:35.590
or if it's fuzzy or you don't quite understand it,
91
00:04:35.590 --> 00:04:39.080
because the concepts that we're gonna be working with in
92
00:04:39.080 --> 00:04:41.280
this guide we're gonna be doing
93
00:04:41.280 --> 00:04:43.070
throughout this entire course.
94
00:04:43.070 --> 00:04:44.970
So what are we gonna talk about?
95
00:04:44.970 --> 00:04:48.020
Well we're, let's just add some notes here just
96
00:04:48.020 --> 00:04:49.500
so you can get kind of a visual
97
00:04:49.500 --> 00:04:51.220
for everything we're gonna be doing.
98
00:04:51.220 --> 00:04:56.220
So one we're going to be calling the API
99
00:04:56.810 --> 00:04:58.740
and we're gonna talk about everything we need
100
00:04:58.740 --> 00:05:00.590
to do in order to do that.
101
00:05:00.590 --> 00:05:05.590
Next, we're going to be storing the data in state.
102
00:05:08.570 --> 00:05:11.620
Now, in order to do this, you're gonna have
103
00:05:11.620 --> 00:05:16.620
to learn about state, and also hooks.
104
00:05:17.400 --> 00:05:21.380
So these are some of the most core foundational concepts
105
00:05:21.380 --> 00:05:24.520
when it comes to building react applications.
106
00:05:24.520 --> 00:05:29.520
And then from there, we're going to call state data.
107
00:05:32.010 --> 00:05:33.910
These are three concepts.
108
00:05:33.910 --> 00:05:37.460
It may not seem like a lot, but I can tell you just
109
00:05:37.460 --> 00:05:40.400
from experience and building react applications,
110
00:05:40.400 --> 00:05:43.670
each one of these elements is gonna be a skill
111
00:05:43.670 --> 00:05:47.220
that you're gonna be implementing over and over again.
112
00:05:47.220 --> 00:05:48.630
So let's get started.
113
00:05:48.630 --> 00:05:51.300
I'm actually gonna leave these comments right here,
114
00:05:51.300 --> 00:05:54.890
and then we'll cross them off as we complete them.
115
00:05:54.890 --> 00:05:56.880
So for our portfolio items,
116
00:05:56.880 --> 00:06:00.992
I'm gonna start by getting rid of this data here
117
00:06:00.992 --> 00:06:02.810
because we're no longer gonna be using this.
118
00:06:02.810 --> 00:06:04.670
And if you hit Save right now,
119
00:06:04.670 --> 00:06:06.350
you're actually gonna get an error
120
00:06:06.350 --> 00:06:10.130
because there's no longer a concept of items.
121
00:06:10.130 --> 00:06:12.900
Just don't even worry about any errors right now,
122
00:06:12.900 --> 00:06:15.120
we're not gonna be concerned with that.
123
00:06:15.120 --> 00:06:18.620
So let's first think about this first task
124
00:06:18.620 --> 00:06:23.040
of calling the API, what exactly will that entail?
125
00:06:23.040 --> 00:06:26.270
Well, if you've never worked with an API before,
126
00:06:26.270 --> 00:06:29.640
you may think that it's this really hard,
127
00:06:29.640 --> 00:06:31.700
challenging thing to do.
128
00:06:31.700 --> 00:06:34.780
But I'm here to tell you that thankfully it's not.
129
00:06:34.780 --> 00:06:38.120
All an API is in this sense,
130
00:06:38.120 --> 00:06:41.220
and the way that we're gonna implement it for right now.
131
00:06:41.220 --> 00:06:42.950
It's just a URL.
132
00:06:42.950 --> 00:06:44.730
It's just this right here.
133
00:06:44.730 --> 00:06:47.540
This is a API endpoint.
134
00:06:47.540 --> 00:06:49.510
So I'm gonna copy this,
135
00:06:49.510 --> 00:06:52.980
this entire link this entire URL up here.
136
00:06:52.980 --> 00:06:55.470
And you could also that's a reason why I'm putting
137
00:06:55.470 --> 00:06:57.690
the end points here on the dashboard
138
00:06:57.690 --> 00:06:59.000
because you could just come
139
00:06:59.000 --> 00:07:01.850
and you could come copy this entire link,
140
00:07:01.850 --> 00:07:04.780
and then come back to Visual Studio code.
141
00:07:04.780 --> 00:07:09.650
And let's just paste that in also as a comment.
142
00:07:09.650 --> 00:07:14.650
So this is gonna be the API endpoint that we're gonna hit.
143
00:07:14.680 --> 00:07:17.270
And so when we call this,
144
00:07:17.270 --> 00:07:21.340
we're gonna be able to receive all of this data back.
145
00:07:21.340 --> 00:07:25.250
So this is the entire goal of working with API's
146
00:07:25.250 --> 00:07:27.430
when you're trying to retrieve data.
147
00:07:27.430 --> 00:07:30.430
Later on in the course, we're gonna see how we can push data
148
00:07:30.430 --> 00:07:32.060
to an API, but for right now,
149
00:07:32.060 --> 00:07:35.670
we're just trying to get everything that's here on the page.
150
00:07:35.670 --> 00:07:38.100
We're trying to get back into our application.
151
00:07:38.100 --> 00:07:39.980
That's all an API is.
152
00:07:39.980 --> 00:07:43.690
Remember, it stands for Application Programming Interface.
153
00:07:43.690 --> 00:07:48.690
What that means is that it is a protocol and it's a process
154
00:07:49.360 --> 00:07:53.470
that allows one program to talk to another program,
155
00:07:53.470 --> 00:07:54.310
and that's it.
156
00:07:54.310 --> 00:07:58.690
It's either saying, hey, send me that set of portfolio item,
157
00:07:58.690 --> 00:08:01.120
data and send it to me.
158
00:08:01.120 --> 00:08:02.900
So I can render on the screen,
159
00:08:02.900 --> 00:08:05.860
or later on in the course you're gonna see, we're gonna say,
160
00:08:05.860 --> 00:08:08.610
hey, I have this new blog that I just wrote,
161
00:08:08.610 --> 00:08:12.770
send the data up to the server and store it in the database.
162
00:08:12.770 --> 00:08:16.010
So the reason we're doing this and what API really what
163
00:08:16.010 --> 00:08:19.700
the goal is, is it creates a standardized format
164
00:08:19.700 --> 00:08:24.530
that you can send and receive data between applications.
165
00:08:24.530 --> 00:08:25.900
That's all it is.
166
00:08:25.900 --> 00:08:28.270
So we have this endpoint right here,
167
00:08:28.270 --> 00:08:30.080
yours is gonna be slightly different
168
00:08:30.080 --> 00:08:33.400
because yours is going to have whatever sub domain
169
00:08:33.400 --> 00:08:36.130
that you picked is going to be here instead
170
00:08:36.130 --> 00:08:37.850
of the sub domain that I picked,
171
00:08:37.850 --> 00:08:39.290
but that's gonna be the only difference.
172
00:08:39.290 --> 00:08:43.090
Everything else in that URL is gonna be exactly the same.
173
00:08:43.090 --> 00:08:45.660
Okay, so we have this URL,
174
00:08:45.660 --> 00:08:48.190
how exactly are we able to call it?
175
00:08:48.190 --> 00:08:51.550
Well, because you're working with this template
176
00:08:51.550 --> 00:08:55.250
I have already installed this library for you.
177
00:08:55.250 --> 00:08:58.130
Now remember, if you did say you weren't working with
178
00:08:58.130 --> 00:08:59.930
this template or this is a new project,
179
00:08:59.930 --> 00:09:02.320
and you didn't use a JS builder for it,
180
00:09:02.320 --> 00:09:05.260
then you would simply open up the terminal
181
00:09:05.260 --> 00:09:08.330
and you'd say NPM I axios.
182
00:09:08.330 --> 00:09:12.290
And that would install this axios Library.
183
00:09:12.290 --> 00:09:17.260
Now, we definitely recommend for you to go to axios.
184
00:09:17.260 --> 00:09:21.150
Now, not axios, the political commentary website,
185
00:09:21.150 --> 00:09:23.900
we'll just say axios NPM, or GitHub.
186
00:09:23.900 --> 00:09:28.490
And this is going to give you all of your tools
187
00:09:28.490 --> 00:09:31.800
and your documentation for working with this library.
188
00:09:31.800 --> 00:09:35.017
Now, this is an incredibly popular
189
00:09:35.017 --> 00:09:37.710
and very powerful library that allows you
190
00:09:37.710 --> 00:09:40.930
to pretty much do any type of API communication
191
00:09:40.930 --> 00:09:42.630
that you need to make.
192
00:09:42.630 --> 00:09:43.950
This is what we're gonna be using
193
00:09:43.950 --> 00:09:45.640
throughout the entire course.
194
00:09:45.640 --> 00:09:50.640
Anytime that we're working with outside API communication.
195
00:09:50.950 --> 00:09:55.950
You can use it to get data to send data and it's very nice
196
00:09:56.020 --> 00:09:59.040
and it has a really nice type of interface
197
00:09:59.040 --> 00:10:03.820
for working with API, so let's get started here,
198
00:10:03.820 --> 00:10:05.620
later on after this video,
199
00:10:05.620 --> 00:10:07.730
I'm actually gonna give you a little bit of homework
200
00:10:07.730 --> 00:10:10.330
and research homework to be able to come
201
00:10:10.330 --> 00:10:12.330
and study this a bit more,
202
00:10:12.330 --> 00:10:14.350
but we'll talk about that at the end.
203
00:10:14.350 --> 00:10:16.730
Okay, so we have axios here,
204
00:10:16.730 --> 00:10:20.390
let's open up our portfolio items list.
205
00:10:20.390 --> 00:10:23.800
And we're gonna see how we can build a function
206
00:10:23.800 --> 00:10:27.960
that will call our API and send that data back.
207
00:10:27.960 --> 00:10:30.920
So first and foremost, I'm going to come up here,
208
00:10:30.920 --> 00:10:32.990
I'm gonna uncomment out this line,
209
00:10:32.990 --> 00:10:36.660
I'm gonna wrap it up inside of quotation marks.
210
00:10:36.660 --> 00:10:40.170
And at the very top here, I'm just gonna create a variable.
211
00:10:40.170 --> 00:10:42.270
So I'm outside of the function,
212
00:10:42.270 --> 00:10:43.950
and here I'm just gonna say const,
213
00:10:43.950 --> 00:10:48.950
API URL equals and then the entire line here.
214
00:10:50.580 --> 00:10:54.000
Now you may notice I'm using kind of a different convention
215
00:10:54.000 --> 00:10:56.580
when I type out API URL
216
00:10:56.580 --> 00:11:00.210
and this is what is called a constant.
217
00:11:00.210 --> 00:11:02.660
So and don't get that word confused with
218
00:11:02.660 --> 00:11:04.600
this const variable here.
219
00:11:04.600 --> 00:11:07.380
What this means here whenever you write a variable,
220
00:11:07.380 --> 00:11:08.970
and you use all caps,
221
00:11:08.970 --> 00:11:11.620
and you only separate it with underscores is
222
00:11:11.620 --> 00:11:13.710
that this is a variable,
223
00:11:13.710 --> 00:11:16.790
that the value is never going change.
224
00:11:16.790 --> 00:11:17.860
And in this case,
225
00:11:17.860 --> 00:11:21.460
we're never gonna want to change this API endpoint
226
00:11:21.460 --> 00:11:23.100
because there's no reason to,
227
00:11:23.100 --> 00:11:25.640
we don't ever want to go portfolio items
228
00:11:25.640 --> 00:11:26.820
and then you know,
229
00:11:26.820 --> 00:11:30.720
something else and change that dynamically on the fly.
230
00:11:30.720 --> 00:11:33.070
So whenever you see this convention,
231
00:11:33.070 --> 00:11:35.510
that's what the developer is trying to tell you.
232
00:11:35.510 --> 00:11:38.180
And I'm only pointing that out one just
233
00:11:38.180 --> 00:11:39.560
for best practice purposes,
234
00:11:39.560 --> 00:11:42.510
but also you're gonna see it a lot in documentation.
235
00:11:42.510 --> 00:11:45.490
Okay, so this is our endpoint, we're gonna hit.
236
00:11:45.490 --> 00:11:50.270
Now we need to bring axios in and build out a function.
237
00:11:50.270 --> 00:11:55.270
So let's say we want to import axios from axios,
238
00:11:57.460 --> 00:12:00.330
just like this, and it helped if I spelled it right,
239
00:12:00.330 --> 00:12:01.280
there we go.
240
00:12:01.280 --> 00:12:04.670
And I'm gonna put that right above portfolio item
241
00:12:04.670 --> 00:12:05.870
and give some space.
242
00:12:05.870 --> 00:12:08.840
This is also another common react convention,
243
00:12:08.840 --> 00:12:12.140
where you'll see developers like to put outside libraries
244
00:12:12.140 --> 00:12:15.680
here at the top of the file, and then give a space
245
00:12:15.680 --> 00:12:19.670
and then show all of the imports to their own components.
246
00:12:19.670 --> 00:12:21.580
Okay, now that we have that now,
247
00:12:21.580 --> 00:12:24.010
let's actually create a function here.
248
00:12:24.010 --> 00:12:27.790
So I'm inside of our actual component.
249
00:12:27.790 --> 00:12:32.790
And I'm gonna create a function called get portfolio items.
250
00:12:32.850 --> 00:12:34.960
You can call yours, whatever you'd like.
251
00:12:34.960 --> 00:12:36.210
That's what I'm calling mine
252
00:12:36.210 --> 00:12:37.840
It's not gonna take any arguments,
253
00:12:37.840 --> 00:12:39.830
and it'll be a fat arrow function.
254
00:12:39.830 --> 00:12:44.640
Now from here, I'm gonna call axios.get.
255
00:12:44.640 --> 00:12:46.080
So this is a function.
256
00:12:46.080 --> 00:12:51.080
And the first argument for get is gonna be the API endpoint.
257
00:12:51.700 --> 00:12:54.080
So I'm gonna inside of get,
258
00:12:54.080 --> 00:12:58.470
I'm gonna say get this API URL.
259
00:12:58.470 --> 00:12:59.560
For right now,
260
00:12:59.560 --> 00:13:02.340
I'm not gonna pass in any other arguments.
261
00:13:02.340 --> 00:13:04.290
So there are other optional arguments,
262
00:13:04.290 --> 00:13:06.650
you're gonna see that when you go through the documentation,
263
00:13:06.650 --> 00:13:08.960
but for right now, I'm not gonna worry about it.
264
00:13:08.960 --> 00:13:13.960
And then I'll say, then I want to get the response.
265
00:13:15.480 --> 00:13:18.970
And inside of here, I just wanna console log this out.
266
00:13:18.970 --> 00:13:23.970
So I'm just gonna say console, log portfolio items.
267
00:13:24.230 --> 00:13:28.660
And then let's just say response.data,
268
00:13:28.660 --> 00:13:31.100
just to see what we get.
269
00:13:31.100 --> 00:13:35.080
This is a very common convention to be able to get the data
270
00:13:35.080 --> 00:13:38.140
and then just kind of see what it looks like.
271
00:13:38.140 --> 00:13:40.620
So that's the first thing now this isn't gonna work
272
00:13:40.620 --> 00:13:43.380
because we have some errors happening
273
00:13:43.380 --> 00:13:46.160
because we have not declared our items yet.
274
00:13:46.160 --> 00:13:47.240
We'll do that in a second.
275
00:13:47.240 --> 00:13:49.760
For right now, we're just gonna comment that out.
276
00:13:49.760 --> 00:13:54.733
And I'm just gonna return just a div that says coming soon.
277
00:13:56.250 --> 00:13:59.790
Okay, so this is the first part that we need
278
00:13:59.790 --> 00:14:01.650
to get in our portfolio items,
279
00:14:01.650 --> 00:14:05.510
but this is not actually doing anything yet.
280
00:14:05.510 --> 00:14:07.640
So this is a very important concept.
281
00:14:07.640 --> 00:14:10.180
And if you're an experienced developer, you know this,
282
00:14:10.180 --> 00:14:13.480
but if you're not, you may just think that you created
283
00:14:13.480 --> 00:14:15.870
this function, and it should just work.
284
00:14:15.870 --> 00:14:18.460
But what we need to get this to work is
285
00:14:18.460 --> 00:14:20.750
to actually call it.
286
00:14:20.750 --> 00:14:23.880
A function does nothing when you just define it,
287
00:14:23.880 --> 00:14:26.550
you actually need to call it to get it to work.
288
00:14:26.550 --> 00:14:30.940
So we have to actually trigger this function call.
289
00:14:30.940 --> 00:14:33.120
And how are we gonna do that?
290
00:14:33.120 --> 00:14:35.490
Well, we want this to be triggered,
291
00:14:35.490 --> 00:14:38.690
we wanna go out and get those API endpoints
292
00:14:38.690 --> 00:14:41.470
and to get our portfolio items as soon as
293
00:14:41.470 --> 00:14:43.320
this component loads up.
294
00:14:43.320 --> 00:14:44.460
Well, to do that,
295
00:14:44.460 --> 00:14:48.750
we're gonna start using some very powerful tools
296
00:14:48.750 --> 00:14:50.850
called react hooks.
297
00:14:50.850 --> 00:14:55.110
Now, this is one it's relatively new,
298
00:14:55.110 --> 00:14:57.560
it's within at the time of this recording.
299
00:14:57.560 --> 00:15:00.310
It's only about a year or so old.
300
00:15:00.310 --> 00:15:03.440
And these are some new tools to react
301
00:15:03.440 --> 00:15:05.610
that are incredibly powerful.
302
00:15:05.610 --> 00:15:10.120
They allow us to write some really nice streamlined code
303
00:15:10.120 --> 00:15:15.120
that do everything from using triggers to run functions
304
00:15:15.300 --> 00:15:16.530
as soon as the component loads,
305
00:15:16.530 --> 00:15:18.560
which you're gonna see me do right now.
306
00:15:18.560 --> 00:15:22.000
They also give us the ability to maintain
307
00:15:22.000 --> 00:15:23.930
and then update state,
308
00:15:23.930 --> 00:15:26.230
which we're also gonna do in this guide.
309
00:15:26.230 --> 00:15:29.350
And then there's a lot of other things you're gonna see
310
00:15:29.350 --> 00:15:33.320
that we were able to implement because of hooks.
311
00:15:33.320 --> 00:15:36.140
And so don't worry if they're confusing right now,
312
00:15:36.140 --> 00:15:38.070
for right now just kind of follow along.
313
00:15:38.070 --> 00:15:39.960
Because these are gonna be things we're gonna
314
00:15:39.960 --> 00:15:43.490
be using pretty much in every guide from here on out.
315
00:15:43.490 --> 00:15:46.500
So the two hooks that we're gonna use are gonna
316
00:15:46.500 --> 00:15:51.500
be useEffect and then use state.
317
00:15:51.530 --> 00:15:54.350
And so we're not gonna use state quite yet,
318
00:15:54.350 --> 00:15:55.230
but for right now,
319
00:15:55.230 --> 00:15:58.320
we're gonna call this useEffect function.
320
00:15:58.320 --> 00:16:01.020
So I'm gonna put it here pretty much at the top,
321
00:16:01.020 --> 00:16:03.250
and we're gonna say useEffect parens,
322
00:16:04.367 --> 00:16:06.830
and then another nested set of parens,
323
00:16:06.830 --> 00:16:09.540
and I'll explain why we need to do that in a second.
324
00:16:09.540 --> 00:16:12.100
And then a fat arrow function.
325
00:16:12.100 --> 00:16:15.470
And then inside of it, we need to call our new function.
326
00:16:15.470 --> 00:16:17.870
So we're gonna say get portfolio items.
327
00:16:17.870 --> 00:16:19.930
And to actually call this we need
328
00:16:19.930 --> 00:16:22.370
to add parens at the end.
329
00:16:22.370 --> 00:16:25.040
Then after that, hit a comma,
330
00:16:25.040 --> 00:16:28.470
and then brackets which I'll talk about what
331
00:16:28.470 --> 00:16:30.780
that does here in a moment.
332
00:16:30.780 --> 00:16:33.000
For right now, let's just test this out
333
00:16:33.000 --> 00:16:36.720
because now we have implemented everything we need
334
00:16:36.720 --> 00:16:39.070
to at least get to the point where we should
335
00:16:39.070 --> 00:16:41.830
be console logging out some data.
336
00:16:41.830 --> 00:16:46.830
So hit save, and let's open up or I'll actually shrink
337
00:16:46.960 --> 00:16:49.830
this so that we can see our browser
338
00:16:51.180 --> 00:16:54.810
and see the browser that has the server running.
339
00:16:54.810 --> 00:16:56.730
So I'm gonna open this up
340
00:16:56.730 --> 00:17:00.490
and I'm gonna press Command + Option I
341
00:17:00.490 --> 00:17:02.910
to open up the console,
342
00:17:02.910 --> 00:17:06.890
and then let's see if I hit refresh here,
343
00:17:06.890 --> 00:17:08.480
we should see some data.
344
00:17:08.480 --> 00:17:10.920
And there we go see where it says down here at
345
00:17:10.920 --> 00:17:12.680
the bottom portfolio items.
346
00:17:12.680 --> 00:17:14.430
If I open this up,
347
00:17:14.430 --> 00:17:18.200
you'll see that we have 12 portfolio items.
348
00:17:18.200 --> 00:17:20.940
Now if I click on that arrow again,
349
00:17:20.940 --> 00:17:23.100
you'll see it gives us the breakdown
350
00:17:23.100 --> 00:17:25.520
of every one of those data points.
351
00:17:25.520 --> 00:17:29.800
And this matches exactly what you see here in the browser.
352
00:17:29.800 --> 00:17:34.470
So we've successfully gone out, we've retrieved data,
353
00:17:34.470 --> 00:17:38.460
and we now have the ability to access it here inside
354
00:17:38.460 --> 00:17:41.560
of our own application.
355
00:17:41.560 --> 00:17:43.650
So this is pretty cool like this.
356
00:17:43.650 --> 00:17:45.190
I think this is pretty awesome.
357
00:17:45.190 --> 00:17:47.200
This is talking to an outside server,
358
00:17:47.200 --> 00:17:50.780
we're no longer having to hard code our values.
359
00:17:50.780 --> 00:17:53.310
We're now pulling this data in.
360
00:17:53.310 --> 00:17:55.840
So let's close this out.
361
00:17:55.840 --> 00:17:58.340
And let's see how we can render this.
362
00:17:58.340 --> 00:18:01.670
So I'm gonna open up Visual Studio code again,
363
00:18:01.670 --> 00:18:06.480
now we're gonna use this use state hook right here.
364
00:18:06.480 --> 00:18:09.300
So the way that you state is you can kind
365
00:18:09.300 --> 00:18:13.120
of if you've never used state in react in any form,
366
00:18:13.120 --> 00:18:16.210
the easy way to think about state is
367
00:18:16.210 --> 00:18:19.710
it's giving our application the ability
368
00:18:19.710 --> 00:18:24.680
to maintain some level of persistence of our data.
369
00:18:24.680 --> 00:18:29.160
So it's not persistence in the way say a database works,
370
00:18:29.160 --> 00:18:32.270
because as soon as the component is done,
371
00:18:32.270 --> 00:18:35.400
so such as navigating away from the page,
372
00:18:35.400 --> 00:18:37.270
then this data goes away.
373
00:18:37.270 --> 00:18:40.610
But as long as the user is working with the component
374
00:18:40.610 --> 00:18:45.430
or looking at it, then we're gonna be able to store the data
375
00:18:45.430 --> 00:18:50.210
and then also update it in a very dynamic manner.
376
00:18:50.210 --> 00:18:53.570
So if you can kind of think about it almost like
377
00:18:53.570 --> 00:18:57.820
we have a really powerful variable here that allows us
378
00:18:57.820 --> 00:19:01.280
to store and then change the data on the fly.
379
00:19:01.280 --> 00:19:03.500
Don't worry, that's still a little bit confusing,
380
00:19:03.500 --> 00:19:06.510
we're gonna be using use state in the majority of
381
00:19:06.510 --> 00:19:08.860
the components we use from here on out.
382
00:19:08.860 --> 00:19:12.100
So the way we start off with using state is
383
00:19:12.100 --> 00:19:15.200
by defining it up here at the top.
384
00:19:15.200 --> 00:19:16.670
So I'm gonna say const.
385
00:19:16.670 --> 00:19:21.340
And then inside of brackets, I'm gonna say items.
386
00:19:21.340 --> 00:19:24.970
And then I'm gonna, there's two things you have to give
387
00:19:24.970 --> 00:19:26.660
to state in these brackets.
388
00:19:26.660 --> 00:19:30.730
The first one is the data itself,
389
00:19:30.730 --> 00:19:33.040
you can think of it kind of like a variable name.
390
00:19:33.040 --> 00:19:37.750
And then the next one is a way of updating that data.
391
00:19:37.750 --> 00:19:40.790
So the common convention is to say items,
392
00:19:40.790 --> 00:19:43.100
and then set items,
393
00:19:43.100 --> 00:19:47.060
and we're gonna set that equal to use state.
394
00:19:47.060 --> 00:19:51.520
And then inside of that, we have to give a default value.
395
00:19:51.520 --> 00:19:52.580
So in this case,
396
00:19:52.580 --> 00:19:56.070
I'm gonna say as soon as this component loads up,
397
00:19:56.070 --> 00:19:59.800
then start with items being an empty array
398
00:19:59.800 --> 00:20:03.300
and we'll talk about why we're doing that here in a moment.
399
00:20:03.300 --> 00:20:08.300
So this is everything we need to define our items state.
400
00:20:08.300 --> 00:20:11.490
And then let's come down here.
401
00:20:11.490 --> 00:20:13.420
And now I'm gonna get rid of coming soon.
402
00:20:13.420 --> 00:20:15.470
And I'm gonna just bring back,
403
00:20:15.470 --> 00:20:18.810
our items render and everything like this.
404
00:20:18.810 --> 00:20:21.420
Now, I can hit save now,
405
00:20:21.420 --> 00:20:25.360
and you're gonna see that we're not gonna have an error now,
406
00:20:25.360 --> 00:20:29.140
because what's happening is this items of value, our items,
407
00:20:29.140 --> 00:20:33.120
piece of state is now being called properly.
408
00:20:33.120 --> 00:20:36.540
Now, we don't have a data in it yet, but for right now,
409
00:20:36.540 --> 00:20:41.540
we actually do have a items array, it's just empty.
410
00:20:41.670 --> 00:20:44.490
So I'm gonna take a look one more time at the data.
411
00:20:44.490 --> 00:20:48.300
So it looks like inside a portfolio items, we have an ID,
412
00:20:48.300 --> 00:20:50.860
a name and a description.
413
00:20:50.860 --> 00:20:55.860
So let me switch back to our portfolio item record.
414
00:20:56.030 --> 00:20:59.560
I'll close out of these other ones of these other files.
415
00:20:59.560 --> 00:21:01.490
So I'm gonna portfolio item.
416
00:21:01.490 --> 00:21:03.850
And I called it title.
417
00:21:03.850 --> 00:21:06.110
So we actually have to change this to be named
418
00:21:06.110 --> 00:21:08.270
because this does have to match up.
419
00:21:08.270 --> 00:21:13.270
So you do need, there's no title in our data here.
420
00:21:13.360 --> 00:21:15.410
There's simply something called name.
421
00:21:15.410 --> 00:21:18.770
So we need to use the exact naming convention
422
00:21:18.770 --> 00:21:20.110
the API follows.
423
00:21:20.110 --> 00:21:22.440
So I'm gonna hit save here.
424
00:21:22.440 --> 00:21:26.290
Now let's see how are we able to store this data?
425
00:21:26.290 --> 00:21:29.680
How are we able to say all of that data that came in
426
00:21:29.680 --> 00:21:33.090
from the API, I want to actually use it
427
00:21:33.090 --> 00:21:36.050
and I want to store it in our items?
428
00:21:36.050 --> 00:21:39.360
Well, that is where set items comes in.
429
00:21:39.360 --> 00:21:42.690
So let's open this up, this function
430
00:21:42.690 --> 00:21:45.060
and I'm gonna say set items.
431
00:21:45.060 --> 00:21:50.060
And then we'll say response data.portfolio underscore items.
432
00:21:52.780 --> 00:21:55.080
And the reason why I knew this,
433
00:21:55.080 --> 00:21:57.100
in addition to the fact that I was the one that created
434
00:21:57.100 --> 00:21:59.900
the API and told it to say this,
435
00:21:59.900 --> 00:22:02.910
is that when we opened up the console
436
00:22:02.910 --> 00:22:05.340
when we printed out portfolio items,
437
00:22:05.340 --> 00:22:07.460
and we printed out response data,
438
00:22:07.460 --> 00:22:10.950
do you remember that the very first thing we saw was
439
00:22:10.950 --> 00:22:14.160
where it said portfolio items, and it had that array?
440
00:22:14.160 --> 00:22:15.520
That's one way of doing it.
441
00:22:15.520 --> 00:22:18.610
The other way is simply by looking at the way
442
00:22:18.610 --> 00:22:20.580
the JSON is structured.
443
00:22:20.580 --> 00:22:25.580
Right here, everything you see here is response.data.
444
00:22:26.600 --> 00:22:29.240
That's what we get when we call response data is
445
00:22:29.240 --> 00:22:31.480
what we're seeing here in the browser.
446
00:22:31.480 --> 00:22:34.170
So because of that, we know that we have access
447
00:22:34.170 --> 00:22:36.620
to this portfolio items array.
448
00:22:36.620 --> 00:22:39.190
And that is why I've named it that
449
00:22:39.190 --> 00:22:40.760
and that's the only way it will work.
450
00:22:40.760 --> 00:22:44.640
If we tried to call response.data.items,
451
00:22:44.640 --> 00:22:45.610
that's not gonna work
452
00:22:45.610 --> 00:22:48.350
because there's nothing there called items.
453
00:22:48.350 --> 00:22:51.650
It's portfolio underscore items.
454
00:22:51.650 --> 00:22:52.890
Okay, let's test this out.
455
00:22:52.890 --> 00:22:54.080
Let's see if it's gonna work.
456
00:22:54.080 --> 00:22:58.250
So I'm gonna save that will refresh and look at that.
457
00:22:58.250 --> 00:23:03.250
Those are all of items that is our real live data.
458
00:23:04.130 --> 00:23:09.010
So we have now completed each of the tasks here.
459
00:23:09.010 --> 00:23:11.030
We've called the API.
460
00:23:11.030 --> 00:23:12.517
We've stored the data.
461
00:23:12.517 --> 00:23:15.740
And then we've called that state data.
462
00:23:15.740 --> 00:23:18.680
Before we're done here, because I know that was a lot.
463
00:23:18.680 --> 00:23:22.810
Let's just kind of walk through what is going on here.
464
00:23:22.810 --> 00:23:26.550
So we first we call the API,
465
00:23:26.550 --> 00:23:29.650
that is this axios call right here.
466
00:23:29.650 --> 00:23:32.230
We know we call that axios library,
467
00:23:32.230 --> 00:23:34.070
we called the get function.
468
00:23:34.070 --> 00:23:38.420
And then we passed in the API that we wanted to hit,
469
00:23:38.420 --> 00:23:41.370
because axios and you're gonna find this out in a moment
470
00:23:41.370 --> 00:23:42.940
'cause you're gonna start going through
471
00:23:42.940 --> 00:23:44.830
the axios documentation,
472
00:23:44.830 --> 00:23:49.650
because axios is what is called a promise based library.
473
00:23:49.650 --> 00:23:53.825
And if you remember back to your JavaScript Primer,
474
00:23:53.825 --> 00:23:58.825
promises use a then concept where whenever we're using
475
00:23:59.790 --> 00:24:01.810
using JavaScript promises,
476
00:24:01.810 --> 00:24:05.100
we're performing a asynchronous task in,
477
00:24:05.100 --> 00:24:07.880
you can actually it's kind of nice to be able to see the way
478
00:24:07.880 --> 00:24:09.020
that works here.
479
00:24:09.020 --> 00:24:12.630
Notice if you hit refresh, everything on the page
480
00:24:12.630 --> 00:24:15.590
that was hard coded is gonna load immediately.
481
00:24:15.590 --> 00:24:17.208
But then the data coming from
482
00:24:17.208 --> 00:24:20.210
the API is gonna take a little while.
483
00:24:20.210 --> 00:24:23.690
There's this kind of pause before it renders.
484
00:24:23.690 --> 00:24:26.370
So you can hit refresh, everything loaded.
485
00:24:26.370 --> 00:24:30.060
And then the data from our API loaded.
486
00:24:30.060 --> 00:24:32.180
Well, that's because it's asynchronous.
487
00:24:32.180 --> 00:24:37.170
We don't have direct access to the API,
488
00:24:37.170 --> 00:24:40.060
there is gonna be a moment in time
489
00:24:40.060 --> 00:24:43.170
where we're making this API call.
490
00:24:43.170 --> 00:24:46.210
And we're just waiting, the application is waiting.
491
00:24:46.210 --> 00:24:49.280
Sometimes it may be a split second, other times,
492
00:24:49.280 --> 00:24:52.310
it could be 10 seconds, or even more,
493
00:24:52.310 --> 00:24:55.220
and so we don't know how long it's gonna be.
494
00:24:55.220 --> 00:24:58.970
So the way the promises work is we say I want you
495
00:24:58.970 --> 00:25:01.580
to go get this API data,
496
00:25:01.580 --> 00:25:04.700
then this is the key word with promises,
497
00:25:04.700 --> 00:25:09.370
then means when you hear back from the API,
498
00:25:09.370 --> 00:25:12.350
then I want you to get the response.
499
00:25:12.350 --> 00:25:15.110
And then everything inside of it is a function.
500
00:25:15.110 --> 00:25:19.380
So this is just a big anonymous function right here,
501
00:25:19.380 --> 00:25:20.370
where we're saying,
502
00:25:20.370 --> 00:25:23.580
we know you're gonna pass back this response data.
503
00:25:23.580 --> 00:25:27.990
And also just as a kind of a key word response
504
00:25:27.990 --> 00:25:32.010
there's nothing special about this word, that's our naming.
505
00:25:32.010 --> 00:25:33.320
We could do anything we want,
506
00:25:33.320 --> 00:25:34.880
if we want to another convention,
507
00:25:34.880 --> 00:25:37.790
you'll see is people saying res,
508
00:25:37.790 --> 00:25:40.410
and then I could just say everywhere else here
509
00:25:40.410 --> 00:25:45.410
I could say res and if I hit save here,
510
00:25:45.670 --> 00:25:48.210
everything's still going to work.
511
00:25:48.210 --> 00:25:53.120
I could say this is the for some reason I wanted
512
00:25:53.120 --> 00:25:57.270
to be horrible and name this the XYZ variable.
513
00:25:57.270 --> 00:26:02.270
XYZ and change each one of these, hit save,
514
00:26:03.700 --> 00:26:06.150
and everything is still working,
515
00:26:06.150 --> 00:26:08.940
definitely do not have your variables name there,
516
00:26:08.940 --> 00:26:11.780
you want them to be very nice and easy to understand.
517
00:26:11.780 --> 00:26:13.430
I always call mine response,
518
00:26:13.430 --> 00:26:15.490
because that's exactly what the data is.
519
00:26:15.490 --> 00:26:17.450
It's our response data.
520
00:26:17.450 --> 00:26:20.820
And this is what gets passed in automatically
521
00:26:20.820 --> 00:26:22.860
whenever the data comes back.
522
00:26:22.860 --> 00:26:26.510
Now, from there, what we're doing is we're saying
523
00:26:26.510 --> 00:26:29.190
this set items piece of state.
524
00:26:29.190 --> 00:26:32.460
So what we have up here, what we defined on line 14,
525
00:26:32.460 --> 00:26:35.350
and we said start with an empty array.
526
00:26:35.350 --> 00:26:38.380
Well, what we're saying is when you get that data back,
527
00:26:38.380 --> 00:26:43.380
replace that empty array with the portfolio items data
528
00:26:44.840 --> 00:26:46.630
and grab all of that.
529
00:26:46.630 --> 00:26:51.630
And so now that's how we're able to populate the items.
530
00:26:51.750 --> 00:26:53.960
Now, last thing that we'll talk about,
531
00:26:53.960 --> 00:26:57.110
and then I'm gonna give you some study time is
532
00:26:57.110 --> 00:26:58.710
this useEffect hook
533
00:26:58.710 --> 00:27:01.470
because this looks kind a weird if you've never seen it
534
00:27:01.470 --> 00:27:05.560
before, so useEffect is just another react hook.
535
00:27:05.560 --> 00:27:09.690
What useEffect does is it's triggered as soon as
536
00:27:09.690 --> 00:27:11.460
this component loads up.
537
00:27:11.460 --> 00:27:14.540
So when the portfolio items list loads up,
538
00:27:14.540 --> 00:27:19.540
useEffect is called and anything inside of it gets run.
539
00:27:20.158 --> 00:27:22.590
Now what you use with useEffect is
540
00:27:22.590 --> 00:27:26.700
you pass in useEffect takes in two arguments,
541
00:27:26.700 --> 00:27:30.480
and I'm gonna show you a little thing that you really need
542
00:27:30.480 --> 00:27:32.127
to be aware of here.
543
00:27:32.127 --> 00:27:35.230
And that is, the first argument is required.
544
00:27:35.230 --> 00:27:37.240
The second one is optional.
545
00:27:37.240 --> 00:27:41.270
So the second one is this little set of brackets,
546
00:27:41.270 --> 00:27:44.300
and I'll talk about what those mean here in a second.
547
00:27:44.300 --> 00:27:48.420
So the first one is just a regular anonymous function.
548
00:27:48.420 --> 00:27:51.660
So that is everything that I just highlighted right there.
549
00:27:51.660 --> 00:27:52.990
It's an anonymous function.
550
00:27:52.990 --> 00:27:54.950
It doesn't take in any arguments.
551
00:27:54.950 --> 00:27:58.760
We're using a fat arrow function and that inside of
552
00:27:58.760 --> 00:28:03.290
that function and it's going to run all of those tasks.
553
00:28:03.290 --> 00:28:05.240
So in this case, we're just saying,
554
00:28:05.240 --> 00:28:08.820
go get me the portfolio items, call this function here.
555
00:28:08.820 --> 00:28:10.570
So that's the first argument.
556
00:28:10.570 --> 00:28:13.150
Now the second argument is optional.
557
00:28:13.150 --> 00:28:18.150
So I'm gonna just comment this out and show you what
558
00:28:18.190 --> 00:28:20.623
that looks like not that one.
559
00:28:21.730 --> 00:28:23.370
There you go.
560
00:28:23.370 --> 00:28:27.810
If I were to not use that second argument,
561
00:28:27.810 --> 00:28:31.340
so this is something you do not wanna do,
562
00:28:31.340 --> 00:28:34.520
except in some very rare cases.
563
00:28:34.520 --> 00:28:39.520
And so if you call this useEffect without those brackets,
564
00:28:40.000 --> 00:28:42.440
what's going to happen is
565
00:28:42.440 --> 00:28:47.440
useEffect doesn't just trigger when the page loads,
566
00:28:48.611 --> 00:28:51.070
and when the component loads.
567
00:28:51.070 --> 00:28:54.910
UseEffect, if you do not pass in the brackets is going
568
00:28:54.910 --> 00:28:59.320
to be run anytime there's any action on the page,
569
00:28:59.320 --> 00:29:03.724
which is I, when I was originally teaching myself react,
570
00:29:03.724 --> 00:29:06.490
specifically react hooks,
571
00:29:06.490 --> 00:29:08.070
I was not aware of this,
572
00:29:08.070 --> 00:29:10.490
I simply saw the useEffect function,
573
00:29:10.490 --> 00:29:12.210
and I started playing around with it.
574
00:29:12.210 --> 00:29:15.550
And I didn't put in this second argument.
575
00:29:15.550 --> 00:29:20.550
What that means is that any type of action at all on
576
00:29:21.710 --> 00:29:24.900
the page is going trigger this,
577
00:29:24.900 --> 00:29:28.110
which means that if I left this in its current condition,
578
00:29:28.110 --> 00:29:31.900
it would call this function thousands of times,
579
00:29:31.900 --> 00:29:33.270
there would be nothing from stopping it,
580
00:29:33.270 --> 00:29:36.140
it would call it every time a user scrolled,
581
00:29:36.140 --> 00:29:39.530
every time a user made one little type,
582
00:29:39.530 --> 00:29:42.050
their one little key press into a form,
583
00:29:42.050 --> 00:29:43.960
it would be triggered.
584
00:29:43.960 --> 00:29:46.180
So that is really rare.
585
00:29:46.180 --> 00:29:47.620
And you can actually test this out,
586
00:29:47.620 --> 00:29:49.230
I'm gonna get rid of that call,
587
00:29:49.230 --> 00:29:51.330
because we don't want to call the API that many times,
588
00:29:51.330 --> 00:29:54.130
and I'm just gonna say console log.
589
00:29:54.130 --> 00:29:56.870
And let's say triggered, okay,
590
00:29:56.870 --> 00:30:01.190
so I'm gonna open up the console here,
591
00:30:01.190 --> 00:30:05.020
and we're gonna clear this just hit refresh.
592
00:30:05.020 --> 00:30:07.260
And you can see it says triggered right there.
593
00:30:07.260 --> 00:30:12.170
Now as I am kind of navigating around,
594
00:30:12.170 --> 00:30:15.070
or if I put like any changes to state,
595
00:30:15.070 --> 00:30:18.373
so I'm just gonna do something really quick here.
596
00:30:19.480 --> 00:30:21.230
And this is important.
597
00:30:21.230 --> 00:30:24.110
And you may wonder why I'm going into this right now.
598
00:30:24.110 --> 00:30:27.410
It is because I experienced this and it was not good.
599
00:30:27.410 --> 00:30:31.280
I had no idea why my server was getting hit thousands
600
00:30:31.280 --> 00:30:34.060
of times a second by a single application.
601
00:30:34.060 --> 00:30:37.740
And it was because I had not been told about
602
00:30:37.740 --> 00:30:40.660
this little tiny secret.
603
00:30:40.660 --> 00:30:43.760
So I'm gonna just show you something really kind
604
00:30:43.760 --> 00:30:44.593
of interesting here.
605
00:30:44.593 --> 00:30:47.060
And you also get to learn a little bit more about hooks.
606
00:30:47.060 --> 00:30:49.790
So I'm gonna say input.
607
00:30:49.790 --> 00:30:54.790
And let's say that we want to do just a value of demo.
608
00:30:57.600 --> 00:31:02.600
And then onChange we'll say, Val,
609
00:31:04.910 --> 00:31:07.943
fat arrow function, set Val.
610
00:31:09.094 --> 00:31:14.094
And let's see we'll do or actually, this one's gonna be EVT.
611
00:31:17.410 --> 00:31:21.440
And then evt.target.value.
612
00:31:21.440 --> 00:31:22.700
This is giving you a little preview
613
00:31:22.700 --> 00:31:25.960
of working with react forms too, and then we'll come up
614
00:31:25.960 --> 00:31:30.960
and create a very quick little thing called value
615
00:31:31.130 --> 00:31:34.403
and then set value.
616
00:31:37.370 --> 00:31:39.730
And then for here, I'll do an empty string.
617
00:31:39.730 --> 00:31:41.380
And you don't have to follow along with us,
618
00:31:41.380 --> 00:31:43.170
you can just kind of watch and see.
619
00:31:43.170 --> 00:31:48.170
Okay, so I've actually messed this up, set, demo.
620
00:31:50.270 --> 00:31:55.023
And then demo.
621
00:31:56.370 --> 00:31:57.203
There we go.
622
00:32:00.600 --> 00:32:02.290
Okay, all of that should work.
623
00:32:02.290 --> 00:32:03.823
Now I'm gonna hit save here.
624
00:32:05.140 --> 00:32:08.150
And so now we have this little form element.
625
00:32:08.150 --> 00:32:11.550
Now watch what happens down here at the bottom
626
00:32:11.550 --> 00:32:12.610
as I'm typing.
627
00:32:12.610 --> 00:32:15.610
Now all I'm doing is typing right here.
628
00:32:15.610 --> 00:32:17.780
I'm just typing this out.
629
00:32:17.780 --> 00:32:22.780
So far, in just a few seconds, this component has called
630
00:32:23.030 --> 00:32:28.030
this useEffect hook here 31 times, that is really bad.
631
00:32:30.010 --> 00:32:32.871
If you had placed get for,
632
00:32:32.871 --> 00:32:37.380
you'd call to get portfolio items 31 times
633
00:32:37.380 --> 00:32:42.380
there every single time that the form had been typed in,
634
00:32:42.910 --> 00:32:45.300
you could crash servers on that.
635
00:32:45.300 --> 00:32:47.460
And so because of that,
636
00:32:47.460 --> 00:32:49.690
that's a really bad idea.
637
00:32:49.690 --> 00:32:51.290
And you do not wanna do it.
638
00:32:51.290 --> 00:32:52.420
Don't worry about this input.
639
00:32:52.420 --> 00:32:53.400
I'm getting rid of this.
640
00:32:53.400 --> 00:32:56.980
I'm just showing you I wanted to put something in
641
00:32:56.980 --> 00:32:59.040
there, wanted just to show you hooks again,
642
00:32:59.040 --> 00:33:02.350
but also just because I wanted to show you how
643
00:33:02.350 --> 00:33:04.700
you could trigger that function.
644
00:33:04.700 --> 00:33:08.860
Now I'm gonna get rid of everything there that says demo
645
00:33:08.860 --> 00:33:13.390
and show you the final item here with useEffect.
646
00:33:13.390 --> 00:33:15.730
And that is, so what exactly does
647
00:33:15.730 --> 00:33:18.980
this magical little function here do?
648
00:33:18.980 --> 00:33:23.980
Well, this second argument allows us to tell react,
649
00:33:24.520 --> 00:33:26.880
that we do not wanna call
650
00:33:26.880 --> 00:33:30.800
this every time something changes in the component,
651
00:33:30.800 --> 00:33:34.500
we only want it to be called when the component loads up.
652
00:33:34.500 --> 00:33:37.670
So it's just gonna be called one time in this case,
653
00:33:37.670 --> 00:33:39.650
and that's exactly what we're wanting,
654
00:33:39.650 --> 00:33:43.680
we do not want to get the portfolio items multiple times,
655
00:33:43.680 --> 00:33:46.699
we just need that to be called a single time when
656
00:33:46.699 --> 00:33:49.200
the component loads.
657
00:33:49.200 --> 00:33:50.610
So I know that was a lot of data.
658
00:33:50.610 --> 00:33:54.090
This is one of the longer guides in the entire course,
659
00:33:54.090 --> 00:33:59.090
because we covered some of the biggest foundational concepts
660
00:33:59.220 --> 00:34:01.330
that you're gonna be using as long as
661
00:34:01.330 --> 00:34:03.160
you build react application,
662
00:34:03.160 --> 00:34:06.160
so really nice job if you went through that.
663
00:34:06.160 --> 00:34:09.110
And so I'm gonna clear out these comments,
664
00:34:09.110 --> 00:34:11.790
save everything here is still working.
665
00:34:11.790 --> 00:34:15.180
And I want you to take a break from the videos now,
666
00:34:15.180 --> 00:34:17.110
especially 'cause this one is so long.
667
00:34:17.110 --> 00:34:19.840
And I want you to go to this page,
668
00:34:19.840 --> 00:34:22.400
which I'll give you a link for in the show notes.
669
00:34:22.400 --> 00:34:25.260
And I want you to start going through
670
00:34:25.260 --> 00:34:28.200
the axios documentation.
671
00:34:28.200 --> 00:34:30.400
And I'm not doing this just because I want
672
00:34:30.400 --> 00:34:32.710
to give you busy work or anything like that.
673
00:34:32.710 --> 00:34:36.300
I'm doing this because you're taking this course,
674
00:34:36.300 --> 00:34:39.430
to learn how to be a developer,
675
00:34:39.430 --> 00:34:42.250
one of the most important skills
676
00:34:42.250 --> 00:34:45.990
that you're gonna have as a developer is learning
677
00:34:45.990 --> 00:34:48.450
to read the documentation,
678
00:34:48.450 --> 00:34:50.950
you're gonna be able to learn so much
679
00:34:50.950 --> 00:34:53.064
from getting instructions from
680
00:34:53.064 --> 00:34:56.290
the developers who wrote the libraries.
681
00:34:56.290 --> 00:34:59.670
So for example, right here you can see with axios
682
00:34:59.670 --> 00:35:03.900
it's starts off with pretty much exactly what we did.
683
00:35:03.900 --> 00:35:07.650
We made an axios call, we call this get function,
684
00:35:07.650 --> 00:35:12.360
the same one we called, we passed in a API endpoint.
685
00:35:12.360 --> 00:35:14.990
And then we called the then function.
686
00:35:14.990 --> 00:35:16.730
So I want you to go through,
687
00:35:16.730 --> 00:35:19.683
I really want you to kind of become familiar with
688
00:35:19.683 --> 00:35:23.930
the different functions that you're going to be able to use
689
00:35:23.930 --> 00:35:26.780
and really all the variations that they offer
690
00:35:26.780 --> 00:35:28.900
because that's gonna take your knowledge
691
00:35:28.900 --> 00:35:31.580
and everything that we just learned in this guide,
692
00:35:31.580 --> 00:35:33.980
and it's really going to extend it
693
00:35:33.980 --> 00:35:36.470
and it's also gonna give you a really nice preview
694
00:35:36.470 --> 00:35:40.280
for other concepts that we're gonna cover later on
695
00:35:40.280 --> 00:35:41.710
in the course.
696
00:35:41.710 --> 00:35:44.840
Really nice job and I will see you after you've gone
697
00:35:44.840 --> 00:35:46.203
through that documentation.