- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.730 --> 00:00:02.380
In this guide, we're gonna finish going
2
00:00:02.380 --> 00:00:04.380
through the static directory
3
00:00:04.380 --> 00:00:06.340
and we also are gonna see
4
00:00:06.340 --> 00:00:09.830
how we can work with images in React.
5
00:00:09.830 --> 00:00:11.270
So let's get started.
6
00:00:11.270 --> 00:00:14.240
So I'm gonna start off, the final item here
7
00:00:14.240 --> 00:00:17.770
is that is in the root of the static directory
8
00:00:17.770 --> 00:00:21.470
is called this favicon.ico.
9
00:00:21.470 --> 00:00:25.900
Now, that is just a image file.
10
00:00:25.900 --> 00:00:30.290
It's an image file with a very specific file type
11
00:00:30.290 --> 00:00:33.950
called the .ico file type.
12
00:00:33.950 --> 00:00:35.460
What that is used for,
13
00:00:35.460 --> 00:00:38.350
if you've never heard of that before,
14
00:00:38.350 --> 00:00:43.220
the favicon is the little image up here in the browser.
15
00:00:43.220 --> 00:00:45.780
So it's just that little tiny icon
16
00:00:45.780 --> 00:00:47.260
that is right up here.
17
00:00:47.260 --> 00:00:50.140
Now, by default, we don't really have one here.
18
00:00:50.140 --> 00:00:53.120
So later on you can add one.
19
00:00:53.120 --> 00:00:57.340
There are plenty of sites you can really just google
20
00:00:57.340 --> 00:00:58.990
'cause this is exactly what I do
21
00:00:58.990 --> 00:01:00.480
whenever I need to do it
22
00:01:00.480 --> 00:01:04.630
is ico generator.
23
00:01:04.630 --> 00:01:07.380
And you can go to one of these sites,
24
00:01:07.380 --> 00:01:09.070
upload your own logo
25
00:01:09.070 --> 00:01:11.120
or whatever little image you want there.
26
00:01:11.120 --> 00:01:13.550
It'll generate that ico file,
27
00:01:13.550 --> 00:01:16.960
place it in this directory and that will show up.
28
00:01:16.960 --> 00:01:18.630
That's all you need to do with that one.
29
00:01:18.630 --> 00:01:19.900
Now, what I wanna show you
30
00:01:19.900 --> 00:01:22.460
is the assets directory.
31
00:01:22.460 --> 00:01:24.850
So if you go to static, assets
32
00:01:24.850 --> 00:01:26.580
and then click on the README file,
33
00:01:26.580 --> 00:01:29.150
you actually have some instructions here.
34
00:01:29.150 --> 00:01:31.430
This says put your assets here.
35
00:01:31.430 --> 00:01:34.090
Images and other standalone libraries.
36
00:01:34.090 --> 00:01:36.170
Now, we're not gonna worry about number two.
37
00:01:36.170 --> 00:01:38.280
It would be incredibly rare
38
00:01:38.280 --> 00:01:40.260
that you would use a library
39
00:01:40.260 --> 00:01:43.230
that isn't supported by npm nowadays.
40
00:01:43.230 --> 00:01:44.970
So I wouldn't worry about that
41
00:01:44.970 --> 00:01:47.460
but that's just a note that if you ever did need
42
00:01:47.460 --> 00:01:49.250
to put some other code library,
43
00:01:49.250 --> 00:01:50.820
you could put it there.
44
00:01:50.820 --> 00:01:52.430
Now, images though,
45
00:01:52.430 --> 00:01:54.220
any time that you have an image
46
00:01:54.220 --> 00:01:56.720
that is static, which means that we're not going
47
00:01:56.720 --> 00:02:00.530
to go out to a web service or an API
48
00:02:00.530 --> 00:02:04.110
or a different server and request that image,
49
00:02:04.110 --> 00:02:08.700
you can place image files directly in this directory
50
00:02:08.700 --> 00:02:11.810
and then you can call them from within the application.
51
00:02:11.810 --> 00:02:13.890
And that's what we're gonna do in this guide.
52
00:02:13.890 --> 00:02:16.030
So I'm gonna close the README here
53
00:02:16.030 --> 00:02:18.480
and let's see how we can add images.
54
00:02:18.480 --> 00:02:21.290
I have some images for you that you can use
55
00:02:21.290 --> 00:02:23.080
if you do not have your own.
56
00:02:23.080 --> 00:02:25.790
I'm going to add a logo,
57
00:02:25.790 --> 00:02:28.020
or this is gonna be the start of a logo
58
00:02:28.020 --> 00:02:32.340
that will be on the top left-hand side of the navigation bar
59
00:02:32.340 --> 00:02:33.710
once we add our styles.
60
00:02:33.710 --> 00:02:36.910
So I picked out a few icons that you can use
61
00:02:36.910 --> 00:02:39.210
and let's see how we can work with them.
62
00:02:39.210 --> 00:02:42.040
There are a couple ways that you can add images
63
00:02:42.040 --> 00:02:44.240
inside of this directory.
64
00:02:44.240 --> 00:02:47.510
One, you could simply use the file explorer
65
00:02:47.510 --> 00:02:50.910
or the finder and navigate to your project
66
00:02:50.910 --> 00:02:54.510
and then navigate through the application,
67
00:02:54.510 --> 00:02:55.810
the static directory
68
00:02:55.810 --> 00:02:57.310
and then the assets directory
69
00:02:57.310 --> 00:03:00.900
and you can copy and paste the files right in there.
70
00:03:00.900 --> 00:03:02.810
Another shortcut that you can do
71
00:03:02.810 --> 00:03:06.240
is you can right click on assets
72
00:03:06.240 --> 00:03:11.000
and you can click and say Reveal in Finder.
73
00:03:11.000 --> 00:03:12.490
And you can open that up
74
00:03:12.490 --> 00:03:15.930
and that'll actually open up that exact directory
75
00:03:15.930 --> 00:03:16.950
right in your finder.
76
00:03:16.950 --> 00:03:20.130
If you're in Windows, it'll open up in your explorer.
77
00:03:20.130 --> 00:03:24.010
And one other trick that I wanna show you
78
00:03:24.010 --> 00:03:25.710
is this one right here.
79
00:03:25.710 --> 00:03:29.220
If you open up your terminal,
80
00:03:29.220 --> 00:03:32.140
so let me close out of this
81
00:03:32.140 --> 00:03:34.170
and open up your terminal,
82
00:03:34.170 --> 00:03:36.220
you can type open
83
00:03:36.220 --> 00:03:38.900
and then the path to the directory
84
00:03:38.900 --> 00:03:40.297
that you wanna open.
85
00:03:40.297 --> 00:03:44.439
So you can say open static/assets/ just like this.
86
00:03:44.439 --> 00:03:47.180
Hit Return and then that opens up.
87
00:03:47.180 --> 00:03:50.170
I'm pretty sure that also works on a PC
88
00:03:50.170 --> 00:03:51.250
but I haven't tried that out
89
00:03:51.250 --> 00:03:53.470
because I don't do a ton of development on PC
90
00:03:53.470 --> 00:03:55.520
but in Mac, that will work.
91
00:03:55.520 --> 00:03:58.740
So you can see this is your static assets directory.
92
00:03:58.740 --> 00:04:03.270
Now, I have a set of images here that I've downloaded
93
00:04:03.270 --> 00:04:05.569
and I've made sure they're all the right size
94
00:04:05.569 --> 00:04:09.610
and you can download these in the show notes.
95
00:04:09.610 --> 00:04:12.130
I'll give you a link to a GitHub page
96
00:04:12.130 --> 00:04:14.970
where you can just go and just right click on the image
97
00:04:14.970 --> 00:04:16.320
and download it.
98
00:04:16.320 --> 00:04:18.290
So you can download whichever one you want
99
00:04:18.290 --> 00:04:19.630
or you could use all of 'em.
100
00:04:19.630 --> 00:04:24.630
And I'm going to drag these into that assets directory.
101
00:04:24.630 --> 00:04:25.490
And if you wanted,
102
00:04:25.490 --> 00:04:28.210
you would even create another directory inside of here.
103
00:04:28.210 --> 00:04:30.470
So you could create a directory
104
00:04:30.470 --> 00:04:34.310
either in Visual Studio Code or here called images
105
00:04:34.310 --> 00:04:38.050
and then you could put all of those image files
106
00:04:38.050 --> 00:04:39.330
into that directory
107
00:04:39.330 --> 00:04:40.940
if you wanna organize them like that.
108
00:04:40.940 --> 00:04:43.900
That's usually the approach that I take with them.
109
00:04:43.900 --> 00:04:46.110
Okay, so nothing's happening on the screen
110
00:04:46.110 --> 00:04:49.140
'cause we haven't called any of those image files yet.
111
00:04:49.140 --> 00:04:51.460
So let's do that now.
112
00:04:51.460 --> 00:04:54.200
I'm gonna open up our src directory
113
00:04:54.200 --> 00:04:58.320
and then components, shared, NavBar.
114
00:04:58.320 --> 00:05:01.410
Now here, I want to pull that image in.
115
00:05:01.410 --> 00:05:02.900
So how so we do that?
116
00:05:02.900 --> 00:05:04.550
Well, you know from HTML,
117
00:05:04.550 --> 00:05:07.660
you would create a img tag.
118
00:05:07.660 --> 00:05:10.510
So I'm gonna create an img tag here
119
00:05:10.510 --> 00:05:14.060
and then it needs a src or a source.
120
00:05:14.060 --> 00:05:16.600
But how we call these images
121
00:05:16.600 --> 00:05:20.760
is gonna be a little bit different than in HTML.
122
00:05:20.760 --> 00:05:22.280
So you know with HTML,
123
00:05:22.280 --> 00:05:26.810
you would say src and then you would just provide a path
124
00:05:26.810 --> 00:05:28.890
to that image file.
125
00:05:28.890 --> 00:05:32.010
That's not quite the way it works with React.
126
00:05:32.010 --> 00:05:34.580
We actually have to treat our images
127
00:05:34.580 --> 00:05:36.210
a little bit more like code.
128
00:05:36.210 --> 00:05:39.740
So we have to require them and import them.
129
00:05:39.740 --> 00:05:41.970
So let's see how we can do that.
130
00:05:41.970 --> 00:05:44.170
I'm going to get rid of this img tag for right now
131
00:05:44.170 --> 00:05:45.470
and I'm gonna come up to the top
132
00:05:45.470 --> 00:05:46.910
right below our imports.
133
00:05:46.910 --> 00:05:50.590
And I'm going to declare a variable here called logo
134
00:05:50.590 --> 00:05:54.250
and then here, I'm gonna use a require statement.
135
00:05:54.250 --> 00:05:56.190
So I'm not using a import,
136
00:05:56.190 --> 00:05:58.460
this is a slightly different variation
137
00:05:58.460 --> 00:06:00.830
because we're not importing a code directory,
138
00:06:00.830 --> 00:06:04.000
we're just saying that we want to require
139
00:06:04.000 --> 00:06:06.270
and bring in a file.
140
00:06:06.270 --> 00:06:10.430
So we're requiring one of our logo files.
141
00:06:10.430 --> 00:06:14.090
So I'm gonna provide a path to that assets directory.
142
00:06:14.090 --> 00:06:17.010
So I'll say two dots slash,
143
00:06:17.010 --> 00:06:19.410
that takes me back one directory,
144
00:06:19.410 --> 00:06:22.600
so I'll do two more dots, a slash,
145
00:06:22.600 --> 00:06:25.550
that takes me back into a second directory.
146
00:06:25.550 --> 00:06:28.450
You see, we're now two directories away
147
00:06:28.450 --> 00:06:31.400
and we're still one away from our static directory.
148
00:06:31.400 --> 00:06:35.430
So I'm gonna say ../ and now you can see we're at the root
149
00:06:35.430 --> 00:06:36.780
of our application.
150
00:06:36.780 --> 00:06:39.700
Now I can grab the static directory,
151
00:06:39.700 --> 00:06:44.700
/assets/images/ and now I give the full path
152
00:06:46.570 --> 00:06:48.660
to the image that I wanna work with.
153
00:06:48.660 --> 00:06:52.000
Now, I am going to look through the finder,
154
00:06:52.000 --> 00:06:54.110
click on our images here,
155
00:06:54.110 --> 00:06:56.880
and as you can see, I provided,
156
00:06:56.880 --> 00:07:00.950
it looks like seven different files here.
157
00:07:00.950 --> 00:07:03.360
Pick any one that you like
158
00:07:03.360 --> 00:07:05.560
or you can definitely use your own as well,
159
00:07:05.560 --> 00:07:09.130
you can put your own PNG file or JPEG file in here
160
00:07:09.130 --> 00:07:09.963
and bring it here.
161
00:07:09.963 --> 00:07:14.150
And I'm gonna use the code, let's go with code-2.
162
00:07:14.150 --> 00:07:16.460
And I'm gonna copy that entire file name.
163
00:07:16.460 --> 00:07:18.940
You need to have the file extension as well.
164
00:07:18.940 --> 00:07:21.000
And then I'm just gonna paste that in.
165
00:07:21.000 --> 00:07:24.330
So I have the full path to that file,
166
00:07:24.330 --> 00:07:25.780
then I have the file name
167
00:07:25.780 --> 00:07:28.700
and then I have the file extension.
168
00:07:28.700 --> 00:07:31.240
So lemme hit Save there.
169
00:07:31.240 --> 00:07:33.120
Make sure you don't have any errors.
170
00:07:33.120 --> 00:07:36.610
If you try to bring in a image that didn't exist
171
00:07:36.610 --> 00:07:39.960
or you made a typo in the file name or in the path,
172
00:07:39.960 --> 00:07:42.150
then you'd probably get an error right there
173
00:07:42.150 --> 00:07:44.060
and now let's actually bring it in.
174
00:07:44.060 --> 00:07:46.730
So now we're gonna call our img tag
175
00:07:46.730 --> 00:07:51.450
with the src and now, instead of passing in a string,
176
00:07:51.450 --> 00:07:52.930
we're gonna use curly brackets,
177
00:07:52.930 --> 00:07:56.060
kind of like we did when we were working
178
00:07:56.060 --> 00:07:57.780
with our custom styles.
179
00:07:57.780 --> 00:08:00.420
So I'm gonna say src curly brackets
180
00:08:00.420 --> 00:08:02.290
and then just logo
181
00:08:02.290 --> 00:08:06.150
because remember, logo is the name of the variable.
182
00:08:06.150 --> 00:08:07.360
If you named it differently,
183
00:08:07.360 --> 00:08:09.350
you would put a different name there.
184
00:08:09.350 --> 00:08:11.090
Let's hit Save.
185
00:08:11.090 --> 00:08:13.030
And there we go, that worked.
186
00:08:13.030 --> 00:08:16.070
So we now have our image right here.
187
00:08:16.070 --> 00:08:18.410
Now, the reason why it's called twice
188
00:08:18.410 --> 00:08:20.750
is 'cause remember, in our App component,
189
00:08:20.750 --> 00:08:22.860
we called our NavBar twice
190
00:08:22.860 --> 00:08:25.730
so it's gonna get duplicated just like that.
191
00:08:25.730 --> 00:08:28.690
Don't worry about any styles or anything like that.
192
00:08:28.690 --> 00:08:30.490
In our style section,
193
00:08:30.490 --> 00:08:33.707
we're gonna walk through how we're going to style this up
194
00:08:33.707 --> 00:08:35.640
and so it looks nice in the NavBar,
195
00:08:35.640 --> 00:08:36.680
it's gonna be aligned,
196
00:08:36.680 --> 00:08:39.310
next, all of the link and that'll look really good.
197
00:08:39.310 --> 00:08:40.686
But for right now,
198
00:08:40.686 --> 00:08:43.360
the key takeaway is I want you to have
199
00:08:43.360 --> 00:08:47.020
is one, where to put your static images.
200
00:08:47.020 --> 00:08:49.610
These are the images that are hard coded directly
201
00:08:49.610 --> 00:08:50.730
in your application.
202
00:08:50.730 --> 00:08:53.890
And then also, how you can import those
203
00:08:53.890 --> 00:08:55.940
inside of a component
204
00:08:55.940 --> 00:08:58.930
and then call them and render them to the screen
205
00:08:58.930 --> 00:09:00.240
just like we did.
206
00:09:00.240 --> 00:09:02.420
So now, with all of that done,
207
00:09:02.420 --> 00:09:06.130
we've completed the overview of the static directory
208
00:09:06.130 --> 00:09:07.570
and in the next guide,
209
00:09:07.570 --> 00:09:10.323
we're gonna start talking about webpack.