- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.370 --> 00:00:03.320
In this guide, we are gonna finish out the rest
2
00:00:03.320 --> 00:00:07.080
of the files here in our file system.
3
00:00:07.080 --> 00:00:10.060
So we're gonna start with the package-lock file
4
00:00:10.060 --> 00:00:12.410
and we're gonna se exactly what it does
5
00:00:12.410 --> 00:00:16.860
and how it's different than the package.json file.
6
00:00:16.860 --> 00:00:19.370
Now it's still a JSON file
7
00:00:19.370 --> 00:00:22.080
but the package-lock file
8
00:00:22.080 --> 00:00:26.580
doesn't simply list out our core dependencies,
9
00:00:26.580 --> 00:00:30.180
it also lists the dependencies
10
00:00:30.180 --> 00:00:32.010
that our dependencies have.
11
00:00:32.010 --> 00:00:33.920
And don't worry if that sounds confusing
12
00:00:33.920 --> 00:00:36.060
but if you just think about it,
13
00:00:36.060 --> 00:00:38.910
imagine a library like React,
14
00:00:38.910 --> 00:00:40.560
it's a pretty big library.
15
00:00:40.560 --> 00:00:43.240
It is not going to have all
16
00:00:43.240 --> 00:00:46.670
of its code written from scratch.
17
00:00:46.670 --> 00:00:50.330
It's going to use its own set of dependencies.
18
00:00:50.330 --> 00:00:51.520
So for the most part,
19
00:00:51.520 --> 00:00:53.500
almost all of the Node modules
20
00:00:53.500 --> 00:00:55.350
that we have in our system
21
00:00:55.350 --> 00:00:58.610
have their own set of dependencies
22
00:00:58.610 --> 00:01:00.790
because they're just JavaScript code libraries
23
00:01:00.790 --> 00:01:03.360
if you remember, and so what that means
24
00:01:03.360 --> 00:01:07.420
is that they can use their own set of libraries
25
00:01:07.420 --> 00:01:11.320
that they need in order for that Node module
26
00:01:11.320 --> 00:01:12.900
to work properly.
27
00:01:12.900 --> 00:01:15.320
So what the package-lock file does
28
00:01:15.320 --> 00:01:18.610
is it lists each of our dependencies
29
00:01:18.610 --> 00:01:23.610
but then it lists out any child dependencies that it has.
30
00:01:24.870 --> 00:01:26.640
So you can go through this file.
31
00:01:26.640 --> 00:01:28.170
It is massive.
32
00:01:28.170 --> 00:01:30.083
Let's go all the way to the end.
33
00:01:31.256 --> 00:01:32.339
And as you can see,
34
00:01:32.339 --> 00:01:36.613
the file goes 11,291 lines long.
35
00:01:40.370 --> 00:01:42.310
So you're definitely not gonna wanna go
36
00:01:42.310 --> 00:01:43.850
through the whole thing.
37
00:01:43.850 --> 00:01:47.070
Essentially what the package-lock file does
38
00:01:47.070 --> 00:01:50.060
it it's a helpful resource for you
39
00:01:50.060 --> 00:01:52.810
to be able to see what dependencies
40
00:01:52.810 --> 00:01:57.330
are listed inside of our core ones.
41
00:01:57.330 --> 00:02:00.740
And so you're never gonna make changes to this file.
42
00:02:00.740 --> 00:02:02.840
That is probably the most important thing I want you
43
00:02:02.840 --> 00:02:04.130
to get from this guide.
44
00:02:04.130 --> 00:02:06.619
Never make any changes to this file
45
00:02:06.619 --> 00:02:11.140
because one thing that sometimes you have to do
46
00:02:11.140 --> 00:02:13.380
is you have to sometimes delete
47
00:02:13.380 --> 00:02:16.900
the entire package-lock file entirely
48
00:02:16.900 --> 00:02:20.260
and so you can see, let's actually do that here.
49
00:02:20.260 --> 00:02:22.240
I'm gonna open this up
50
00:02:22.240 --> 00:02:24.220
and I'm going to delete,
51
00:02:24.220 --> 00:02:28.210
so I'm gonna say rm -rf node_modules
52
00:02:28.210 --> 00:02:30.870
and then that's going to delete
53
00:02:30.870 --> 00:02:32.820
all of our node_modules.
54
00:02:32.820 --> 00:02:37.820
So everything here in our node_modules has been removed.
55
00:02:38.260 --> 00:02:40.710
If you hit Refresh, you'll see that's gone.
56
00:02:40.710 --> 00:02:44.120
Then I'm going to delete the package-lock file.
57
00:02:44.120 --> 00:02:46.590
Make sure, and you don't even have to follow along
58
00:02:46.590 --> 00:02:48.230
with me right here, you can just watch.
59
00:02:48.230 --> 00:02:49.800
But if you are following along,
60
00:02:49.800 --> 00:02:52.690
do not delete your package.json file.
61
00:02:52.690 --> 00:02:54.190
That is not one to delete.
62
00:02:54.190 --> 00:02:57.650
Your package-lock file is simply a reference
63
00:02:57.650 --> 00:03:00.080
to the package.json file
64
00:03:00.080 --> 00:03:01.860
and then it is more explicit.
65
00:03:01.860 --> 00:03:05.240
It lists all of those child dependencies.
66
00:03:05.240 --> 00:03:08.010
So I'm gonna remove the package-lock file
67
00:03:08.010 --> 00:03:09.940
and now you can see that that's gone.
68
00:03:09.940 --> 00:03:11.870
If you tried to run your application right now,
69
00:03:11.870 --> 00:03:13.000
it wouldn't work
70
00:03:13.000 --> 00:03:15.730
because it doesn't have React anymore,
71
00:03:15.730 --> 00:03:17.900
it doesn't have any of those Node modules.
72
00:03:17.900 --> 00:03:21.060
But watch what happens if I type npm,
73
00:03:21.060 --> 00:03:23.083
not run start, npm install,
74
00:03:24.120 --> 00:03:25.668
and run this,
75
00:03:25.668 --> 00:03:30.520
that entire environment is gonna be recreated for us.
76
00:03:30.520 --> 00:03:31.930
It's going to go out,
77
00:03:31.930 --> 00:03:36.910
it's going to create a lock file for us.
78
00:03:36.910 --> 00:03:38.870
So it's gonna do that automatically.
79
00:03:38.870 --> 00:03:40.330
Then from there, it's going to go
80
00:03:40.330 --> 00:03:42.630
and it's going to create our node_modules,
81
00:03:42.630 --> 00:03:45.410
just like it did in the very beginning.
82
00:03:45.410 --> 00:03:48.800
So you can think of the package-lock file
83
00:03:48.800 --> 00:03:53.610
and the node_modules as temporary in a sense.
84
00:03:53.610 --> 00:03:55.280
It's perfectly fine
85
00:03:55.280 --> 00:03:57.450
to delete both of them
86
00:03:57.450 --> 00:04:00.190
and reinstall, run npm install
87
00:04:00.190 --> 00:04:02.940
and then they're both gonna be created again.
88
00:04:02.940 --> 00:04:07.080
And that's the reason why you never wanna make any changes
89
00:04:07.080 --> 00:04:09.390
to the package-lock file
90
00:04:09.390 --> 00:04:12.200
is because there are times where you might run
91
00:04:12.200 --> 00:04:15.970
into a situation where you have a corrupted dependency.
92
00:04:15.970 --> 00:04:17.480
And so because of that,
93
00:04:17.480 --> 00:04:20.960
you might need to actually clear both of these out.
94
00:04:20.960 --> 00:04:24.480
You might need to clear out the lock file
95
00:04:24.480 --> 00:04:26.590
and your node_modules
96
00:04:26.590 --> 00:04:28.890
and then just run npm install
97
00:04:28.890 --> 00:04:31.980
and just start from scratch, not with your code
98
00:04:31.980 --> 00:04:33.930
but just with the dependencies.
99
00:04:33.930 --> 00:04:37.570
So you can think of them as temporal-type elements.
100
00:04:37.570 --> 00:04:41.560
And so those can be recreated at any time.
101
00:04:41.560 --> 00:04:43.440
So we're still letting that go
102
00:04:43.440 --> 00:04:45.500
and as it's going, let's knock out a few
103
00:04:45.500 --> 00:04:46.790
of these other files
104
00:04:46.790 --> 00:04:50.110
and then we'll circle back at the end
105
00:04:50.110 --> 00:04:53.340
and take a look again at that package-lock file.
106
00:04:53.340 --> 00:04:54.640
So moving down,
107
00:04:54.640 --> 00:04:56.730
you can see that we have a Procfile.
108
00:04:56.730 --> 00:04:58.640
This one is very basic
109
00:04:58.640 --> 00:05:02.950
and it's only needed if you're running on Heroku.
110
00:05:02.950 --> 00:05:04.900
So if at the end of this course,
111
00:05:04.900 --> 00:05:08.020
you wanna deploy your application to Heroku,
112
00:05:08.020 --> 00:05:11.560
then that means you'd be using this Procfile.
113
00:05:11.560 --> 00:05:13.920
If you're not, if you're just gonna be using something
114
00:05:13.920 --> 00:05:16.830
like GitHub Pages or Netlify
115
00:05:16.830 --> 00:05:20.150
or something else, then you won't even need this file.
116
00:05:20.150 --> 00:05:21.480
I simply put it in there
117
00:05:21.480 --> 00:05:26.290
because many students like to use Heroku for deployment.
118
00:05:26.290 --> 00:05:28.090
The README we've already talked about.
119
00:05:28.090 --> 00:05:29.790
We don't need to go into that again,
120
00:05:29.790 --> 00:05:32.490
and then lastly, is our server file.
121
00:05:32.490 --> 00:05:34.410
So this is a file, I'll close out
122
00:05:34.410 --> 00:05:35.940
of the terminal for a second,
123
00:05:35.940 --> 00:05:40.940
this is a file that is a very tiny production server.
124
00:05:41.610 --> 00:05:46.500
So this is not used when we're building our application.
125
00:05:46.500 --> 00:05:49.040
It is only used in production.
126
00:05:49.040 --> 00:05:52.210
So it uses a tool called express
127
00:05:52.210 --> 00:05:54.840
and express is a lightweight
128
00:05:54.840 --> 00:05:58.140
but still very powerful JavaScript server.
129
00:05:58.140 --> 00:06:00.370
And so what this file does
130
00:06:00.370 --> 00:06:04.450
is it actually functions as the server
131
00:06:04.450 --> 00:06:07.860
on our live production environment.
132
00:06:07.860 --> 00:06:12.350
So kind of like how we have our webpack dev server locally,
133
00:06:12.350 --> 00:06:14.870
that's how we're able to run our code
134
00:06:14.870 --> 00:06:16.940
and have all of our processes run
135
00:06:16.940 --> 00:06:18.580
and have everything compile
136
00:06:18.580 --> 00:06:22.020
on our local machine, this file is in charge
137
00:06:22.020 --> 00:06:24.870
of doing that in production.
138
00:06:24.870 --> 00:06:27.410
Now, if you're just creating a static site,
139
00:06:27.410 --> 00:06:28.450
this isn't needed.
140
00:06:28.450 --> 00:06:31.380
This is only needed if you're doing something
141
00:06:31.380 --> 00:06:33.650
like deploying to Heroku once again.
142
00:06:33.650 --> 00:06:35.520
But I wanted to put this in there
143
00:06:35.520 --> 00:06:37.840
because this took a little bit of time
144
00:06:37.840 --> 00:06:40.220
for me to write and to figure out.
145
00:06:40.220 --> 00:06:43.750
So I wanted to give you that as an example
146
00:06:43.750 --> 00:06:46.910
so that you can use it in your own project.
147
00:06:46.910 --> 00:06:49.470
So it's pretty straightforward
148
00:06:49.470 --> 00:06:51.480
in terms of it doesn't have a lot
149
00:06:51.480 --> 00:06:53.130
of functionality that it does.
150
00:06:53.130 --> 00:06:56.420
It simply is importing a few dependencies,
151
00:06:56.420 --> 00:06:59.420
namely express, and then from there,
152
00:06:59.420 --> 00:07:02.520
it's using this dist directory.
153
00:07:02.520 --> 00:07:04.810
Now, we have not talked about that
154
00:07:04.810 --> 00:07:09.400
but we did talk about running the command npm run build,
155
00:07:09.400 --> 00:07:12.750
and I said that is how the entire system
156
00:07:12.750 --> 00:07:15.100
is going to be created in production.
157
00:07:15.100 --> 00:07:19.330
What that command does is it actually creates a directory
158
00:07:19.330 --> 00:07:22.880
called dist, which is short for distribution.
159
00:07:22.880 --> 00:07:24.540
And then in inside of there,
160
00:07:24.540 --> 00:07:27.820
it puts all of the code, it loads everything up
161
00:07:27.820 --> 00:07:31.623
with the entry point of index.html inside
162
00:07:31.623 --> 00:07:33.540
of that directory.
163
00:07:33.540 --> 00:07:37.000
Just kind of like how it does now in our static directory,
164
00:07:37.000 --> 00:07:39.800
and then it starts that system.
165
00:07:39.800 --> 00:07:41.340
So that's all it's really doing.
166
00:07:41.340 --> 00:07:43.630
It's just some boilerplate server code
167
00:07:43.630 --> 00:07:47.820
and it says that any types of route,
168
00:07:47.820 --> 00:07:51.330
so any user navigating to our site
169
00:07:51.330 --> 00:07:55.060
is going to be routed through the React application.
170
00:07:55.060 --> 00:07:56.630
That's what's going on.
171
00:07:56.630 --> 00:07:57.670
Once again, you don't have to worry
172
00:07:57.670 --> 00:07:58.840
about that for right now.
173
00:07:58.840 --> 00:08:01.100
This is only for production.
174
00:08:01.100 --> 00:08:03.580
Now, it looks like everything installed.
175
00:08:03.580 --> 00:08:06.500
Notice that our node_modules directory is here
176
00:08:06.500 --> 00:08:08.800
and we have our package-lock again.
177
00:08:08.800 --> 00:08:11.640
So let's make sure that everything worked.
178
00:08:11.640 --> 00:08:13.600
I'll type npm run start
179
00:08:13.600 --> 00:08:15.246
and let that get started.
180
00:08:15.246 --> 00:08:18.580
And then we'll finish this entire section off
181
00:08:18.580 --> 00:08:21.030
by walking through a few more elements
182
00:08:21.030 --> 00:08:22.770
of that package-lock file.
183
00:08:22.770 --> 00:08:24.640
So everything compiled successfully.
184
00:08:24.640 --> 00:08:26.190
So it looked like that worked.
185
00:08:26.190 --> 00:08:30.010
We were able to completely clear out our node_modules,
186
00:08:30.010 --> 00:08:32.980
we were able to recreate a package-lock file
187
00:08:32.980 --> 00:08:36.120
and now, everything's compiling properly.
188
00:08:36.120 --> 00:08:38.680
I can come to the browser, hit Refresh,
189
00:08:38.680 --> 00:08:40.070
everything is still working.
190
00:08:40.070 --> 00:08:41.730
React is still working.
191
00:08:41.730 --> 00:08:44.400
Okay, so I'm gonna stop that server
192
00:08:44.400 --> 00:08:45.850
and open up this file,
193
00:08:45.850 --> 00:08:49.130
and just point out a few elements here.
194
00:08:49.130 --> 00:08:52.850
So notice here at the top we have our dependencies.
195
00:08:52.850 --> 00:08:54.820
It's also pulling in the name
196
00:08:54.820 --> 00:08:56.409
that we gave the application.
197
00:08:56.409 --> 00:08:59.180
Each one of these dependencies
198
00:08:59.180 --> 00:09:02.230
has its own set of rules.
199
00:09:02.230 --> 00:09:05.580
So before, in our package-lock file,
200
00:09:05.580 --> 00:09:07.510
you wanna reference that,
201
00:09:07.510 --> 00:09:09.810
this is was very compact.
202
00:09:09.810 --> 00:09:12.520
This is like the summarized version
203
00:09:12.520 --> 00:09:16.200
of the package-lock and it's a summarized version
204
00:09:16.200 --> 00:09:17.550
of that dependency.
205
00:09:17.550 --> 00:09:20.530
So let's take a look at react.
206
00:09:20.530 --> 00:09:21.530
Let's look at the core one.
207
00:09:21.530 --> 00:09:22.890
All we had to say
208
00:09:22.890 --> 00:09:27.200
was we wanted to bring in react at version 16.13.1.
209
00:09:28.590 --> 00:09:31.090
Now, if I copy this
210
00:09:31.090 --> 00:09:35.496
and search for react inside of the file,
211
00:09:35.496 --> 00:09:38.570
then there's quite a few things named react,
212
00:09:38.570 --> 00:09:39.700
so it might take a little while.
213
00:09:39.700 --> 00:09:42.410
I could also look for react
214
00:09:42.410 --> 00:09:46.170
just with its own quotation marks,
215
00:09:46.170 --> 00:09:49.370
and that'll take me to the exact version of react.
216
00:09:49.370 --> 00:09:50.803
And as you can see right here,
217
00:09:50.803 --> 00:09:53.330
it gives us a version,
218
00:09:53.330 --> 00:09:57.080
it tells us where it pulled from in npm.
219
00:09:57.080 --> 00:09:59.270
So this is the actual link
220
00:09:59.270 --> 00:10:02.440
that it went out to go get the code.
221
00:10:02.440 --> 00:10:05.340
Then it added a integrity check.
222
00:10:05.340 --> 00:10:07.390
This essentially just makes sure
223
00:10:07.390 --> 00:10:10.440
that the code that we're pulling down from npm
224
00:10:10.440 --> 00:10:12.680
is valid and it's the right code,
225
00:10:12.680 --> 00:10:15.610
we didn't have a hacker slide in a bad version
226
00:10:15.610 --> 00:10:18.000
of React that will take over your system or something.
227
00:10:18.000 --> 00:10:20.180
So that's what the integrity check does.
228
00:10:20.180 --> 00:10:23.950
And then here, this gives us the set of libraries
229
00:10:23.950 --> 00:10:25.980
that React requires.
230
00:10:25.980 --> 00:10:27.960
So it only requires three.
231
00:10:27.960 --> 00:10:32.960
Loose-envify, I've never even used it.
232
00:10:33.420 --> 00:10:37.170
There are all gonna be very low level types of libraries.
233
00:10:37.170 --> 00:10:39.560
Object-assign and then prop-types.
234
00:10:39.560 --> 00:10:42.470
And so those are the only libraries that it's bringing in
235
00:10:42.470 --> 00:10:46.550
but what that means is that when we installed React,
236
00:10:46.550 --> 00:10:50.600
we also installed these libraries.
237
00:10:50.600 --> 00:10:54.570
So you could go to these inside of our node_modules.
238
00:10:54.570 --> 00:10:55.750
If you were curious
239
00:10:55.750 --> 00:11:00.750
on why we only had a relatively small number of dependencies
240
00:11:03.080 --> 00:11:05.230
in our package.json file,
241
00:11:05.230 --> 00:11:08.500
but we have thousands and thousands
242
00:11:08.500 --> 00:11:11.590
of these lines of code in our package-lock
243
00:11:11.590 --> 00:11:15.410
and it looks like 1,000 or so node_modules,
244
00:11:15.410 --> 00:11:16.610
the reason for that,
245
00:11:16.610 --> 00:11:18.480
where that discrepancy comes from
246
00:11:18.480 --> 00:11:21.210
is because most of these libraries
247
00:11:21.210 --> 00:11:24.190
have their own set of dependencies.
248
00:11:24.190 --> 00:11:26.370
Just like we have our set of dependencies
249
00:11:26.370 --> 00:11:27.740
for building the app,
250
00:11:27.740 --> 00:11:29.550
they have their dependencies
251
00:11:29.550 --> 00:11:32.563
for actually creating the library.
252
00:11:34.080 --> 00:11:36.520
If you look at their code, you can go in
253
00:11:36.520 --> 00:11:40.560
and you'll see they have imported these libraries.
254
00:11:40.560 --> 00:11:44.930
So if you went into the React code base,
255
00:11:44.930 --> 00:11:47.800
you would see, in different parts of the application,
256
00:11:47.800 --> 00:11:51.640
them using and importing these three libraries.
257
00:11:51.640 --> 00:11:53.890
So they're required to make React work
258
00:11:53.890 --> 00:11:56.970
so because of that, we needed to bring them in
259
00:11:56.970 --> 00:11:58.717
to our own application.
260
00:11:58.717 --> 00:12:00.750
So that is it.
261
00:12:00.750 --> 00:12:04.670
We have covered the entire system here.
262
00:12:04.670 --> 00:12:07.700
We've covered the entire file system.
263
00:12:07.700 --> 00:12:09.820
And I know that took a while,
264
00:12:09.820 --> 00:12:12.010
that definitely took a number of guides
265
00:12:12.010 --> 00:12:16.090
to go through but I think it is very important
266
00:12:16.090 --> 00:12:20.930
to understand what makes a React application work.
267
00:12:20.930 --> 00:12:22.480
It's very important
268
00:12:22.480 --> 00:12:26.130
because as you start to build out your own applications,
269
00:12:26.130 --> 00:12:29.060
you're gonna need to have this foundational knowledge.
270
00:12:29.060 --> 00:12:32.670
Now, don't worry if there's still a lot of confusion
271
00:12:32.670 --> 00:12:34.670
in your mind as you're thinking about it,
272
00:12:34.670 --> 00:12:38.530
I wanted to introduce you to these concepts
273
00:12:38.530 --> 00:12:40.060
because I can tell you,
274
00:12:40.060 --> 00:12:42.750
just from my own real-life experience,
275
00:12:42.750 --> 00:12:44.710
there're are so many times
276
00:12:44.710 --> 00:12:48.240
where if I didn't have some of this knowledge here,
277
00:12:48.240 --> 00:12:49.840
so for a great example,
278
00:12:49.840 --> 00:12:52.140
if I didn't understand the way
279
00:12:52.140 --> 00:12:55.860
that I could manage different types of ways
280
00:12:55.860 --> 00:12:57.580
of installing libraries
281
00:12:57.580 --> 00:13:00.260
like we did in the package.json file,
282
00:13:00.260 --> 00:13:02.550
I would have had a lot of issues trying
283
00:13:02.550 --> 00:13:04.850
to upgrade certain libraries.
284
00:13:04.850 --> 00:13:08.070
Another issue that I've run into through the years
285
00:13:08.070 --> 00:13:10.460
when it comes to managing dependencies
286
00:13:10.460 --> 00:13:14.750
is being able to if I see conflicts arise,
287
00:13:14.750 --> 00:13:17.120
I need to go through the package-lock file
288
00:13:17.120 --> 00:13:20.250
and where those conflicts were
289
00:13:20.250 --> 00:13:22.070
by looking for the libraries
290
00:13:22.070 --> 00:13:23.770
and checking against versions
291
00:13:23.770 --> 00:13:25.610
and performing tasks like that.
292
00:13:25.610 --> 00:13:27.930
Now, you're not gonna have to worry about that right now
293
00:13:27.930 --> 00:13:30.490
but once you get into more advanced concepts,
294
00:13:30.490 --> 00:13:34.410
you are gonna have to be thinking along those lines.
295
00:13:34.410 --> 00:13:37.640
And one of the final takeaways I want you to have
296
00:13:37.640 --> 00:13:39.420
for this entire section
297
00:13:39.420 --> 00:13:44.060
is that nothing in this application is magic.
298
00:13:44.060 --> 00:13:45.790
I know that it may seem like it,
299
00:13:45.790 --> 00:13:48.260
it may seem magic that you can write some code
300
00:13:48.260 --> 00:13:51.310
and then it automatically populates on the screen,
301
00:13:51.310 --> 00:13:53.072
and we're gonna be writing a lot of code
302
00:13:53.072 --> 00:13:55.490
and having features built
303
00:13:55.490 --> 00:13:57.600
that do kind of look like magic
304
00:13:57.600 --> 00:13:59.450
'cause they're gonna have all kinds
305
00:13:59.450 --> 00:14:01.310
of cool features like being able
306
00:14:01.310 --> 00:14:02.950
to drag and drop elements
307
00:14:02.950 --> 00:14:05.360
and being able to talk to outside services,
308
00:14:05.360 --> 00:14:07.850
and all those kinds of things
309
00:14:07.850 --> 00:14:10.294
that make up a real-life application
310
00:14:10.294 --> 00:14:14.170
but what I want you to have in the back of your mind
311
00:14:14.170 --> 00:14:16.890
at all times is that it's not magic.
312
00:14:16.890 --> 00:14:19.680
We're simply configuring our application
313
00:14:19.680 --> 00:14:21.900
to run in a certain way
314
00:14:21.900 --> 00:14:25.660
that the end user gets to have the behavior
315
00:14:25.660 --> 00:14:27.850
that we're looking to give them,
316
00:14:27.850 --> 00:14:29.300
whether it's drag and drop,
317
00:14:29.300 --> 00:14:32.100
whether it's entering in form data,
318
00:14:32.100 --> 00:14:34.820
whether it is creating a blog
319
00:14:34.820 --> 00:14:36.420
or anything like that,
320
00:14:36.420 --> 00:14:38.320
I wanna give you the ability
321
00:14:38.320 --> 00:14:40.670
to not just kind of think
322
00:14:40.670 --> 00:14:44.420
that all of those things happen just out of thin air.
323
00:14:44.420 --> 00:14:45.580
As you could see,
324
00:14:45.580 --> 00:14:48.270
everything that we've implemented
325
00:14:48.270 --> 00:14:50.040
or everything that is gonna be done,
326
00:14:50.040 --> 00:14:53.870
had to be configured in some form or another
327
00:14:53.870 --> 00:14:56.270
and the longer you go as a developer,
328
00:14:56.270 --> 00:14:57.870
you're gonna start making some
329
00:14:57.870 --> 00:15:00.870
of your own configuration items
330
00:15:00.870 --> 00:15:03.060
the more you become familiar with it.
331
00:15:03.060 --> 00:15:04.980
So great job going through that section.
332
00:15:04.980 --> 00:15:08.140
I think you have a really solid foundation now
333
00:15:08.140 --> 00:15:11.990
in what you need to have a React application work
334
00:15:11.990 --> 00:15:14.410
and how to configure it and how to customize it.
335
00:15:14.410 --> 00:15:18.040
And in the next guide, we're gonna start really diving
336
00:15:18.040 --> 00:15:18.873
into the code
337
00:15:18.873 --> 00:15:21.270
and we're gonna start building out our application.