- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.640 --> 00:00:02.820
In this guide, we are gonna walk through
2
00:00:02.820 --> 00:00:05.520
how we can generate our project.
3
00:00:05.520 --> 00:00:08.660
Now, you should already have npm installed
4
00:00:08.660 --> 00:00:12.860
along with Node and the devcamp-js-builder.
5
00:00:12.860 --> 00:00:15.157
If not, I will provide a link here
6
00:00:15.157 --> 00:00:17.290
and this has all of the instructions
7
00:00:17.290 --> 00:00:22.000
for how to install the js-builder application
8
00:00:22.000 --> 00:00:23.790
or the js-builder module.
9
00:00:23.790 --> 00:00:26.390
So what this is is it's a tool
10
00:00:26.390 --> 00:00:30.290
that gives you a starting point for React applications
11
00:00:30.290 --> 00:00:32.120
and you don't have to just use it
12
00:00:32.120 --> 00:00:34.570
for this project, you can actually use this
13
00:00:34.570 --> 00:00:37.400
for any type of React application
14
00:00:37.400 --> 00:00:39.410
that you wanna build from this point on.
15
00:00:39.410 --> 00:00:42.850
It has a really nice set of starting points,
16
00:00:42.850 --> 00:00:44.520
some boilerplate code
17
00:00:44.520 --> 00:00:47.580
and it's even built for deployments,
18
00:00:47.580 --> 00:00:49.650
for easy deployments on tools
19
00:00:49.650 --> 00:00:53.070
such as Heroku, which we're gonna do at the very end
20
00:00:53.070 --> 00:00:54.060
of this course.
21
00:00:54.060 --> 00:00:55.570
So let's get started.
22
00:00:55.570 --> 00:00:58.560
I'm going to open up the terminal here.
23
00:00:58.560 --> 00:01:01.260
You could open up the command prompt
24
00:01:01.260 --> 00:01:03.930
or whatever you're using that gives you access
25
00:01:03.930 --> 00:01:06.830
to run your npm commands.
26
00:01:06.830 --> 00:01:09.000
So right here what I'm gonna type out,
27
00:01:09.000 --> 00:01:10.300
and make sure you're doing this
28
00:01:10.300 --> 00:01:13.160
in the directory that you wanna store the project in.
29
00:01:13.160 --> 00:01:16.440
So mine is the code directory.
30
00:01:16.440 --> 00:01:20.840
And I'm gonna type js-generate.
31
00:01:20.840 --> 00:01:21.930
And when I run this,
32
00:01:21.930 --> 00:01:24.740
it's gonna ask me what type of template
33
00:01:24.740 --> 00:01:26.250
that I'd like to start from.
34
00:01:26.250 --> 00:01:28.580
So I've everything from starter
35
00:01:28.580 --> 00:01:32.490
to bootstrap to redux to redux-router,
36
00:01:32.490 --> 00:01:34.870
react-router, react-skeleton
37
00:01:34.870 --> 00:01:37.460
and then a TypeScript version.
38
00:01:37.460 --> 00:01:39.170
I'm gonna use, for this course,
39
00:01:39.170 --> 00:01:41.490
the react-router template.
40
00:01:41.490 --> 00:01:42.840
What this is gonna give us
41
00:01:42.840 --> 00:01:44.940
is a up-to-date version
42
00:01:44.940 --> 00:01:48.910
of React along with the React routing system
43
00:01:48.910 --> 00:01:52.320
that allows us to navigate between pages.
44
00:01:52.320 --> 00:01:54.350
So that is gonna be what we need.
45
00:01:54.350 --> 00:01:55.790
I'm gonna click on that
46
00:01:55.790 --> 00:01:57.610
and then for the project name,
47
00:01:57.610 --> 00:02:01.423
I'm gonna call this DissectingReact with Hooks.
48
00:02:05.610 --> 00:02:07.800
You can call yours anything that you'd like,
49
00:02:07.800 --> 00:02:09.920
and I follow this naming convention
50
00:02:09.920 --> 00:02:14.160
where I start off each word with a capital letter.
51
00:02:14.160 --> 00:02:16.190
So I'm gonna type return
52
00:02:16.190 --> 00:02:19.250
and that'll generate the project for me.
53
00:02:19.250 --> 00:02:21.390
Now, I'm going to change in the directory.
54
00:02:21.390 --> 00:02:23.060
Now, this is because I'm on,
55
00:02:23.060 --> 00:02:24.310
if you're a Mac or Linux,
56
00:02:24.310 --> 00:02:25.480
this command will work
57
00:02:25.480 --> 00:02:26.983
where I change directory.
58
00:02:26.983 --> 00:02:30.050
And I open that up.
59
00:02:30.050 --> 00:02:32.970
Now, you could also open up the project,
60
00:02:32.970 --> 00:02:34.560
not just with the cd command,
61
00:02:34.560 --> 00:02:37.390
you could also go to Visual Studio Code,
62
00:02:37.390 --> 00:02:39.930
and just type Command + O
63
00:02:39.930 --> 00:02:42.380
or go to File, Open
64
00:02:42.380 --> 00:02:45.810
and then you'll be able to go and then access
65
00:02:45.810 --> 00:02:47.090
that new application.
66
00:02:47.090 --> 00:02:49.590
So I'm gonna go to Code here
67
00:02:49.590 --> 00:02:52.580
and then I called this DissectingReact with Hooks.
68
00:02:52.580 --> 00:02:54.440
So I'll click on that project.
69
00:02:54.440 --> 00:02:58.440
Click Open and that will open the full project for me.
70
00:02:58.440 --> 00:03:00.930
Now, you can see, here are all the files
71
00:03:00.930 --> 00:03:03.610
that were auto generated for us.
72
00:03:03.610 --> 00:03:05.970
And don't worry if you get a little error like here
73
00:03:05.970 --> 00:03:07.750
where it says the git repository
74
00:03:07.750 --> 00:03:09.320
has too many active changes.
75
00:03:09.320 --> 00:03:10.153
Don't worry about that,
76
00:03:10.153 --> 00:03:12.530
we're not gonna worry about GitHub at this moment.
77
00:03:12.530 --> 00:03:13.980
So you can click out of that
78
00:03:13.980 --> 00:03:17.430
and you can see we have a proxy directory,
79
00:03:17.430 --> 00:03:21.070
an src directory, static webpack directories
80
00:03:21.070 --> 00:03:22.430
and then some files.
81
00:03:22.430 --> 00:03:23.720
Over the next few guides,
82
00:03:23.720 --> 00:03:26.980
we're gonna walk through what each one of these means
83
00:03:26.980 --> 00:03:28.980
for us, how you can use them
84
00:03:28.980 --> 00:03:32.690
in the application and how you can also customize them.
85
00:03:32.690 --> 00:03:34.870
So we're gonna get into each one of those.
86
00:03:34.870 --> 00:03:37.280
So if you see a lot of these files,
87
00:03:37.280 --> 00:03:39.200
don't let it intimidate you at all.
88
00:03:39.200 --> 00:03:41.860
We are gonna walk through each one of them
89
00:03:41.860 --> 00:03:43.290
so it really makes sense.
90
00:03:43.290 --> 00:03:45.860
That kind of goes to the heart of this course.
91
00:03:45.860 --> 00:03:48.650
That's why it's called Dissecting React
92
00:03:48.650 --> 00:03:51.020
because I want to really get in
93
00:03:51.020 --> 00:03:55.290
and look at every part of the React application
94
00:03:55.290 --> 00:03:56.123
and how it works
95
00:03:56.123 --> 00:03:58.690
'cause I find that's really one of the best ways
96
00:03:58.690 --> 00:04:02.290
for being able to build React applications.
97
00:04:02.290 --> 00:04:05.400
So the last thing we're gonna do in this guide
98
00:04:05.400 --> 00:04:08.680
is you can either, if you're in the terminal,
99
00:04:08.680 --> 00:04:10.290
and you've changed directories,
100
00:04:10.290 --> 00:04:11.965
and you're actually in that project,
101
00:04:11.965 --> 00:04:14.650
you can run this task here,
102
00:04:14.650 --> 00:04:17.940
or if you're in Visual Studio Code,
103
00:04:17.940 --> 00:04:20.300
you can open up the terminal.
104
00:04:20.300 --> 00:04:21.900
Now, you can open up the terminal
105
00:04:21.900 --> 00:04:26.470
by typing Command and then the tilde character here,
106
00:04:26.470 --> 00:04:30.380
and that also gives you a terminal right here
107
00:04:30.380 --> 00:04:31.560
in Visual Studio Code.
108
00:04:31.560 --> 00:04:33.000
You can use either option.
109
00:04:33.000 --> 00:04:35.130
This is the exact same terminal,
110
00:04:35.130 --> 00:04:37.740
whether you're doing it in Visual Studio Code
111
00:04:37.740 --> 00:04:39.900
or you're doing it in the terminal,
112
00:04:39.900 --> 00:04:44.900
or PowerShell or Command Prompt, it's the same access point.
113
00:04:45.700 --> 00:04:47.210
What the terminal is,
114
00:04:47.210 --> 00:04:49.420
just in case that's still a little bit fuzzy for you,
115
00:04:49.420 --> 00:04:51.630
the terminal gives you the ability
116
00:04:51.630 --> 00:04:56.260
to run commands that are directly related
117
00:04:56.260 --> 00:04:57.160
to your file system.
118
00:04:57.160 --> 00:04:59.540
So you can run commands like we're about to
119
00:04:59.540 --> 00:05:00.950
where you can run scripts,
120
00:05:00.950 --> 00:05:02.660
or you could create files.
121
00:05:02.660 --> 00:05:04.000
You could delete files.
122
00:05:04.000 --> 00:05:08.670
It's a way that you can interact with your operating system
123
00:05:08.670 --> 00:05:10.810
on a command basis.
124
00:05:10.810 --> 00:05:13.270
Kind of similar to how you would interact
125
00:05:13.270 --> 00:05:15.670
with the visual interface.
126
00:05:15.670 --> 00:05:19.650
So if I were to open up the finder here,
127
00:05:19.650 --> 00:05:23.350
this is interacting with the operating system.
128
00:05:23.350 --> 00:05:24.700
I'm able to move files around.
129
00:05:24.700 --> 00:05:26.980
I'm able to do all of the kind of tasks
130
00:05:26.980 --> 00:05:28.770
you're probably used to doing
131
00:05:28.770 --> 00:05:30.400
but with the terminal,
132
00:05:30.400 --> 00:05:33.240
you can do that with writing commands.
133
00:05:33.240 --> 00:05:36.710
So just in case you're relatively new to the terminal.
134
00:05:36.710 --> 00:05:38.120
So the command we're gonna run,
135
00:05:38.120 --> 00:05:40.090
and we can run it here once again
136
00:05:40.090 --> 00:05:44.570
in Visual Studio Code is npm install.
137
00:05:44.570 --> 00:05:46.280
And just as a reminder,
138
00:05:46.280 --> 00:05:48.540
make sure you're in the correct directory,
139
00:05:48.540 --> 00:05:50.160
'cause if you run this command
140
00:05:50.160 --> 00:05:51.310
and you're outside of it,
141
00:05:51.310 --> 00:05:52.550
and you haven't changed into it,
142
00:05:52.550 --> 00:05:54.020
then you're gonna get an error.
143
00:05:54.020 --> 00:05:56.800
So type npm install.
144
00:05:56.800 --> 00:06:00.680
And that's going to go to npm
145
00:06:00.680 --> 00:06:04.210
and then it's gonna pull down all of the dependencies
146
00:06:04.210 --> 00:06:05.810
that our application needs.
147
00:06:05.810 --> 00:06:08.810
So if I switch over to Visual Studio Code right here,
148
00:06:08.810 --> 00:06:10.149
what it's gonna do is,
149
00:06:10.149 --> 00:06:13.160
and we're gonna walk through this later,
150
00:06:13.160 --> 00:06:17.130
we have this file called the package.json file
151
00:06:17.130 --> 00:06:18.640
and inside of here,
152
00:06:18.640 --> 00:06:21.290
we have a bunch of these dependencies.
153
00:06:21.290 --> 00:06:22.430
So these are dependencies
154
00:06:22.430 --> 00:06:25.680
that are essentially code libraries.
155
00:06:25.680 --> 00:06:30.090
They give us access to do things like call APIs
156
00:06:30.090 --> 00:06:32.610
or to have routing and even React
157
00:06:32.610 --> 00:06:35.820
is one of the dependencies that we have access to.
158
00:06:35.820 --> 00:06:37.760
When you run npm install,
159
00:06:37.760 --> 00:06:41.800
what's happening is our program or our local system
160
00:06:41.800 --> 00:06:43.990
is going up to npm
161
00:06:43.990 --> 00:06:47.020
to where all of these libraries are stored
162
00:06:47.020 --> 00:06:50.960
and it's going and grabbing each one of these libraries
163
00:06:50.960 --> 00:06:54.580
and installing it into our project
164
00:06:54.580 --> 00:06:57.000
and after it's completed, you'll see right up here
165
00:06:57.000 --> 00:06:58.210
on the left-hand side,
166
00:06:58.210 --> 00:07:00.250
it's going to give us access
167
00:07:00.250 --> 00:07:02.890
to a brand new directory,
168
00:07:02.890 --> 00:07:04.990
it's going to create a whole nother file
169
00:07:04.990 --> 00:07:07.440
where all of our dependencies are locked
170
00:07:07.440 --> 00:07:09.510
into their version
171
00:07:09.510 --> 00:07:12.160
and it's gonna do all of that work for us.
172
00:07:12.160 --> 00:07:14.722
So let's check this out, see if it's done yet.
173
00:07:14.722 --> 00:07:16.100
It's still working.
174
00:07:16.100 --> 00:07:18.130
Now, depending on how fast
175
00:07:18.130 --> 00:07:20.000
or slow your internet connection is,
176
00:07:20.000 --> 00:07:22.380
this could take up to a few minutes
177
00:07:22.380 --> 00:07:24.090
so just kind of give it time
178
00:07:24.090 --> 00:07:26.760
and don't worry about the little warnings
179
00:07:26.760 --> 00:07:27.593
that pop up here.
180
00:07:27.593 --> 00:07:29.190
The only thing we have to watch out for
181
00:07:29.190 --> 00:07:31.040
are if any big errors happen
182
00:07:31.040 --> 00:07:34.160
or if it says that it failed to perform a task.
183
00:07:34.160 --> 00:07:35.620
Now, while this is going,
184
00:07:35.620 --> 00:07:38.150
if you do run into any of those errors,
185
00:07:38.150 --> 00:07:40.400
some common causes for that
186
00:07:40.400 --> 00:07:43.100
are things like being behind a firewall.
187
00:07:43.100 --> 00:07:44.870
Sometimes I've seen a firewall
188
00:07:44.870 --> 00:07:47.640
can block this installation process
189
00:07:47.640 --> 00:07:51.090
or maybe using a type of VPN
190
00:07:51.090 --> 00:07:52.330
or something like that.
191
00:07:52.330 --> 00:07:55.540
So I have had students that ran into those kind of issues.
192
00:07:55.540 --> 00:07:57.680
But here it looks like everything worked.
193
00:07:57.680 --> 00:07:59.720
At the very end, it should say
194
00:07:59.720 --> 00:08:03.140
that it added a certain number of packages
195
00:08:03.140 --> 00:08:05.480
and you shouldn't have any errors.
196
00:08:05.480 --> 00:08:06.480
So that looks good.
197
00:08:06.480 --> 00:08:08.930
Let's switch into Visual Studio Code.
198
00:08:08.930 --> 00:08:11.139
And now you can see that,
199
00:08:11.139 --> 00:08:14.500
and also, you see this little Refresh button here?
200
00:08:14.500 --> 00:08:16.330
If for some reason you don't see
201
00:08:16.330 --> 00:08:18.570
the new node_modules directory
202
00:08:18.570 --> 00:08:20.340
or this package-lock file,
203
00:08:20.340 --> 00:08:21.810
just click on Refresh
204
00:08:21.810 --> 00:08:24.620
and it should pop that open for us.
205
00:08:24.620 --> 00:08:26.530
So what happened right there
206
00:08:26.530 --> 00:08:28.420
when we installed all those packages
207
00:08:28.420 --> 00:08:33.420
is we now have access to all of those code libraries.
208
00:08:33.430 --> 00:08:35.170
And we're gonna walk through,
209
00:08:35.170 --> 00:08:38.100
not each one of these, 'cause there are literally thousands,
210
00:08:38.100 --> 00:08:40.260
but we're gonna take a look at a few of 'em
211
00:08:40.260 --> 00:08:43.980
just so you can see what makes up a Node module
212
00:08:43.980 --> 00:08:46.390
and you'll be able to really get a feel
213
00:08:46.390 --> 00:08:48.130
for everything that happens
214
00:08:48.130 --> 00:08:50.090
during that installation process.
215
00:08:50.090 --> 00:08:52.650
So last thing that we're gonna do in this guide
216
00:08:52.650 --> 00:08:53.690
is we're just gonna make sure
217
00:08:53.690 --> 00:08:55.175
that everything's working.
218
00:08:55.175 --> 00:08:57.800
So either in the terminal here,
219
00:08:57.800 --> 00:09:00.160
so you could type Control + tilde
220
00:09:00.160 --> 00:09:03.080
or you can switch into the terminal,
221
00:09:03.080 --> 00:09:07.480
we're gonna run the command npm run start.
222
00:09:07.480 --> 00:09:09.250
Now, what that is going to do
223
00:09:09.250 --> 00:09:12.800
is that is going to run a script
224
00:09:12.800 --> 00:09:16.470
where it starts our local React server.
225
00:09:16.470 --> 00:09:20.030
So that's how we're able to have our program running
226
00:09:20.030 --> 00:09:21.550
on our local machines
227
00:09:21.550 --> 00:09:24.750
is because we have a server directly built
228
00:09:24.750 --> 00:09:26.500
into this application.
229
00:09:26.500 --> 00:09:28.770
So if it says compiled successfully there
230
00:09:28.770 --> 00:09:30.810
at the very end, that means that it's working.
231
00:09:30.810 --> 00:09:33.600
Now, let's switch to the browser
232
00:09:33.600 --> 00:09:35.540
and open this up
233
00:09:35.540 --> 00:09:40.040
and in the browser, go to localhost:3000.
234
00:09:41.920 --> 00:09:43.580
And if everything worked,
235
00:09:43.580 --> 00:09:45.200
then you can see right here
236
00:09:45.200 --> 00:09:49.210
that you should have a browser with a page
237
00:09:49.210 --> 00:09:50.650
that is working.
238
00:09:50.650 --> 00:09:51.810
So we can ignore all this.
239
00:09:51.810 --> 00:09:52.710
We're gonna get rid of this.
240
00:09:52.710 --> 00:09:55.490
I'm gonna show you how we can update all of this
241
00:09:55.490 --> 00:09:56.840
over the next few guides.
242
00:09:56.840 --> 00:10:00.600
So if you're seeing something similar to this
243
00:10:00.600 --> 00:10:02.500
and you have a page showing right now,
244
00:10:02.500 --> 00:10:04.324
that means everything is working for you
245
00:10:04.324 --> 00:10:07.460
and we're ready to get started moving along
246
00:10:07.460 --> 00:10:08.563
with the project.