- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.400 --> 00:00:03.150
Now that we have our application generated
2
00:00:03.150 --> 00:00:04.910
and we know that it's running,
3
00:00:04.910 --> 00:00:09.680
in this guide, we are going to implement version control.
4
00:00:09.680 --> 00:00:13.660
Now, version control uses a tool called Git,
5
00:00:13.660 --> 00:00:17.410
where you're able to create versions
6
00:00:17.410 --> 00:00:18.810
for your application.
7
00:00:18.810 --> 00:00:20.960
This allows you to work with teams
8
00:00:20.960 --> 00:00:25.730
and also allows you to revert back to a previous version
9
00:00:25.730 --> 00:00:29.330
if you ever make a mistake in your application
10
00:00:29.330 --> 00:00:31.610
and you simply want to switch back
11
00:00:31.610 --> 00:00:34.200
to a previous version state.
12
00:00:34.200 --> 00:00:35.950
So that's what we're gonna do in this guide.
13
00:00:35.950 --> 00:00:39.790
It's very helpful, as you go along in this course,
14
00:00:39.790 --> 00:00:43.970
because what I'm doing is at the end of every video,
15
00:00:43.970 --> 00:00:47.670
I create a version of the application.
16
00:00:47.670 --> 00:00:50.110
So if you go down in the show notes,
17
00:00:50.110 --> 00:00:51.420
at the very bottom,
18
00:00:51.420 --> 00:00:52.640
you're gonna have a link
19
00:00:52.640 --> 00:00:53.730
to the source code
20
00:00:53.730 --> 00:00:57.180
and you're actually going to see the application
21
00:00:57.180 --> 00:00:59.890
at the exact state that it's in
22
00:00:59.890 --> 00:01:01.910
at the very end of each video.
23
00:01:01.910 --> 00:01:05.020
So it's very helpful for going through the course.
24
00:01:05.020 --> 00:01:06.830
So the very first thing we're gonna do,
25
00:01:06.830 --> 00:01:09.160
I'm assuming you already have a GitHub account
26
00:01:09.160 --> 00:01:10.920
and you have Git installed
27
00:01:10.920 --> 00:01:11.900
on your system.
28
00:01:11.900 --> 00:01:13.840
If you do not have those things,
29
00:01:13.840 --> 00:01:17.340
go back to the video in the environment section
30
00:01:17.340 --> 00:01:19.940
and create both of those items.
31
00:01:19.940 --> 00:01:22.620
You need to have Git installed on your local system
32
00:01:22.620 --> 00:01:24.780
and then you need to have a GitHub account.
33
00:01:24.780 --> 00:01:27.070
Now, if you're logged into your GitHub account,
34
00:01:27.070 --> 00:01:30.050
it may look similar to this, it may look different.
35
00:01:30.050 --> 00:01:32.190
Go up to the right-hand side
36
00:01:32.190 --> 00:01:36.920
at the little plus icon and click on New Repository.
37
00:01:36.920 --> 00:01:40.130
That's gonna give you the ability to create a new repo
38
00:01:40.130 --> 00:01:42.920
and you can give it whatever name you'd like.
39
00:01:42.920 --> 00:01:47.920
I'm going to call this react-with-hooks.
40
00:01:48.250 --> 00:01:53.250
And the uniqueness only has to be your own set
41
00:01:53.380 --> 00:01:56.560
of applications, so you can't have a repo
42
00:01:56.560 --> 00:01:59.910
with a name exactly identical to this one,
43
00:01:59.910 --> 00:02:01.730
but you could use react-with-hooks
44
00:02:01.730 --> 00:02:03.280
for your own personal one.
45
00:02:03.280 --> 00:02:05.750
It's scoped to the account owner.
46
00:02:05.750 --> 00:02:07.140
I'm gonna make mine public
47
00:02:07.140 --> 00:02:09.190
so that you can access it
48
00:02:09.190 --> 00:02:12.720
and then I'll click Create Repository.
49
00:02:12.720 --> 00:02:15.270
Now, I'm gonna switch back to our project
50
00:02:15.270 --> 00:02:17.200
and I'm gonna open up the terminal.
51
00:02:17.200 --> 00:02:18.530
Now, I could also do this
52
00:02:18.530 --> 00:02:23.020
in the normal terminal application as well.
53
00:02:23.020 --> 00:02:24.100
It's completely up to you.
54
00:02:24.100 --> 00:02:25.410
Whatever you prefer.
55
00:02:25.410 --> 00:02:27.360
And I'm gonna open up the terminal
56
00:02:27.360 --> 00:02:29.410
and inside of the project,
57
00:02:29.410 --> 00:02:30.500
this is very important.
58
00:02:30.500 --> 00:02:32.690
Make sure you're actually inside of it.
59
00:02:32.690 --> 00:02:34.410
Type git init.
60
00:02:35.827 --> 00:02:36.660
That is going to create a new Git repository
61
00:02:39.880 --> 00:02:41.030
for this project.
62
00:02:41.030 --> 00:02:44.570
So it's gonna wrap up all of the code in this project.
63
00:02:44.570 --> 00:02:47.770
Now, one thing that we do not want included
64
00:02:47.770 --> 00:02:49.600
in version control
65
00:02:49.600 --> 00:02:51.347
are our node_modules.
66
00:02:52.460 --> 00:02:53.860
And the reason for that
67
00:02:53.860 --> 00:02:56.270
is because node_modules are,
68
00:02:56.270 --> 00:02:59.890
you should think of them as temporary helpers.
69
00:02:59.890 --> 00:03:02.760
So the node_modules that you have installed
70
00:03:02.760 --> 00:03:05.370
in this project on your local system
71
00:03:05.370 --> 00:03:08.170
should not be sent up to GitHub,
72
00:03:08.170 --> 00:03:09.510
and the reason for that
73
00:03:09.510 --> 00:03:13.562
is because these change, they can get corrupted.
74
00:03:13.562 --> 00:03:18.562
You do not want to include this inside of version control.
75
00:03:18.710 --> 00:03:20.830
You don't wanna push these up to the server.
76
00:03:20.830 --> 00:03:22.940
When we get to our deployment section,
77
00:03:22.940 --> 00:03:26.570
you're gonna see that the server itself actually runs
78
00:03:26.570 --> 00:03:28.380
the build and install commands
79
00:03:28.380 --> 00:03:31.000
and so there's gonna be a whole separate set
80
00:03:31.000 --> 00:03:33.600
of node-modules up on the server.
81
00:03:33.600 --> 00:03:35.860
Now, don't worry if that doesn't really make sense yet.
82
00:03:35.860 --> 00:03:37.780
We're gonna walk through all of this
83
00:03:37.780 --> 00:03:39.840
as we go through the course material.
84
00:03:39.840 --> 00:03:42.540
For right now, just realize we do not want
85
00:03:42.540 --> 00:03:44.590
to push this up to GitHub.
86
00:03:44.590 --> 00:03:47.580
So any time that we have any files
87
00:03:47.580 --> 00:03:51.020
that we do not want pushed up to version control,
88
00:03:51.020 --> 00:03:53.300
what we can do is we can create
89
00:03:53.300 --> 00:03:56.330
what is called a .gitignore file.
90
00:03:56.330 --> 00:03:59.320
Now, this .gitignore file gives us the ability
91
00:03:59.320 --> 00:04:02.950
to list any files or directories
92
00:04:02.950 --> 00:04:05.590
that we don't want included in version control.
93
00:04:05.590 --> 00:04:07.920
So let's create that first.
94
00:04:07.920 --> 00:04:09.280
So I'm gonna come up here
95
00:04:09.280 --> 00:04:11.810
and click on New File
96
00:04:11.810 --> 00:04:15.120
and then you can see that it's giving me the ability
97
00:04:15.120 --> 00:04:16.410
to type in a new file,
98
00:04:16.410 --> 00:04:18.400
and I can type .gitignore.
99
00:04:20.500 --> 00:04:23.760
Now, make sure that you put the dot in front of that.
100
00:04:23.760 --> 00:04:26.040
If you're not familiar with dot files,
101
00:04:26.040 --> 00:04:27.160
what a dot files is,
102
00:04:27.160 --> 00:04:29.250
it's also called a hidden file,
103
00:04:29.250 --> 00:04:31.720
it's kind of like a system helper file
104
00:04:31.720 --> 00:04:35.240
and all gitignore files have to start with a dot.
105
00:04:35.240 --> 00:04:37.099
So make sure you include that.
106
00:04:37.099 --> 00:04:38.201
Hit Return.
107
00:04:38.201 --> 00:04:41.450
And now we have access to that.
108
00:04:41.450 --> 00:04:44.160
Now it actually looks like I made a little mistake here.
109
00:04:44.160 --> 00:04:47.500
Notice, and this is something I'm kind of glad it happened.
110
00:04:47.500 --> 00:04:49.470
Notice where it put this.
111
00:04:49.470 --> 00:04:52.910
It actually put it inside of my node_modules directory,
112
00:04:52.910 --> 00:04:54.450
which is not what I wanted.
113
00:04:54.450 --> 00:04:56.400
So there's a couple ways you could do it.
114
00:04:56.400 --> 00:04:59.180
You can click and drag it
115
00:04:59.180 --> 00:05:02.080
into the root directory,
116
00:05:02.080 --> 00:05:04.430
or you can just right click on it
117
00:05:04.430 --> 00:05:06.530
and click Delete.
118
00:05:06.530 --> 00:05:08.010
And click Move to Trash.
119
00:05:08.010 --> 00:05:09.210
One thing you'll notice,
120
00:05:09.210 --> 00:05:12.320
if you have a directory selected,
121
00:05:12.320 --> 00:05:15.020
like apparently I had node_modules selected,
122
00:05:15.020 --> 00:05:16.860
and you click New File,
123
00:05:16.860 --> 00:05:18.850
it will automatically put it in there.
124
00:05:18.850 --> 00:05:21.130
So I'm gonna just click out of that,
125
00:05:21.130 --> 00:05:25.330
so now the entire directory is created or selected
126
00:05:25.330 --> 00:05:27.560
and now I'm gonna click New File,
127
00:05:27.560 --> 00:05:32.560
type .gitignore and now it's in the correct spot.
128
00:05:34.060 --> 00:05:35.120
And you're also gonna notice
129
00:05:35.120 --> 00:05:36.470
is as we go through the course,
130
00:05:36.470 --> 00:05:39.030
if I make a mistake, I do not edit it out.
131
00:05:39.030 --> 00:05:41.590
I keep it there because if I make the mistake,
132
00:05:41.590 --> 00:05:43.990
and I've been doing this for over 15 years,
133
00:05:43.990 --> 00:05:45.580
there's a chance other people
134
00:05:45.580 --> 00:05:46.830
are gonna make those same mistakes.
135
00:05:46.830 --> 00:05:48.120
I'd rather keep them in there
136
00:05:48.120 --> 00:05:50.910
so I can show you how to fix anything like that.
137
00:05:50.910 --> 00:05:54.200
So .gitignore has to be at the root of the project.
138
00:05:54.200 --> 00:05:55.359
Now, once you have that,
139
00:05:55.359 --> 00:05:58.280
inside of the file,
140
00:05:58.280 --> 00:06:00.137
just type node_modules.
141
00:06:02.760 --> 00:06:04.710
And hit Save.
142
00:06:04.710 --> 00:06:06.520
Okay, so what that's doing
143
00:06:06.520 --> 00:06:09.420
is we're telling Git I do not want you
144
00:06:09.420 --> 00:06:11.850
to be included in our version control.
145
00:06:11.850 --> 00:06:14.220
Now, depending on your colors, your theme
146
00:06:14.220 --> 00:06:16.950
and your settings, you may notice right here
147
00:06:16.950 --> 00:06:20.000
that now, mode_modules is grayed out.
148
00:06:20.000 --> 00:06:23.710
That's Visual Studio Code's way of tracking
149
00:06:23.710 --> 00:06:27.070
what is in version control
150
00:06:27.070 --> 00:06:30.990
and what's not, so that's also a helpful little tool there.
151
00:06:30.990 --> 00:06:34.130
Okay, let's open up the terminal once again
152
00:06:34.130 --> 00:06:37.780
and I'm gonna type git status.
153
00:06:37.780 --> 00:06:41.630
And as you can see that we have all of these file listed
154
00:06:41.630 --> 00:06:45.080
but also notice, we do not have our node_modules listed.
155
00:06:45.080 --> 00:06:47.450
These are untracked files,
156
00:06:47.450 --> 00:06:50.320
which means that Git is looking at them
157
00:06:50.320 --> 00:06:53.590
but it doesn't actually track them yet.
158
00:06:53.590 --> 00:06:55.810
So that's what we need to do,
159
00:06:55.810 --> 00:06:59.130
so any time you see where it says we have untracked files
160
00:06:59.130 --> 00:07:00.610
and it's in red,
161
00:07:00.610 --> 00:07:03.870
that means that we need to tell Git
162
00:07:03.870 --> 00:07:05.320
about all these files.
163
00:07:05.320 --> 00:07:06.310
So the way we can do
164
00:07:06.310 --> 00:07:10.730
that is we can add these into the tracking system.
165
00:07:10.730 --> 00:07:15.730
So I'm gonna type git add space and then a dot.
166
00:07:16.500 --> 00:07:20.100
What that does, the dot means in our current directory,
167
00:07:20.100 --> 00:07:22.570
I want you to add all the files.
168
00:07:22.570 --> 00:07:23.890
I'm gonna show you later
169
00:07:23.890 --> 00:07:27.570
how we can pick and choose a single file
170
00:07:27.570 --> 00:07:29.250
that we'd want to add
171
00:07:29.250 --> 00:07:32.080
and that gives us a little bit more control
172
00:07:32.080 --> 00:07:33.000
but for right now,
173
00:07:33.000 --> 00:07:35.860
we do wanna add all of these files.
174
00:07:35.860 --> 00:07:37.270
So those are added.
175
00:07:37.270 --> 00:07:39.570
Now if I type git status,
176
00:07:39.570 --> 00:07:42.170
now you can see all of those files are green.
177
00:07:42.170 --> 00:07:43.003
So that's perfect.
178
00:07:43.003 --> 00:07:44.680
That's exactly what we want.
179
00:07:44.680 --> 00:07:48.370
Now it doesn't say that they're not tracking,
180
00:07:48.370 --> 00:07:52.150
now it says these are changes ready to be committed.
181
00:07:52.150 --> 00:07:54.250
So that means we've added them,
182
00:07:54.250 --> 00:07:55.210
they're being tracked,
183
00:07:55.210 --> 00:07:57.930
now we can create our commit.
184
00:07:57.930 --> 00:07:59.910
So let's do that now.
185
00:07:59.910 --> 00:08:03.350
I'm gonna type git commit -m
186
00:08:03.350 --> 00:08:06.200
which means that we're passing in a message
187
00:08:06.200 --> 00:08:07.700
to the commit message
188
00:08:07.700 --> 00:08:11.970
and I'm gonna type, let's just type initial commit
189
00:08:13.070 --> 00:08:16.110
in quotes, and then type return,
190
00:08:16.110 --> 00:08:19.030
and now if you type git status,
191
00:08:19.030 --> 00:08:22.280
you'll see that it says we're on the branch master
192
00:08:22.280 --> 00:08:23.848
and there's nothing to commit.
193
00:08:23.848 --> 00:08:25.480
The working tree is clean,
194
00:08:25.480 --> 00:08:28.040
which essentially means there're are no new changes.
195
00:08:28.040 --> 00:08:30.040
So that is all good.
196
00:08:30.040 --> 00:08:31.360
Now what we need to do,
197
00:08:31.360 --> 00:08:35.250
we've created our version control on our local system,
198
00:08:35.250 --> 00:08:36.760
now we need to go
199
00:08:36.760 --> 00:08:41.040
and we need to wire this up with GitHub directly,
200
00:08:41.040 --> 00:08:43.490
and with that repo that we created.
201
00:08:43.490 --> 00:08:46.170
So let's switch back to Google Chrome,
202
00:08:46.170 --> 00:08:49.410
and you can see, we actually have some instructions here.
203
00:08:49.410 --> 00:08:51.130
So here, let's see.
204
00:08:51.130 --> 00:08:54.450
It says we can do a quick setup here.
205
00:08:54.450 --> 00:08:57.900
You can use HTTPS or SSH.
206
00:08:57.900 --> 00:09:01.830
Now, if you through the GitHub little mini module course,
207
00:09:01.830 --> 00:09:03.570
all of your SHH keys
208
00:09:03.570 --> 00:09:05.100
and everything should all be set up
209
00:09:05.100 --> 00:09:06.680
so you should be good to go.
210
00:09:06.680 --> 00:09:08.663
If not, you can use HTTPS.
211
00:09:09.624 --> 00:09:12.800
And we already have a new repo.
212
00:09:12.800 --> 00:09:15.190
So we don't have to use this first option.
213
00:09:15.190 --> 00:09:18.500
That would be if we were creating a project completely
214
00:09:18.500 --> 00:09:20.940
from scratch and we didn't already have a code base
215
00:09:20.940 --> 00:09:22.850
and we hadn't gone through those steps
216
00:09:22.850 --> 00:09:23.683
that I just showed you.
217
00:09:23.683 --> 00:09:26.010
And in fact, if you look at this,
218
00:09:26.010 --> 00:09:27.300
look at what they did.
219
00:09:27.300 --> 00:09:28.755
They typed git init,
220
00:09:28.755 --> 00:09:32.030
then they added, just like we did,
221
00:09:32.030 --> 00:09:33.666
except we added all of our files,
222
00:09:33.666 --> 00:09:37.800
and then they typed git commit with a message,
223
00:09:37.800 --> 00:09:39.030
just like we did,
224
00:09:39.030 --> 00:09:42.630
and so now we have these commands to run
225
00:09:42.630 --> 00:09:44.500
and notice that these two commands
226
00:09:44.500 --> 00:09:47.020
are exactly the same as these.
227
00:09:47.020 --> 00:09:48.950
So what you can do is you can come here
228
00:09:48.950 --> 00:09:50.890
to the little copy icon,
229
00:09:50.890 --> 00:09:53.400
click it and then switch back
230
00:09:53.400 --> 00:09:56.220
to Visual Studio Code and paste.
231
00:09:56.220 --> 00:09:58.200
So you can type paste
232
00:09:58.200 --> 00:10:00.910
and it might ask you for your password.
233
00:10:00.910 --> 00:10:02.660
This is your system password,
234
00:10:02.660 --> 00:10:06.060
the one that you set up for the SSH key.
235
00:10:06.060 --> 00:10:08.173
So just type in that password.
236
00:10:09.390 --> 00:10:13.300
And it looks like everything has been pushed up.
237
00:10:13.300 --> 00:10:15.600
So let's switch back to Google Chrome.
238
00:10:15.600 --> 00:10:17.370
You can hit Refresh
239
00:10:17.370 --> 00:10:21.870
and now, you should be able to see all of your files.
240
00:10:21.870 --> 00:10:23.840
So that is perfect.
241
00:10:23.840 --> 00:10:24.940
That's looking really good.
242
00:10:24.940 --> 00:10:26.510
And don't worry about some of these warnings.
243
00:10:26.510 --> 00:10:29.610
We can take care of these as we go through the course.
244
00:10:29.610 --> 00:10:32.230
For right now, it looks like everything's good.
245
00:10:32.230 --> 00:10:33.680
Let's just make one change
246
00:10:33.680 --> 00:10:37.330
because I wanna show you how you can add a single file
247
00:10:37.330 --> 00:10:38.910
and also, if you're new to GitHub,
248
00:10:38.910 --> 00:10:41.970
it's really helpful to go through these commands over
249
00:10:41.970 --> 00:10:43.060
and over again
250
00:10:43.060 --> 00:10:46.240
because you wanna be able to get this to the point
251
00:10:46.240 --> 00:10:48.120
where you've done it so many times
252
00:10:48.120 --> 00:10:51.180
that you kinda just do it naturally.
253
00:10:51.180 --> 00:10:52.950
It's just like breathing to you.
254
00:10:52.950 --> 00:10:56.200
So let's switch back to Visual Studio Code
255
00:10:56.200 --> 00:10:59.640
and let's open up our README file.
256
00:10:59.640 --> 00:11:02.520
Now, notice that we have this README file
257
00:11:02.520 --> 00:11:04.230
with some boilerplate code.
258
00:11:04.230 --> 00:11:05.640
If you switch to Google Chrome,
259
00:11:05.640 --> 00:11:08.980
you'll see that we have all of that written out here
260
00:11:08.980 --> 00:11:11.180
and this is nice and formatted.
261
00:11:11.180 --> 00:11:12.650
Let's update this.
262
00:11:12.650 --> 00:11:15.670
So I'm gonna delete everything here.
263
00:11:15.670 --> 00:11:19.420
And I'm using a little language called Markdown,
264
00:11:19.420 --> 00:11:23.295
and I'm not gonna make this into a Markdown tutorial
265
00:11:23.295 --> 00:11:25.270
and one of the main reasons
266
00:11:25.270 --> 00:11:26.760
is because someone actually created
267
00:11:26.760 --> 00:11:29.620
a site called Markdown Tutorial.
268
00:11:29.620 --> 00:11:30.920
I'll put this in the show notes.
269
00:11:30.920 --> 00:11:33.070
If you would like to get familiar
270
00:11:33.070 --> 00:11:35.320
with how to write Markdown, it's helpful.
271
00:11:35.320 --> 00:11:37.850
A lot of code bases, documentation,
272
00:11:37.850 --> 00:11:38.890
they use Markdown.
273
00:11:38.890 --> 00:11:40.660
And this course, though, isn't a Markdown course
274
00:11:40.660 --> 00:11:42.380
so I'm just gonna show you some
275
00:11:42.380 --> 00:11:44.190
very basic Markdown right now.
276
00:11:44.190 --> 00:11:46.850
So I'm gonna say that this is a heading.
277
00:11:46.850 --> 00:11:49.720
So any time you do a single pound, that's a heading,
278
00:11:49.720 --> 00:11:51.140
and so we're just gonna say this
279
00:11:51.140 --> 00:11:56.140
is the Dissecting React course with Hooks
280
00:11:57.150 --> 00:11:59.560
and then go down a couple lines
281
00:11:59.560 --> 00:12:01.360
and then I'm gonna do the greater than symbol,
282
00:12:01.360 --> 00:12:06.360
and say for the Bottega Code School.
283
00:12:06.810 --> 00:12:08.120
Just like that.
284
00:12:08.120 --> 00:12:09.460
And hit Save.
285
00:12:09.460 --> 00:12:11.893
So now, let's open up the terminal again.
286
00:12:12.750 --> 00:12:15.980
And if you type Control + L,
287
00:12:15.980 --> 00:12:17.370
that's how you can clear it out
288
00:12:17.370 --> 00:12:19.350
and move your cursor all the way up to the top.
289
00:12:19.350 --> 00:12:21.300
It makes it a little bit easier to read.
290
00:12:21.300 --> 00:12:23.710
So now, if I type git status,
291
00:12:23.710 --> 00:12:27.760
notice that we now have a change ready for a commit.
292
00:12:27.760 --> 00:12:30.030
We have one item that's in red.
293
00:12:30.030 --> 00:12:32.230
So let's pretend that we had a couple items.
294
00:12:32.230 --> 00:12:33.900
Say we made a few changes
295
00:12:33.900 --> 00:12:36.370
but we only want to place one
296
00:12:36.370 --> 00:12:38.600
of the changes into version control.
297
00:12:38.600 --> 00:12:41.070
What we can do is select that item.
298
00:12:41.070 --> 00:12:43.580
So I can say git add,
299
00:12:43.580 --> 00:12:45.030
but instead of a dot,
300
00:12:45.030 --> 00:12:48.240
I can say README
301
00:12:48.240 --> 00:12:49.760
because that is the path.
302
00:12:49.760 --> 00:12:52.920
So you'd put the full path to that file.
303
00:12:52.920 --> 00:12:55.430
In this case, it's at the root of the application.
304
00:12:55.430 --> 00:12:59.270
So I'm just gonna say git add README.
305
00:12:59.270 --> 00:13:01.510
And now if I type git status,
306
00:13:01.510 --> 00:13:03.630
you can see that that's green.
307
00:13:03.630 --> 00:13:07.550
So now I can type git commit -m
308
00:13:07.550 --> 00:13:11.370
and I'll say Updated readme content
309
00:13:11.370 --> 00:13:12.683
and this is our message.
310
00:13:13.730 --> 00:13:17.690
And then git push.
311
00:13:17.690 --> 00:13:19.390
And then it may or may not ask you
312
00:13:19.390 --> 00:13:21.143
for your password right after that.
313
00:13:22.170 --> 00:13:23.620
So now what we can do
314
00:13:23.620 --> 00:13:28.050
is we should now have two pushes at the end of this.
315
00:13:28.050 --> 00:13:31.490
So I'm going to go back to our project
316
00:13:31.490 --> 00:13:33.710
and if I hit Refresh,
317
00:13:33.710 --> 00:13:35.870
you'll see that we now have two commits here
318
00:13:35.870 --> 00:13:37.270
on the left-hand side.
319
00:13:37.270 --> 00:13:38.730
If I click on this,
320
00:13:38.730 --> 00:13:41.560
it's gonna show you that we have the initial commit
321
00:13:41.560 --> 00:13:44.870
and we have the updated readme content.
322
00:13:44.870 --> 00:13:46.220
Now, the really cool thing
323
00:13:46.220 --> 00:13:47.860
is if you ever wanna go back
324
00:13:47.860 --> 00:13:49.980
and maybe you don't wanna revert back
325
00:13:49.980 --> 00:13:51.870
to a previous version,
326
00:13:51.870 --> 00:13:53.780
you simply wanna go take a peak
327
00:13:53.780 --> 00:13:55.950
at that code, what you can do
328
00:13:55.950 --> 00:13:58.850
is go all the way to the right
329
00:13:58.850 --> 00:14:01.750
on whatever version you're wanting to look at
330
00:14:01.750 --> 00:14:04.930
and click on this little code icon.
331
00:14:04.930 --> 00:14:06.380
Now if you go to it,
332
00:14:06.380 --> 00:14:09.860
you're actually in that version of the code.
333
00:14:09.860 --> 00:14:11.220
If I scroll down,
334
00:14:11.220 --> 00:14:14.900
notice that our README has now been reverted back.
335
00:14:14.900 --> 00:14:16.680
It hasn't actually reverted back.
336
00:14:16.680 --> 00:14:18.950
We're simply able to look at what it was
337
00:14:18.950 --> 00:14:20.550
in that previous version.
338
00:14:20.550 --> 00:14:21.660
So that's really helpful.
339
00:14:21.660 --> 00:14:23.920
I do that constantly for projects
340
00:14:23.920 --> 00:14:25.910
when I wanna kinda go back in time
341
00:14:25.910 --> 00:14:28.970
and see the state of that application
342
00:14:28.970 --> 00:14:31.250
or maybe see how I wrote code
343
00:14:31.250 --> 00:14:33.730
from a few months or even a few years ago.
344
00:14:33.730 --> 00:14:35.270
And so that's very helpful.
345
00:14:35.270 --> 00:14:39.320
Now, if I go back or I just click on the top title here,
346
00:14:39.320 --> 00:14:41.350
now we're on the most up-to-date version
347
00:14:41.350 --> 00:14:42.480
and if I scroll down,
348
00:14:42.480 --> 00:14:44.220
you can see our changes are there
349
00:14:44.220 --> 00:14:47.080
and they've been formatted with Markdown.
350
00:14:47.080 --> 00:14:48.840
So great job if you went through that.
351
00:14:48.840 --> 00:14:52.280
That is the way that you can use version control
352
00:14:52.280 --> 00:14:53.360
for the project
353
00:14:53.360 --> 00:14:54.390
and you're gonna see
354
00:14:54.390 --> 00:14:56.150
that as we go through this course,
355
00:14:56.150 --> 00:14:59.000
I'm going to have a new commit
356
00:14:59.000 --> 00:15:01.870
for every single video that we do
357
00:15:01.870 --> 00:15:04.780
so that you'll be able to come to my repo here,
358
00:15:04.780 --> 00:15:07.223
if you ever wanna check out what my code looks like
359
00:15:07.223 --> 00:15:10.140
and you can click on a specific commit
360
00:15:10.140 --> 00:15:13.103
to go see that video's code.