- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.450 --> 00:00:01.880
Now that we've walked through,
2
00:00:01.880 --> 00:00:04.660
how the import and export process works,
3
00:00:04.660 --> 00:00:06.950
and we've taken a look
4
00:00:06.950 --> 00:00:07.783
a little bit
5
00:00:07.783 --> 00:00:09.610
at how components work,
6
00:00:09.610 --> 00:00:11.140
we're gonna keep moving down
7
00:00:11.140 --> 00:00:12.470
the file system.
8
00:00:12.470 --> 00:00:15.580
So we are going to move now,
9
00:00:15.580 --> 00:00:16.790
down out of
10
00:00:16.790 --> 00:00:18.770
the components directory
11
00:00:18.770 --> 00:00:22.290
into this bootstrap.js file.
12
00:00:22.290 --> 00:00:24.750
So let's see what is in here.
13
00:00:24.750 --> 00:00:26.220
So at the very top,
14
00:00:26.220 --> 00:00:27.260
you can see that,
15
00:00:27.260 --> 00:00:30.250
we're importing React, ReactDOM.
16
00:00:30.250 --> 00:00:31.730
Now ReactDOM is
17
00:00:31.730 --> 00:00:34.330
a specific library from React,
18
00:00:34.330 --> 00:00:36.200
and what it allows you to do,
19
00:00:36.200 --> 00:00:39.040
is to work with the DOM,
20
00:00:39.040 --> 00:00:44.040
which is the Document Object Model on a browser.
21
00:00:44.150 --> 00:00:46.330
So whenever we're working
22
00:00:46.330 --> 00:00:48.530
with a page, remember back
23
00:00:48.530 --> 00:00:51.010
to the HTML course,
24
00:00:51.010 --> 00:00:51.880
you're working with
25
00:00:51.880 --> 00:00:53.940
the Document Object Model.
26
00:00:53.940 --> 00:00:56.300
Which means that this page
27
00:00:56.300 --> 00:00:58.530
is technically just a document
28
00:00:58.530 --> 00:01:01.460
and we have objects in there,
29
00:01:01.460 --> 00:01:04.030
like heading tags, like div tags,
30
00:01:04.030 --> 00:01:05.830
like different things like that.
31
00:01:05.830 --> 00:01:08.120
What React allows us to do
32
00:01:08.120 --> 00:01:11.160
when we bring in this ReactDOM library,
33
00:01:11.160 --> 00:01:13.230
is we're able to interact
34
00:01:13.230 --> 00:01:15.360
with each of those elements,
35
00:01:15.360 --> 00:01:16.650
and we give React,
36
00:01:16.650 --> 00:01:18.460
the ability to do that
37
00:01:18.460 --> 00:01:21.210
as we build out our application.
38
00:01:21.210 --> 00:01:24.170
We also have a BrowserRouter here.
39
00:01:24.170 --> 00:01:25.610
This is something that
40
00:01:25.610 --> 00:01:28.440
is supplied from react-router-dom
41
00:01:28.440 --> 00:01:30.270
which is another library.
42
00:01:30.270 --> 00:01:32.880
And it allows us to have
43
00:01:32.880 --> 00:01:34.860
our application navigate
44
00:01:34.860 --> 00:01:36.280
from page to page.
45
00:01:36.280 --> 00:01:37.920
Don't worry about that right now,
46
00:01:37.920 --> 00:01:39.180
we're going to do that,
47
00:01:39.180 --> 00:01:40.013
and we're gonna implement
48
00:01:40.013 --> 00:01:42.060
a full routing system later
49
00:01:42.060 --> 00:01:43.490
on in the course.
50
00:01:43.490 --> 00:01:45.500
Lastly, we're importing
51
00:01:45.500 --> 00:01:47.800
our App component here.
52
00:01:47.800 --> 00:01:49.190
And that is the component
53
00:01:49.190 --> 00:01:50.330
that we've been working with
54
00:01:50.330 --> 00:01:52.820
over the last few guides.
55
00:01:52.820 --> 00:01:55.930
After that, we're importing our stylesheet.
56
00:01:55.930 --> 00:01:58.200
So all of those styles
57
00:01:58.200 --> 00:01:59.810
that you saw here in
58
00:01:59.810 --> 00:02:01.370
the style directory,
59
00:02:01.370 --> 00:02:03.710
when we imported main,
60
00:02:03.710 --> 00:02:04.560
or when we worked
61
00:02:04.560 --> 00:02:06.520
with the main file,
62
00:02:06.520 --> 00:02:09.630
if you remember, we need
63
00:02:09.630 --> 00:02:11.590
to actually import that,
64
00:02:11.590 --> 00:02:12.720
so that the rest
65
00:02:12.720 --> 00:02:14.710
of the application can work with it.
66
00:02:14.710 --> 00:02:16.760
That this line right here,
67
00:02:16.760 --> 00:02:18.360
if I were to comment this out,
68
00:02:18.360 --> 00:02:20.600
or if I were to remove it,
69
00:02:20.600 --> 00:02:23.350
then all of our styles here
70
00:02:23.350 --> 00:02:24.760
that we're inside
71
00:02:24.760 --> 00:02:26.730
of our stylesheet directory,
72
00:02:26.730 --> 00:02:27.760
are gonna go away,
73
00:02:27.760 --> 00:02:28.690
like you can see.
74
00:02:28.690 --> 00:02:32.070
So that is what that import is doing.
75
00:02:32.070 --> 00:02:37.070
Now moving down, lines eight through 17 here,
76
00:02:37.210 --> 00:02:38.210
what this is,
77
00:02:38.210 --> 00:02:40.260
is this is our main function.
78
00:02:40.260 --> 00:02:41.840
This is the entry point
79
00:02:41.840 --> 00:02:43.970
for the entire application.
80
00:02:43.970 --> 00:02:47.400
So everything that you can even see,
81
00:02:47.400 --> 00:02:49.550
our app component here
82
00:02:49.550 --> 00:02:51.620
is nested inside of it.
83
00:02:51.620 --> 00:02:54.210
So this is just some boilerplate code,
84
00:02:54.210 --> 00:02:55.043
we're not gonna have
85
00:02:55.043 --> 00:02:57.310
to work with this code, ATON,
86
00:02:57.310 --> 00:02:59.700
this is gonna be used mainly
87
00:02:59.700 --> 00:03:00.620
for doing doing things
88
00:03:00.620 --> 00:03:02.690
like setting certain values
89
00:03:02.690 --> 00:03:04.680
that we want to have access
90
00:03:04.680 --> 00:03:06.950
throughout our application with.
91
00:03:06.950 --> 00:03:09.730
Such as setting out our icon library,
92
00:03:09.730 --> 00:03:11.930
or like you already saw our styles
93
00:03:11.930 --> 00:03:13.500
and those kinds of things.
94
00:03:13.500 --> 00:03:15.190
So what we're doing here,
95
00:03:15.190 --> 00:03:17.580
is we're saying ReactDOM,
96
00:03:17.580 --> 00:03:19.430
so we're calling that same library
97
00:03:19.430 --> 00:03:20.950
that we called up on line two.
98
00:03:20.950 --> 00:03:22.010
And then we're calling
99
00:03:22.010 --> 00:03:24.320
the render function on it.
100
00:03:24.320 --> 00:03:26.740
Remember, when we worked
101
00:03:26.740 --> 00:03:28.670
with the render function earlier,
102
00:03:28.670 --> 00:03:30.840
this is a little bit different version of it.
103
00:03:30.840 --> 00:03:32.500
This one is specific
104
00:03:32.500 --> 00:03:34.300
to the ReactDOM library,
105
00:03:34.300 --> 00:03:36.300
but what we're doing is we're saying,
106
00:03:36.300 --> 00:03:38.970
I want you to take all of the code
107
00:03:38.970 --> 00:03:40.800
that is inside
108
00:03:40.800 --> 00:03:41.700
of this function
109
00:03:41.700 --> 00:03:42.900
that we're passing to it,
110
00:03:42.900 --> 00:03:44.270
and I want you to render
111
00:03:44.270 --> 00:03:45.620
this on the screen.
112
00:03:45.620 --> 00:03:47.860
So everything in our application,
113
00:03:47.860 --> 00:03:50.210
is gonna be placed inside
114
00:03:50.210 --> 00:03:52.520
of this function,
115
00:03:52.520 --> 00:03:54.300
and then that is how users
116
00:03:54.300 --> 00:03:55.560
are able to see it.
117
00:03:55.560 --> 00:03:56.530
Now you don't have to worry about
118
00:03:56.530 --> 00:03:57.390
that ATON right now,
119
00:03:57.390 --> 00:03:58.400
I just wanted you
120
00:03:58.400 --> 00:04:00.240
to see how it worked.
121
00:04:00.240 --> 00:04:01.910
Now moving down the line
122
00:04:01.910 --> 00:04:03.310
a little bit further,
123
00:04:03.310 --> 00:04:04.143
you can see where
124
00:04:04.143 --> 00:04:07.350
it says document.querySelector
125
00:04:07.350 --> 00:04:10.320
and then we did this querySelector
126
00:04:10.320 --> 00:04:12.960
for the app wrapper class.
127
00:04:12.960 --> 00:04:14.500
So we're gonna see
128
00:04:14.500 --> 00:04:15.650
in a little bit
129
00:04:15.650 --> 00:04:17.120
where you can find this
130
00:04:17.120 --> 00:04:18.440
in your application.
131
00:04:18.440 --> 00:04:20.337
But essentially what's happening here
132
00:04:20.337 --> 00:04:21.950
and the way React works,
133
00:04:21.950 --> 00:04:23.300
in order for React
134
00:04:23.300 --> 00:04:25.150
to be rendered on the screen,
135
00:04:25.150 --> 00:04:29.530
we have to have one index HTML file,
136
00:04:29.530 --> 00:04:31.850
we have to have one HTML document.
137
00:04:31.850 --> 00:04:34.780
And then it has to have whatever class
138
00:04:34.780 --> 00:04:38.200
or ID that we designate right here.
139
00:04:38.200 --> 00:04:40.540
And then what the application is gonna do.
140
00:04:40.540 --> 00:04:42.550
Is it gonna latch on,
141
00:04:42.550 --> 00:04:44.080
to that one element
142
00:04:44.080 --> 00:04:44.970
in the document?
143
00:04:44.970 --> 00:04:47.680
And then it is going to slide in,
144
00:04:47.680 --> 00:04:50.030
all of our code right there.
145
00:04:50.030 --> 00:04:51.560
So this is gonna make
146
00:04:51.560 --> 00:04:52.960
a little bit more sense
147
00:04:52.960 --> 00:04:55.210
when we take a look at that file.
148
00:04:55.210 --> 00:04:57.090
But for right now, just know
149
00:04:57.090 --> 00:04:59.763
that there is a index HTML file.
150
00:05:01.730 --> 00:05:04.500
It's just a single document
151
00:05:04.500 --> 00:05:07.330
that has a app wrapper class,
152
00:05:07.330 --> 00:05:08.800
associated with it.
153
00:05:08.800 --> 00:05:11.180
And then what React is doing is,
154
00:05:11.180 --> 00:05:13.590
it's using that as a handle,
155
00:05:13.590 --> 00:05:16.330
where it can then pump all of
156
00:05:16.330 --> 00:05:19.090
the React code directly inside of it.
157
00:05:19.090 --> 00:05:20.030
And that is the way
158
00:05:20.030 --> 00:05:22.500
every React application is gonna work.
159
00:05:22.500 --> 00:05:24.250
And then lastly,
160
00:05:24.250 --> 00:05:26.210
we're adding an EventListener.
161
00:05:26.210 --> 00:05:27.760
So one of the cool things
162
00:05:27.760 --> 00:05:29.287
to notice here on lines 13,
163
00:05:29.287 --> 00:05:31.490
and lines 17,
164
00:05:31.490 --> 00:05:34.970
these are both pure vanilla JavaScript.
165
00:05:34.970 --> 00:05:38.440
It's a vanilla JavaScript querySelector
166
00:05:38.440 --> 00:05:40.290
and an EventListener.
167
00:05:40.290 --> 00:05:43.110
So those things are not specific to React,
168
00:05:43.110 --> 00:05:44.450
React, if you remember
169
00:05:44.450 --> 00:05:46.320
is just a JavaScript library.
170
00:05:46.320 --> 00:05:48.030
So it's leveraging
171
00:05:48.030 --> 00:05:51.140
other JavaScript tools, like querySelectors,
172
00:05:51.140 --> 00:05:52.330
in order to work.
173
00:05:52.330 --> 00:05:53.370
And in this case,
174
00:05:53.370 --> 00:05:54.203
what we're saying is,
175
00:05:54.203 --> 00:05:56.490
I want to add an EventListener,
176
00:05:56.490 --> 00:05:58.530
of DOMContentLoaded
177
00:05:58.530 --> 00:05:59.910
which means it's waiting
178
00:05:59.910 --> 00:06:02.560
for the Document Object Model.
179
00:06:02.560 --> 00:06:03.980
So it's waiting, essentially
180
00:06:03.980 --> 00:06:05.740
for the page to load,
181
00:06:05.740 --> 00:06:07.070
and when it does,
182
00:06:07.070 --> 00:06:08.720
then it's gonna call
183
00:06:08.720 --> 00:06:10.950
this main function.
184
00:06:10.950 --> 00:06:13.000
And when that main function gets run,
185
00:06:13.000 --> 00:06:15.300
that is how our application
186
00:06:15.300 --> 00:06:16.440
is gonna get started.
187
00:06:16.440 --> 00:06:18.960
So that is an analysis
188
00:06:18.960 --> 00:06:22.653
of the bootstrap.js file in React.