- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.490 --> 00:00:01.960
In this guide we're gonna continue
2
00:00:01.960 --> 00:00:03.800
going through the file system
3
00:00:03.800 --> 00:00:07.010
and analyzing what makes up
4
00:00:07.010 --> 00:00:09.290
a React application.
5
00:00:09.290 --> 00:00:12.270
The next file down the line is a vendor file
6
00:00:12.270 --> 00:00:14.940
and this one we're not gonna have to spend a lot of time on.
7
00:00:14.940 --> 00:00:18.530
It's some boiler plate code that allows for what is called
8
00:00:18.530 --> 00:00:21.103
a babel polyfill.
9
00:00:21.968 --> 00:00:24.550
So what exactly is a polyfill
10
00:00:24.550 --> 00:00:26.200
and what is Babel?
11
00:00:26.200 --> 00:00:29.630
Babel is a really helpful JavaScript tool
12
00:00:29.630 --> 00:00:34.510
that allows you to essentially have a bridge
13
00:00:34.510 --> 00:00:37.350
between vanilla JavaScript
14
00:00:37.350 --> 00:00:40.990
and some of the more modern versions
15
00:00:40.990 --> 00:00:41.950
of JavaScript.
16
00:00:41.950 --> 00:00:43.660
And don't worry if that doesn't make sense,
17
00:00:43.660 --> 00:00:46.600
just a little history on JavaScript
18
00:00:46.600 --> 00:00:48.610
might help to explain it.
19
00:00:48.610 --> 00:00:51.940
And you're gonna run into Babel and polyfills
20
00:00:51.940 --> 00:00:54.360
quite a bit in your development career
21
00:00:54.360 --> 00:00:57.830
so it's worth taking a few minutes to talk about it.
22
00:00:57.830 --> 00:01:01.470
So JavaScript's been a language for a very long time
23
00:01:01.470 --> 00:01:06.470
and it has had many different versions and variations.
24
00:01:06.980 --> 00:01:10.060
Part of the reason why JavaScript is so popular
25
00:01:10.060 --> 00:01:14.180
is because browsers from a very early time period,
26
00:01:14.180 --> 00:01:17.940
we're talking well over a decade plus ago,
27
00:01:17.940 --> 00:01:21.630
decided that that was gonna be the language
28
00:01:21.630 --> 00:01:25.840
that they would allow to run in the browser itself.
29
00:01:25.840 --> 00:01:28.560
You can't run any other language in the browser,
30
00:01:28.560 --> 00:01:30.320
you can't run Python,
31
00:01:30.320 --> 00:01:31.510
you can't run Ruby,
32
00:01:31.510 --> 00:01:32.770
you can't run Elixir,
33
00:01:32.770 --> 00:01:35.750
you can't run any language in the browser.
34
00:01:35.750 --> 00:01:36.583
The browser,
35
00:01:36.583 --> 00:01:39.620
if you give it some type of programming language,
36
00:01:39.620 --> 00:01:41.300
it's not gonna know what to do with that
37
00:01:41.300 --> 00:01:45.440
but it can parse and process JavaScript.
38
00:01:45.440 --> 00:01:47.470
Now one of the issues though,
39
00:01:47.470 --> 00:01:49.760
is that each browser,
40
00:01:49.760 --> 00:01:53.440
depending on the version and the manufacturer,
41
00:01:53.440 --> 00:01:54.860
who's the creator, so
42
00:01:54.860 --> 00:01:58.640
Windows Explorer versus Chrome versus FireFox,
43
00:01:58.640 --> 00:02:02.420
they are all a little bit different and they all
44
00:02:02.420 --> 00:02:05.170
process JavaScript a little bit differently.
45
00:02:05.170 --> 00:02:08.920
So older versions of Internet Explorer, for example,
46
00:02:08.920 --> 00:02:12.380
would have no idea how to process tools
47
00:02:12.380 --> 00:02:16.810
like async and await from modern versions of JavaScript.
48
00:02:16.810 --> 00:02:17.930
Or anything,
49
00:02:17.930 --> 00:02:19.520
any kind of tools like that.
50
00:02:19.520 --> 00:02:24.520
So any new changes to JavaScript or any new features
51
00:02:24.830 --> 00:02:27.040
really weren't working
52
00:02:27.040 --> 00:02:27.873
in
53
00:02:27.873 --> 00:02:31.550
'cause they weren't available in those earlier browsers.
54
00:02:31.550 --> 00:02:35.020
So what babel and these polyfills do
55
00:02:35.020 --> 00:02:40.020
is they give us a bridge so that the code that we write,
56
00:02:40.110 --> 00:02:43.730
whether it's some type of asynchronous type code,
57
00:02:43.730 --> 00:02:45.760
where we're using async await
58
00:02:45.760 --> 00:02:47.310
or we're using promises
59
00:02:47.310 --> 00:02:51.900
or we're using more modern tools and more modern functions
60
00:02:51.900 --> 00:02:53.050
in JavaScript.
61
00:02:53.050 --> 00:02:55.870
Babel takes all of that code
62
00:02:55.870 --> 00:02:58.850
and it actually rewrites it for us,
63
00:02:58.850 --> 00:03:00.750
we don't have to do anything with it.
64
00:03:00.750 --> 00:03:02.420
It rewrites it for us,
65
00:03:02.420 --> 00:03:07.320
in a way that those older browsers are able to understand
66
00:03:07.320 --> 00:03:09.170
and so it's a very helpful tool.
67
00:03:09.170 --> 00:03:11.900
You're not gonna have to do anything with Babel.
68
00:03:11.900 --> 00:03:13.960
There's a chance you could go your whole life
69
00:03:13.960 --> 00:03:16.330
and the only thing that you have to do with Babel
70
00:03:16.330 --> 00:03:19.390
is install it just like we have right here
71
00:03:19.390 --> 00:03:20.470
and then you won't have to touch it.
72
00:03:20.470 --> 00:03:24.070
But it is helpful to understand what it's doing
73
00:03:24.070 --> 00:03:27.110
so let's continue to move along.
74
00:03:27.110 --> 00:03:31.740
So that's everything inside of that source directory
75
00:03:31.740 --> 00:03:32.970
so congratulations.
76
00:03:32.970 --> 00:03:36.760
I know that took a little bit of time but we are through it.
77
00:03:36.760 --> 00:03:38.740
In the rest of this course,
78
00:03:38.740 --> 00:03:41.210
we're mainly gonna be spending our time
79
00:03:41.210 --> 00:03:43.050
inside of that source directory
80
00:03:43.050 --> 00:03:44.950
because that's where all of our components,
81
00:03:44.950 --> 00:03:48.290
our pages, everything are gonna go in there.
82
00:03:48.290 --> 00:03:51.250
Now moving down into these static directory,
83
00:03:51.250 --> 00:03:54.380
if you remember back from the last guide,
84
00:03:54.380 --> 00:03:58.600
I said that the entry point for our application
85
00:03:58.600 --> 00:04:01.230
was going to be a single
86
00:04:01.230 --> 00:04:02.830
html file.
87
00:04:02.830 --> 00:04:07.830
Then from there, that bootstrap js file slides right in
88
00:04:08.070 --> 00:04:11.420
and then inside the bootstrap, the app component.
89
00:04:11.420 --> 00:04:14.210
So you have these very small entry points
90
00:04:14.210 --> 00:04:19.210
into the application but it all starts with this index file.
91
00:04:19.520 --> 00:04:21.240
This is a static file,
92
00:04:21.240 --> 00:04:23.890
which is why it's in our static directory,
93
00:04:23.890 --> 00:04:26.700
and it's just pure html.
94
00:04:26.700 --> 00:04:27.670
That's all it is.
95
00:04:27.670 --> 00:04:29.850
You can see we have a doc type,
96
00:04:29.850 --> 00:04:31.720
we have our head tag,
97
00:04:31.720 --> 00:04:33.430
we have our html tag,
98
00:04:33.430 --> 00:04:37.970
for you I put in the font family of Montserrat.
99
00:04:37.970 --> 00:04:39.900
So that's how we have something that
100
00:04:39.900 --> 00:04:43.920
looks a little bit better than the base html text styles.
101
00:04:43.920 --> 00:04:47.960
And that's really all it is but I want you to
102
00:04:47.960 --> 00:04:51.020
I want to point out one key characteristic
103
00:04:51.020 --> 00:04:54.370
of this index file that is very critical
104
00:04:54.370 --> 00:04:56.500
and that is here on line 12
105
00:04:56.500 --> 00:05:00.320
where we have this class of app wrapper.
106
00:05:00.320 --> 00:05:03.300
If you remember back to the bootstrap file,
107
00:05:03.300 --> 00:05:05.130
so if you go in the source directory
108
00:05:05.130 --> 00:05:07.210
and then open up bootstrap.
109
00:05:07.210 --> 00:05:11.210
If you remember we have this class, in this query selector,
110
00:05:11.210 --> 00:05:14.390
where we're looking for this app wrapper class.
111
00:05:14.390 --> 00:05:16.340
That is where
112
00:05:16.340 --> 00:05:18.220
This is that connection.
113
00:05:18.220 --> 00:05:21.160
We're saying that we're looking for the index file
114
00:05:21.160 --> 00:05:24.180
and we're looking for this app wrapper class.
115
00:05:24.180 --> 00:05:26.100
Now watch what happens in the browser
116
00:05:26.100 --> 00:05:27.640
if I were to change this.
117
00:05:27.640 --> 00:05:30.750
So if I were to just call this my app class
118
00:05:31.950 --> 00:05:34.300
the entire application goes away.
119
00:05:34.300 --> 00:05:38.260
And that's because we have disconnected
120
00:05:38.260 --> 00:05:39.520
the app
121
00:05:39.520 --> 00:05:40.353
from
122
00:05:40.353 --> 00:05:41.370
or the index file
123
00:05:41.370 --> 00:05:43.930
from that bootstrap file.
124
00:05:43.930 --> 00:05:46.270
That is where that connection started.
125
00:05:46.270 --> 00:05:48.130
So in order to get it working again,
126
00:05:48.130 --> 00:05:50.490
we just say app wrapper
127
00:05:50.490 --> 00:05:53.110
or we could change the name on the bootstrap file.
128
00:05:53.110 --> 00:05:56.810
There's nothing special about these names, at all.
129
00:05:56.810 --> 00:06:00.570
We could have called this anything that we wanted
130
00:06:00.570 --> 00:06:02.410
but we just have to make sure
131
00:06:02.410 --> 00:06:05.240
that they are spelled exactly the same
132
00:06:05.240 --> 00:06:07.820
and that they are the same class
133
00:06:07.820 --> 00:06:09.910
and then that creates that connection.
134
00:06:09.910 --> 00:06:10.770
And once I hit save,
135
00:06:10.770 --> 00:06:13.420
you can see that that's all working again.
136
00:06:13.420 --> 00:06:15.970
Now we can also do things like change the title,
137
00:06:15.970 --> 00:06:18.810
if you look up here, the very top of the page,
138
00:06:18.810 --> 00:06:21.290
it says DevCamp React Starter.
139
00:06:21.290 --> 00:06:22.780
I'm gonna change this
140
00:06:22.780 --> 00:06:26.090
and let's just call it whatever your name is.
141
00:06:26.090 --> 00:06:28.170
So mine's Jordan Hudgens
142
00:06:28.170 --> 00:06:30.470
and then I'll say portfolio.
143
00:06:30.470 --> 00:06:33.990
And you could call it whatever you want it to be called
144
00:06:33.990 --> 00:06:35.200
and hit save.
145
00:06:35.200 --> 00:06:36.870
And you'll see right up here,
146
00:06:36.870 --> 00:06:38.910
now it has been changed.
147
00:06:38.910 --> 00:06:40.260
So that is it.
148
00:06:40.260 --> 00:06:41.640
That's all we're covering these guys,
149
00:06:41.640 --> 00:06:44.610
we covered the vendor js file,
150
00:06:44.610 --> 00:06:46.640
we talked about babel polyfills
151
00:06:46.640 --> 00:06:51.610
and how they allow us to write our modern JavaScript code.
152
00:06:51.610 --> 00:06:54.760
And then Babel takes care of rewriting that
153
00:06:54.760 --> 00:06:58.350
in languages that other browsers can understand.
154
00:06:58.350 --> 00:07:02.953
And then we took a look at our static index html file.