- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.740 --> 00:00:03.290
Now that you understand how map works,
2
00:00:03.290 --> 00:00:05.760
and how you can iterate over a collection,
3
00:00:05.760 --> 00:00:10.370
we are gonna start to dive into some React best practices.
4
00:00:10.370 --> 00:00:13.960
And we're gonna start to actually break this component
5
00:00:13.960 --> 00:00:16.480
into even smaller components.
6
00:00:16.480 --> 00:00:20.200
And if you think that's crazy, just follow along,
7
00:00:20.200 --> 00:00:22.170
because as you're gonna see,
8
00:00:22.170 --> 00:00:26.450
especially as this functionality starts to get more complex,
9
00:00:26.450 --> 00:00:31.060
breaking these items into as small components as possible
10
00:00:31.060 --> 00:00:32.710
is gonna be critical
11
00:00:32.710 --> 00:00:36.500
for being able to create manageable code.
12
00:00:36.500 --> 00:00:40.500
So everything that we're doing is a component.
13
00:00:40.500 --> 00:00:43.880
And because of that, it gives us a lot of flexibility
14
00:00:43.880 --> 00:00:47.550
in being able to organize these components in a way
15
00:00:47.550 --> 00:00:52.360
that they actually make sense and they are easier to change.
16
00:00:52.360 --> 00:00:56.030
Nothing is harder than if you were to try to load up
17
00:00:56.030 --> 00:00:59.830
all the functionality, especially for a complex feature
18
00:00:59.830 --> 00:01:01.680
into a single component.
19
00:01:01.680 --> 00:01:04.730
I've done that before, and I wanna make sure
20
00:01:04.730 --> 00:01:07.500
that you do not have to fall into that same trap
21
00:01:07.500 --> 00:01:11.890
because it's a very hard once you have completed a feature
22
00:01:11.890 --> 00:01:14.800
to break it into those smaller chunks.
23
00:01:14.800 --> 00:01:18.140
So it's better to approach it like we're about to do now,
24
00:01:18.140 --> 00:01:19.760
where we're gonna start
25
00:01:19.760 --> 00:01:22.840
with a really nice organized feature.
26
00:01:22.840 --> 00:01:26.800
So for example, our portfolio items right here,
27
00:01:26.800 --> 00:01:30.100
this is now going to actually be broken
28
00:01:30.100 --> 00:01:32.860
into a few separate components.
29
00:01:32.860 --> 00:01:35.340
So this items renderer,
30
00:01:35.340 --> 00:01:37.430
I'm gonna turn this into
31
00:01:37.430 --> 00:01:42.080
its own dedicated portfolio items list component.
32
00:01:42.080 --> 00:01:43.820
So let's get started with that.
33
00:01:43.820 --> 00:01:46.060
I'm gonna do it right in the same file
34
00:01:46.060 --> 00:01:47.710
just so you can see everything
35
00:01:47.710 --> 00:01:49.630
and I'll say const
36
00:01:49.630 --> 00:01:52.880
and then let's call it portfolio
37
00:01:52.880 --> 00:01:54.270
items
38
00:01:54.270 --> 00:01:55.320
list,
39
00:01:55.320 --> 00:01:58.640
and it's not gonna take in any arguments right now.
40
00:01:58.640 --> 00:02:02.120
And then it is simply going to
41
00:02:02.120 --> 00:02:03.590
essentially do everything
42
00:02:03.590 --> 00:02:06.510
that this items renderer function is doing.
43
00:02:06.510 --> 00:02:09.030
And if you're curious on why we're doing this,
44
00:02:09.030 --> 00:02:11.550
one, it's very good practice,
45
00:02:11.550 --> 00:02:15.620
because this is a task you're gonna be doing a lot.
46
00:02:15.620 --> 00:02:17.340
So the more times we go over it,
47
00:02:17.340 --> 00:02:19.000
the more it's gonna start to sink in,
48
00:02:19.000 --> 00:02:20.150
and it's gonna make sense.
49
00:02:20.150 --> 00:02:22.350
And this is just gonna be a second nature
50
00:02:22.350 --> 00:02:24.080
type of task for you.
51
00:02:24.080 --> 00:02:26.100
The other reason is because
52
00:02:26.100 --> 00:02:28.730
once we implement and start implementing
53
00:02:28.730 --> 00:02:30.980
the drag and drop functionality,
54
00:02:30.980 --> 00:02:34.340
you're gonna see that that has a lot of code.
55
00:02:34.340 --> 00:02:36.170
And in order to do this properly
56
00:02:36.170 --> 00:02:37.490
in a way that we can really
57
00:02:37.490 --> 00:02:39.920
kind of hold all the functionality in our head,
58
00:02:39.920 --> 00:02:41.780
and it doesn't become too overwhelming
59
00:02:41.780 --> 00:02:46.190
is by breaking this into much smaller types of chunks.
60
00:02:46.190 --> 00:02:48.840
So for this portfolio items list,
61
00:02:48.840 --> 00:02:53.230
this is where we're gonna move the items.
62
00:02:53.230 --> 00:02:55.930
So we can paste that variable in there.
63
00:02:55.930 --> 00:02:57.500
And then also
64
00:02:57.500 --> 00:03:01.223
this is where that items renderer function is gonna go.
65
00:03:02.430 --> 00:03:05.160
So we can paste this in here.
66
00:03:05.160 --> 00:03:07.190
And then all I'm gonna do
67
00:03:07.190 --> 00:03:11.730
is I'm gonna return that items renderer function.
68
00:03:11.730 --> 00:03:14.320
So I'm gonna say, return
69
00:03:14.320 --> 00:03:18.873
and then I'm gonna pull all of this code out.
70
00:03:21.160 --> 00:03:24.380
So I'm gonna return items renderer wrapped in a div.
71
00:03:24.380 --> 00:03:28.220
And now inside of our portfolio items component,
72
00:03:28.220 --> 00:03:33.220
I can simply call that portfolio items list component.
73
00:03:34.900 --> 00:03:35.910
Hit save,
74
00:03:35.910 --> 00:03:39.220
and now you can see everything's still working the same.
75
00:03:39.220 --> 00:03:42.090
So now let's actually move this into its own file.
76
00:03:42.090 --> 00:03:46.090
So inside of the same portfolio directory,
77
00:03:46.090 --> 00:03:47.710
inside of components,
78
00:03:47.710 --> 00:03:49.560
let's create a new file here
79
00:03:49.560 --> 00:03:54.423
called portfolioitemslist.js.
80
00:03:55.640 --> 00:03:59.620
And let's just move all of this code inside of it.
81
00:03:59.620 --> 00:04:01.923
So I'm gonna take all of that out,
82
00:04:02.760 --> 00:04:05.650
paste it in, and then we'll make just a few changes.
83
00:04:05.650 --> 00:04:10.030
First, we need to import React from React.
84
00:04:10.030 --> 00:04:11.570
And then here,
85
00:04:11.570 --> 00:04:16.060
I'm just going to use our normal export
86
00:04:17.620 --> 00:04:18.840
default.
87
00:04:18.840 --> 00:04:23.150
And that's gonna be our portfolio items list component.
88
00:04:23.150 --> 00:04:24.580
So I can hit save here.
89
00:04:24.580 --> 00:04:27.320
And you'll see eventually, once we implement drag and drop,
90
00:04:27.320 --> 00:04:30.470
this is gonna start to get a little bit more complex.
91
00:04:30.470 --> 00:04:33.250
And that's part of the reason we're wanting to break this up
92
00:04:33.250 --> 00:04:35.100
into small pieces now.
93
00:04:35.100 --> 00:04:37.430
And then all we have to do now
94
00:04:37.430 --> 00:04:39.710
inside of this component is import it.
95
00:04:39.710 --> 00:04:44.710
So I can say import portfolio items list from dot slash,
96
00:04:45.240 --> 00:04:47.790
because remember, we're in the same directory.
97
00:04:47.790 --> 00:04:50.630
And now if I hit save here,
98
00:04:50.630 --> 00:04:52.930
everything should still work, and it does.
99
00:04:52.930 --> 00:04:54.970
So one more item
100
00:04:54.970 --> 00:04:57.930
because even though we have now broken this
101
00:04:57.930 --> 00:05:00.900
into two components, we can even do better.
102
00:05:00.900 --> 00:05:03.060
Because as you're gonna see,
103
00:05:03.060 --> 00:05:07.900
this item renderer is gonna start to get pretty big
104
00:05:07.900 --> 00:05:09.700
because if you go,
105
00:05:09.700 --> 00:05:12.520
if you remember what our final version
106
00:05:12.520 --> 00:05:13.970
of this feature is gonna be,
107
00:05:13.970 --> 00:05:17.620
we're gonna have a title, we're gonna have a logo,
108
00:05:17.620 --> 00:05:19.180
we're gonna have a background image,
109
00:05:19.180 --> 00:05:20.420
we're gonna have a description,
110
00:05:20.420 --> 00:05:22.300
we're gonna have custom styles
111
00:05:22.300 --> 00:05:24.350
and all of those kinds of things.
112
00:05:24.350 --> 00:05:26.190
And so because of that,
113
00:05:26.190 --> 00:05:29.840
we want to make sure that we can manage that logic
114
00:05:29.840 --> 00:05:31.880
in a more intuitive way.
115
00:05:31.880 --> 00:05:36.820
So let's create an actual portfolio item component.
116
00:05:36.820 --> 00:05:38.760
So let's, and we're gonna start
117
00:05:38.760 --> 00:05:41.420
just by creating the file from scratch,
118
00:05:41.420 --> 00:05:43.610
we won't even put it in the file
119
00:05:43.610 --> 00:05:45.770
in the portfolio item list file.
120
00:05:45.770 --> 00:05:50.770
So here let's just create a portfolio item.js component,
121
00:05:51.300 --> 00:05:54.210
and I'll import React
122
00:05:54.210 --> 00:05:55.263
from React.
123
00:05:56.430 --> 00:05:57.790
And now let's use
124
00:05:57.790 --> 00:06:00.720
our basic type of setup.
125
00:06:00.720 --> 00:06:02.710
So now we're gonna use props though.
126
00:06:02.710 --> 00:06:05.880
So I'm gonna say export default,
127
00:06:05.880 --> 00:06:08.430
but now we're gonna use props.
128
00:06:08.430 --> 00:06:11.720
And then we're going to, inside of it,
129
00:06:11.720 --> 00:06:13.370
we're gonna return
130
00:06:13.370 --> 00:06:16.940
everything that we currently have in the map.
131
00:06:16.940 --> 00:06:19.440
So I'm going to, in the items renderer,
132
00:06:19.440 --> 00:06:22.010
I'm gonna remove that div.
133
00:06:22.010 --> 00:06:26.330
And we're gonna say return and just paste that in.
134
00:06:26.330 --> 00:06:28.720
Now, we're not gonna need the key prop here
135
00:06:28.720 --> 00:06:32.033
at the portfolio item level, so I can get rid of this.
136
00:06:32.870 --> 00:06:36.080
And then in the item title,
137
00:06:36.080 --> 00:06:39.347
this is actually gonna say props.itemtitle,
138
00:06:40.268 --> 00:06:41.860
so I can hit save here.
139
00:06:41.860 --> 00:06:44.820
And if this is a little bit confusing to you,
140
00:06:44.820 --> 00:06:45.810
don't worry right now,
141
00:06:45.810 --> 00:06:48.470
this is the reason why I'm breaking these up,
142
00:06:48.470 --> 00:06:51.450
because this is gonna give you a lot of good practice
143
00:06:51.450 --> 00:06:54.610
on understanding how props work.
144
00:06:54.610 --> 00:06:58.850
So, we know now, that we need to receive
145
00:06:58.850 --> 00:07:00.690
a item prop.
146
00:07:00.690 --> 00:07:04.310
So if I come up to our portfolio items list,
147
00:07:04.310 --> 00:07:07.660
what we're gonna do now is we're actually gonna pull in
148
00:07:07.660 --> 00:07:09.360
that portfolio item.
149
00:07:09.360 --> 00:07:11.730
So you can use either auto import,
150
00:07:11.730 --> 00:07:16.383
or you can just say import portfolio item from React.
151
00:07:17.370 --> 00:07:19.100
And then down here,
152
00:07:19.100 --> 00:07:21.510
what we're gonna do is now we're gonna just say
153
00:07:21.510 --> 00:07:24.780
that we want to call that portfolio item
154
00:07:24.780 --> 00:07:29.780
and pass in the item prop, and then we'll pass in item here,
155
00:07:30.400 --> 00:07:32.360
and then close that off.
156
00:07:32.360 --> 00:07:35.580
Now, if I hit save, everything should still work the same.
157
00:07:35.580 --> 00:07:37.450
And it looks like we have a little bit of an error
158
00:07:37.450 --> 00:07:40.360
which is perfectly fine, let's take a look at it.
159
00:07:40.360 --> 00:07:45.360
I'm gonna pop open the console and let's take a look at it.
160
00:07:45.790 --> 00:07:48.570
Okay, what is this one, it says
161
00:07:48.570 --> 00:07:50.860
React create element type is invalid,
162
00:07:50.860 --> 00:07:53.610
expected a string for built in components.
163
00:07:53.610 --> 00:07:55.530
Okay, but it got an object.
164
00:07:55.530 --> 00:07:57.570
Oh, okay, that tells us something.
165
00:07:57.570 --> 00:08:02.570
So right here, it expected a string but it got an object.
166
00:08:02.740 --> 00:08:05.270
Let's take a look at what we sent in.
167
00:08:05.270 --> 00:08:07.690
So we passed in item
168
00:08:07.690 --> 00:08:08.880
as a prop.
169
00:08:08.880 --> 00:08:12.470
So this is really where the core of the issue is.
170
00:08:12.470 --> 00:08:14.390
So we're passing in an item,
171
00:08:14.390 --> 00:08:15.680
and then we have props,
172
00:08:15.680 --> 00:08:20.180
and then we're rendering propsitem.title.
173
00:08:20.180 --> 00:08:22.010
If I'm gonna debug this,
174
00:08:22.010 --> 00:08:24.380
which is exactly what we're doing right now,
175
00:08:24.380 --> 00:08:25.213
I wanna go in,
176
00:08:25.213 --> 00:08:28.640
I wanna take a look at what this props data
177
00:08:28.640 --> 00:08:30.040
is actually looking like.
178
00:08:30.040 --> 00:08:31.510
So how can we do that?
179
00:08:31.510 --> 00:08:34.130
Well, we can use a console log statement here.
180
00:08:34.130 --> 00:08:36.400
So I can say console log,
181
00:08:36.400 --> 00:08:39.750
and then I can just say,
182
00:08:39.750 --> 00:08:44.140
provide a string, and let's just say this is our props,
183
00:08:44.140 --> 00:08:46.990
comma, and then let's just see what data
184
00:08:46.990 --> 00:08:49.510
we have access to with our props.
185
00:08:49.510 --> 00:08:51.090
So I'll hit save here,
186
00:08:51.090 --> 00:08:54.910
and then I can hit save here if I've made any changes
187
00:08:54.910 --> 00:08:56.833
and I'm just double checking to see,
188
00:08:57.940 --> 00:09:00.380
if there's anything else that I can see.
189
00:09:00.380 --> 00:09:02.020
And this bugs are not planned,
190
00:09:02.020 --> 00:09:05.180
this is exactly the flow that I would follow
191
00:09:05.180 --> 00:09:08.030
if I ran into a similar issue.
192
00:09:08.030 --> 00:09:10.770
So, and I already see what the issue is.
193
00:09:10.770 --> 00:09:14.190
If you look up here, I called it portfolio item,
194
00:09:14.190 --> 00:09:16.320
you probably saw that as well.
195
00:09:16.320 --> 00:09:18.550
Okay, so let's import that.
196
00:09:18.550 --> 00:09:22.140
So I'm gonna pull in my portfolio item, hit save.
197
00:09:22.140 --> 00:09:24.500
And there we go, everything's working.
198
00:09:24.500 --> 00:09:26.390
But also, let's continue the debugging.
199
00:09:26.390 --> 00:09:28.340
Let's pretend that that didn't fix it.
200
00:09:28.340 --> 00:09:30.930
So we have our console log statement here.
201
00:09:30.930 --> 00:09:33.270
Let's open up the console again.
202
00:09:33.270 --> 00:09:35.510
And let's see what we have access to.
203
00:09:35.510 --> 00:09:37.540
So I'm gonna hit refresh.
204
00:09:37.540 --> 00:09:40.620
And you can see that props here
205
00:09:40.620 --> 00:09:43.670
is giving us access to the item
206
00:09:43.670 --> 00:09:47.760
which gives us access to the ID and to the title.
207
00:09:47.760 --> 00:09:50.040
And so that's for the first one it's Quip.
208
00:09:50.040 --> 00:09:51.410
The next one's Eventbrite.
209
00:09:51.410 --> 00:09:52.960
And then the third one is DevCamp.
210
00:09:52.960 --> 00:09:54.930
Do you see how that's working?
211
00:09:54.930 --> 00:09:58.910
You see how we're passing in that single item object
212
00:09:58.910 --> 00:10:01.080
with each iteration.
213
00:10:01.080 --> 00:10:04.730
So each time we're looping over, we're passing that data in.
214
00:10:04.730 --> 00:10:06.710
So that's what we have access to.
215
00:10:06.710 --> 00:10:09.920
So I'm gonna get rid of this console log statement.
216
00:10:09.920 --> 00:10:11.280
And you may notice we have our,
217
00:10:11.280 --> 00:10:13.310
we're back to having our key error.
218
00:10:13.310 --> 00:10:16.930
Now you're not gonna use the key inside of portfolio item.
219
00:10:16.930 --> 00:10:18.700
Instead, what you can do
220
00:10:18.700 --> 00:10:21.980
is you can actually pass that directly to the component.
221
00:10:21.980 --> 00:10:24.400
So I can say key equals,
222
00:10:24.400 --> 00:10:26.633
and then item.id.
223
00:10:27.560 --> 00:10:30.020
Hit save, and now if you open up the console,
224
00:10:30.020 --> 00:10:33.200
you're not gonna have that key warning anymore.
225
00:10:33.200 --> 00:10:35.820
So why are we doing this?
226
00:10:35.820 --> 00:10:39.720
Well, let's see, in addition to practice and learning React,
227
00:10:39.720 --> 00:10:41.840
let's also see how much easier it is
228
00:10:41.840 --> 00:10:43.490
to make some changes here.
229
00:10:43.490 --> 00:10:48.470
So we have our title, and then let's add a description.
230
00:10:48.470 --> 00:10:52.690
So I'm gonna say description and we'll say,
231
00:10:52.690 --> 00:10:53.680
Toothbrush
232
00:10:54.690 --> 00:10:55.890
company.
233
00:10:55.890 --> 00:10:58.077
I'll eventually add better descriptions than this,
234
00:10:58.077 --> 00:10:59.910
but you don't wanna watch me,
235
00:10:59.910 --> 00:11:01.730
you don't wanna watch me type all this.
236
00:11:01.730 --> 00:11:06.730
So I'll say description for eventbrite is a event planning.
237
00:11:07.660 --> 00:11:09.300
And then for devcamp,
238
00:11:09.300 --> 00:11:14.300
the description is gonna be a coding LMS
239
00:11:14.310 --> 00:11:15.860
learning management system.
240
00:11:15.860 --> 00:11:18.590
Okay, so we've now added to our object.
241
00:11:18.590 --> 00:11:21.450
And this is also, this is getting us closer
242
00:11:21.450 --> 00:11:23.930
to being able to make the API call
243
00:11:23.930 --> 00:11:28.320
that will allow us to pull in the live data from the server.
244
00:11:28.320 --> 00:11:30.470
So each one of these items
245
00:11:30.470 --> 00:11:33.870
is mapping to what you're already gonna be doing.
246
00:11:33.870 --> 00:11:36.300
So let's say for our portfolio items
247
00:11:36.300 --> 00:11:39.200
now, we want more than the title.
248
00:11:39.200 --> 00:11:41.440
Now we also want that description.
249
00:11:41.440 --> 00:11:45.560
So I can say props.item.description,
250
00:11:45.560 --> 00:11:48.950
because we know that the items have a description.
251
00:11:48.950 --> 00:11:50.580
And now look at that.
252
00:11:50.580 --> 00:11:53.750
Now we're actually rendering that code out
253
00:11:53.750 --> 00:11:55.950
as well in that data.
254
00:11:55.950 --> 00:12:00.130
So hopefully, this is starting to make sense if you can see
255
00:12:00.130 --> 00:12:03.380
if we were to continue to build out
256
00:12:03.380 --> 00:12:06.040
this portfolio item record,
257
00:12:06.040 --> 00:12:08.710
but we kept it in the list component,
258
00:12:08.710 --> 00:12:13.020
this function of items renderer would start to get very long
259
00:12:13.020 --> 00:12:15.040
and very difficult to manage.
260
00:12:15.040 --> 00:12:17.860
But instead, we're breaking this up
261
00:12:17.860 --> 00:12:20.370
into small manageable chunks that's there,
262
00:12:20.370 --> 00:12:22.770
it's gonna make life much easier for us,
263
00:12:22.770 --> 00:12:26.060
especially when we start adding advanced features.
264
00:12:26.060 --> 00:12:29.630
So we have each one of these records in there.
265
00:12:29.630 --> 00:12:32.390
And so now let's take a look
266
00:12:32.390 --> 00:12:34.940
and see if there's anything else that we need to do.
267
00:12:34.940 --> 00:12:37.670
There's one small refactor.
268
00:12:37.670 --> 00:12:42.670
And if you remember back to the JavaScript course,
269
00:12:42.700 --> 00:12:45.700
then you remember the concept of destructuring.
270
00:12:45.700 --> 00:12:47.670
That's where you can take an object
271
00:12:47.670 --> 00:12:50.030
and you can extract data out of it.
272
00:12:50.030 --> 00:12:52.960
And that's gonna make our code much more readable.
273
00:12:52.960 --> 00:12:55.400
So instead, I don't wanna have to say
274
00:12:55.400 --> 00:12:59.530
props.item.title, props.item.description,
275
00:12:59.530 --> 00:13:02.550
and then imagine we're bringing in our logo file
276
00:13:02.550 --> 00:13:04.270
and we have all of those kinds of things.
277
00:13:04.270 --> 00:13:06.230
I don't wanna have to type this out.
278
00:13:06.230 --> 00:13:08.040
And that's really repetitive.
279
00:13:08.040 --> 00:13:11.230
So instead, what I can do here, is I can use destructuring.
280
00:13:11.230 --> 00:13:12.840
So right above the return statement,
281
00:13:12.840 --> 00:13:16.510
I'm gonna say const and then pass in an object
282
00:13:16.510 --> 00:13:21.063
and set that equal to props.item.
283
00:13:22.220 --> 00:13:25.260
And now what I can do is inside of here,
284
00:13:25.260 --> 00:13:28.580
I can say title and description.
285
00:13:28.580 --> 00:13:31.970
And now I can clean up all of our JSX code.
286
00:13:31.970 --> 00:13:36.800
So now I can remove the props.item for each of those,
287
00:13:36.800 --> 00:13:38.010
hit save.
288
00:13:38.010 --> 00:13:41.580
And now you can see everything there is still working.
289
00:13:41.580 --> 00:13:45.350
So this is working really nicely.
290
00:13:45.350 --> 00:13:47.850
Let's just kind of review really quick
291
00:13:47.850 --> 00:13:49.450
what we did in this guide.
292
00:13:49.450 --> 00:13:52.810
So we created, we started with all of our logic
293
00:13:52.810 --> 00:13:55.070
in the portfolio items component.
294
00:13:55.070 --> 00:13:58.030
We broke that into a list component.
295
00:13:58.030 --> 00:14:00.010
This is managing the data
296
00:14:00.010 --> 00:14:04.860
and then it is rendering over, its mapping over that list.
297
00:14:04.860 --> 00:14:07.240
Now, inside of here,
298
00:14:07.240 --> 00:14:11.570
we extracted out the portfolio item logic
299
00:14:11.570 --> 00:14:14.440
into its own dedicated component.
300
00:14:14.440 --> 00:14:18.560
We were also able to see how we could pass data
301
00:14:18.560 --> 00:14:21.550
and a full object in as a prop.
302
00:14:21.550 --> 00:14:24.850
And then inside of the portfolio item,
303
00:14:24.850 --> 00:14:27.910
we were able to then extract that data out,
304
00:14:27.910 --> 00:14:29.250
to destructure it,
305
00:14:29.250 --> 00:14:33.020
and then to render multiple elements on the page.
306
00:14:33.020 --> 00:14:35.170
So great job if you went through that.
307
00:14:35.170 --> 00:14:38.230
In the next guide, it's gonna start to get really fun
308
00:14:38.230 --> 00:14:41.540
because we are going to switch
309
00:14:41.540 --> 00:14:45.210
and instead of having this data hard coded in,
310
00:14:45.210 --> 00:14:49.050
we're gonna start learning how we can call an API
311
00:14:49.050 --> 00:14:51.520
and get live data in from a server
312
00:14:51.520 --> 00:14:53.693
and then render that onto the screen.