- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.570 --> 00:00:02.000
In this section of the course,
2
00:00:02.000 --> 00:00:03.970
we are gonna dive into React
3
00:00:03.970 --> 00:00:05.780
and we are gonna learn some
4
00:00:05.780 --> 00:00:10.780
of the key fundamentals around building React applications,
5
00:00:10.900 --> 00:00:13.720
which means we're gonna discuss components,
6
00:00:13.720 --> 00:00:16.570
we're gonna talk about how to work with hooks
7
00:00:16.570 --> 00:00:19.750
and all of the different elements that you need
8
00:00:19.750 --> 00:00:24.750
in order to understand how to work with programs in React.
9
00:00:24.810 --> 00:00:26.320
So in this guide,
10
00:00:26.320 --> 00:00:27.560
we're gonna start small
11
00:00:27.560 --> 00:00:31.380
and we're gonna simply create some page components
12
00:00:31.380 --> 00:00:32.380
and in the next guide,
13
00:00:32.380 --> 00:00:35.230
we're gonna see how we can use React Router
14
00:00:35.230 --> 00:00:38.530
to link and navigate between those components.
15
00:00:38.530 --> 00:00:39.800
So let's get started.
16
00:00:39.800 --> 00:00:42.110
I have the App component open right here.
17
00:00:42.110 --> 00:00:44.730
We're not gonna do anything with it at this moment
18
00:00:44.730 --> 00:00:47.500
but you can definitely use it kind of as a model
19
00:00:47.500 --> 00:00:50.840
for the rest of the work we're gonna do.
20
00:00:50.840 --> 00:00:54.560
So here, if you come here into src,
21
00:00:54.560 --> 00:00:57.450
components, style, these are the directories
22
00:00:57.450 --> 00:00:59.120
in our src directory.
23
00:00:59.120 --> 00:01:03.140
Now, I'm gonna create a new directory here called pages.
24
00:01:03.140 --> 00:01:06.090
So I'm going to click New File,
25
00:01:06.090 --> 00:01:09.660
so select src, click New File,
26
00:01:09.660 --> 00:01:14.660
type out pages/ and then let's create the very first one.
27
00:01:15.470 --> 00:01:17.060
We're gonna have a Home page.
28
00:01:17.060 --> 00:01:20.360
So that's gonna be Home.js.
29
00:01:20.360 --> 00:01:22.210
And let's create a few more,
30
00:01:22.210 --> 00:01:24.130
so we're gonna have Home.
31
00:01:24.130 --> 00:01:27.600
Let's have one that's called About.js.
32
00:01:27.600 --> 00:01:31.940
That is also gonna be listed inside of the pages component.
33
00:01:31.940 --> 00:01:35.503
And then let's do one called Blog.js.
34
00:01:37.440 --> 00:01:40.070
And that's all we're gonna need for right now.
35
00:01:40.070 --> 00:01:41.620
And this is gonna give us what we need
36
00:01:41.620 --> 00:01:44.400
in order to build this base components
37
00:01:44.400 --> 00:01:46.500
and then from there be able
38
00:01:46.500 --> 00:01:49.740
to go and start adding the ability
39
00:01:49.740 --> 00:01:52.680
to navigate between these pages.
40
00:01:52.680 --> 00:01:56.130
So let's get started with the Blog page.
41
00:01:56.130 --> 00:01:59.450
We're just gonna add the base set
42
00:01:59.450 --> 00:02:01.560
of boilerplate React code
43
00:02:01.560 --> 00:02:04.900
and these are all gonna be function-based components.
44
00:02:04.900 --> 00:02:08.520
So I'm gonna say I want to use the const
45
00:02:08.520 --> 00:02:11.220
or actually, let's just import React first.
46
00:02:11.220 --> 00:02:14.120
So I'm gonna say import React from react
47
00:02:14.120 --> 00:02:17.920
because any time you're gonna build a React-based component,
48
00:02:17.920 --> 00:02:20.930
whether it's a class or a functional component,
49
00:02:20.930 --> 00:02:22.550
you need to import React.
50
00:02:22.550 --> 00:02:26.500
And then from there, we can say export default
51
00:02:26.500 --> 00:02:29.610
and for right now, we're not gonna pass in any properties.
52
00:02:29.610 --> 00:02:31.930
We're gonna talk about properties in a little bit
53
00:02:31.930 --> 00:02:35.450
and how we can use them with our own custom components.
54
00:02:35.450 --> 00:02:38.690
And then this is gonna be a fat arrow function.
55
00:02:38.690 --> 00:02:40.680
And then inside of it,
56
00:02:40.680 --> 00:02:43.140
so add curly brackets and then inside of it,
57
00:02:43.140 --> 00:02:46.390
just type return div
58
00:02:46.390 --> 00:02:48.020
and then for right now,
59
00:02:48.020 --> 00:02:52.650
let's just put in the name of that component and hit Save.
60
00:02:52.650 --> 00:02:54.180
Now, you may have noticed,
61
00:02:54.180 --> 00:02:55.620
and I'm gonna show you this
62
00:02:55.620 --> 00:02:58.670
in an even more exaggerated example
63
00:02:58.670 --> 00:03:00.540
how when I hit Save,
64
00:03:00.540 --> 00:03:03.960
certain formatting items get taken care of for me.
65
00:03:03.960 --> 00:03:05.930
Like right there, I hit Save
66
00:03:05.930 --> 00:03:09.420
and a semicolon was added to the end of that line.
67
00:03:09.420 --> 00:03:12.040
That is all through using
68
00:03:12.040 --> 00:03:15.490
a very helpful tool called Prettier.
69
00:03:15.490 --> 00:03:18.290
And so if you go into Visual Studio Code,
70
00:03:18.290 --> 00:03:20.730
and click on your Extensions here,
71
00:03:20.730 --> 00:03:25.330
then you are gonna find one called Prettier.
72
00:03:25.330 --> 00:03:26.163
There we go.
73
00:03:26.163 --> 00:03:28.900
It's the Prettier Code formatter
74
00:03:28.900 --> 00:03:31.390
and so if you want,
75
00:03:31.390 --> 00:03:35.650
if you like how my Visual Studio Code behaves
76
00:03:35.650 --> 00:03:38.500
where I'm able to hit Save and then everything
77
00:03:38.500 --> 00:03:40.180
is formatted automatically,
78
00:03:40.180 --> 00:03:43.600
you can simply install this extension directly
79
00:03:43.600 --> 00:03:45.420
in Visual Studio Code
80
00:03:45.420 --> 00:03:48.590
and then it's gonna do the same thing for you.
81
00:03:48.590 --> 00:03:50.640
I'm a really big fan of it
82
00:03:50.640 --> 00:03:53.050
because it makes sure that each one
83
00:03:53.050 --> 00:03:58.050
of my files have the exact same set of formatting rules
84
00:03:58.220 --> 00:03:59.520
and that's why I use that.
85
00:03:59.520 --> 00:04:01.800
So feel free to install that if you want
86
00:04:01.800 --> 00:04:02.980
to have the same behavior.
87
00:04:02.980 --> 00:04:04.580
And I'll show you this in even more
88
00:04:04.580 --> 00:04:06.430
of an exaggerated sense right here
89
00:04:06.430 --> 00:04:07.980
in the About component.
90
00:04:07.980 --> 00:04:12.760
So here, let me import React from react
91
00:04:12.760 --> 00:04:16.200
and then I'll say export default.
92
00:04:16.200 --> 00:04:19.420
Once again, this is gonna be a fat arrow function
93
00:04:19.420 --> 00:04:21.060
that takes in no properties
94
00:04:21.060 --> 00:04:23.690
and then I'll say return
95
00:04:23.690 --> 00:04:26.590
and then watch what happens if I type this all out
96
00:04:26.590 --> 00:04:27.423
on one line.
97
00:04:27.423 --> 00:04:32.060
I'm gonna say div with a h1 tag of About
98
00:04:32.060 --> 00:04:34.950
and then another div nested here
99
00:04:34.950 --> 00:04:37.843
that says Some content.
100
00:04:38.690 --> 00:04:41.780
Now, obviously this would be pretty hard to read
101
00:04:41.780 --> 00:04:44.820
and so Prettier fixes the formatting for us.
102
00:04:44.820 --> 00:04:46.360
If I hit Save now,
103
00:04:46.360 --> 00:04:50.060
you'll see that it added these parentheses,
104
00:04:50.060 --> 00:04:53.720
so the entire element that got returned gets wrapped up
105
00:04:53.720 --> 00:04:56.090
in the parentheses, which is required
106
00:04:56.090 --> 00:04:57.680
and then from there,
107
00:04:57.680 --> 00:05:01.320
it moved the parent div out
108
00:05:01.320 --> 00:05:04.380
to the exterior of the component
109
00:05:04.380 --> 00:05:07.490
and then here, it put in the h1
110
00:05:07.490 --> 00:05:09.840
and the div tag and lined everything up.
111
00:05:09.840 --> 00:05:11.910
That's a very helpful tool
112
00:05:11.910 --> 00:05:13.590
because what it allows me to do
113
00:05:13.590 --> 00:05:16.472
as I'm typing is I don't really worry a ton
114
00:05:16.472 --> 00:05:21.070
about indentation or how my code's being formatted
115
00:05:21.070 --> 00:05:22.340
because as soon as I hit Save,
116
00:05:22.340 --> 00:05:25.210
it's gonna automatically be formatted for me.
117
00:05:25.210 --> 00:05:30.210
And I was actually introduced to this Prettier tool
118
00:05:30.580 --> 00:05:34.730
by a gentleman who actually created React Router,
119
00:05:34.730 --> 00:05:36.620
which is what we're gonna start working with
120
00:05:36.620 --> 00:05:37.580
in the next guide.
121
00:05:37.580 --> 00:05:39.870
And he uses it on all of his projects
122
00:05:39.870 --> 00:05:42.460
and I've become a pretty big fan of it as well.
123
00:05:42.460 --> 00:05:45.170
And so in our Home component,
124
00:05:45.170 --> 00:05:48.470
this is what we're already seeing right here.
125
00:05:48.470 --> 00:05:53.470
So what I'm gonna do is I'm gonna open up our file system
126
00:05:53.940 --> 00:05:57.510
and go into our app and shared,
127
00:05:57.510 --> 00:05:59.140
and make sure I'm not missing anything,
128
00:05:59.140 --> 00:06:01.400
so I have our app component here
129
00:06:01.400 --> 00:06:03.550
and I really just wanna bring everything
130
00:06:03.550 --> 00:06:06.850
that is in the app component
131
00:06:06.850 --> 00:06:09.010
into our new Home page.
132
00:06:09.010 --> 00:06:10.090
So let's do that.
133
00:06:10.090 --> 00:06:14.983
I'm actually just going to copy everything here.
134
00:06:16.300 --> 00:06:19.113
Let's see, yes, I just wanna copy all of this.
135
00:06:20.040 --> 00:06:22.140
And then I'm gonna import React
136
00:06:24.610 --> 00:06:28.630
from react and then I'm just gonna paste this in,
137
00:06:28.630 --> 00:06:30.330
and then I just have to wrap it up
138
00:06:30.330 --> 00:06:31.790
as a functional component.
139
00:06:31.790 --> 00:06:34.270
So I can say export default.
140
00:06:34.270 --> 00:06:36.380
Not gonna take in any props
141
00:06:36.380 --> 00:06:41.020
and then at the very end, add curly brackets.
142
00:06:41.020 --> 00:06:43.560
I'll hit Save here just so you can see,
143
00:06:43.560 --> 00:06:45.560
if you're following along and typing,
144
00:06:45.560 --> 00:06:48.580
you'll see that this is still a pretty basic component.
145
00:06:48.580 --> 00:06:50.030
We're importing React,
146
00:06:50.030 --> 00:06:53.560
we're exporting default of a functional component
147
00:06:53.560 --> 00:06:56.740
and then I just brought in all of those elements
148
00:06:56.740 --> 00:07:00.740
that we needed in order to have what you see
149
00:07:00.740 --> 00:07:02.360
on the right-hand side here.
150
00:07:02.360 --> 00:07:04.920
Now, we have not imported the NavBar,
151
00:07:04.920 --> 00:07:06.970
so we're gonna have to import that.
152
00:07:06.970 --> 00:07:09.650
So I'm gonna say import NavBar
153
00:07:09.650 --> 00:07:14.650
from ../components/shared/NavBar.
154
00:07:17.140 --> 00:07:20.160
And then that should be everything that I need
155
00:07:20.160 --> 00:07:22.240
on that side and so now what I can do
156
00:07:22.240 --> 00:07:24.340
in my App component here
157
00:07:24.340 --> 00:07:28.780
is I no longer need to import the NavBar
158
00:07:28.780 --> 00:07:31.220
and instead, all I have to do
159
00:07:31.220 --> 00:07:36.220
is say import Home from ../pages
160
00:07:38.590 --> 00:07:43.590
and then Home and then I should now be able
161
00:07:43.820 --> 00:07:48.820
to just say return the Home component.
162
00:07:48.970 --> 00:07:51.670
Let's hit Save and let's see if this works.
163
00:07:51.670 --> 00:07:53.490
And there you go, everything's still working.
164
00:07:53.490 --> 00:07:56.410
So I wanted to perform that task.
165
00:07:56.410 --> 00:07:58.470
This is a temporary solution.
166
00:07:58.470 --> 00:08:01.750
You're gonna see, once we have our routing in place,
167
00:08:01.750 --> 00:08:05.310
our router is gonna manage this process for us
168
00:08:05.310 --> 00:08:06.900
but I wanted you to see
169
00:08:06.900 --> 00:08:10.860
how the component-based architecture can work.
170
00:08:10.860 --> 00:08:13.120
Did you see how we were able to extract all
171
00:08:13.120 --> 00:08:15.780
of the code out of this App component,
172
00:08:15.780 --> 00:08:19.150
wrap it up in a Home component
173
00:08:19.150 --> 00:08:22.640
and then simply call that new Home component
174
00:08:22.640 --> 00:08:26.360
and everything on the site has remained the same.
175
00:08:26.360 --> 00:08:30.860
And this is gonna become even more important,
176
00:08:30.860 --> 00:08:33.160
the more complex the application gets.
177
00:08:33.160 --> 00:08:34.700
So when you start to get
178
00:08:34.700 --> 00:08:38.060
into very large complex applications,
179
00:08:38.060 --> 00:08:40.840
you're gonna find that it's incredibly helpful
180
00:08:40.840 --> 00:08:42.050
to be able to use
181
00:08:42.050 --> 00:08:46.090
this component-based architecture design pattern
182
00:08:46.090 --> 00:08:48.580
where you can go to a component
183
00:08:48.580 --> 00:08:51.810
and say that something that you're building
184
00:08:51.810 --> 00:08:53.940
is starting to feel a little complex,
185
00:08:53.940 --> 00:08:57.480
where you're adding a lot of code into a single file.
186
00:08:57.480 --> 00:09:00.650
You can always do exactly what we did here
187
00:09:00.650 --> 00:09:04.010
where you can extract part of that code out,
188
00:09:04.010 --> 00:09:06.760
place it in its own dedicated component
189
00:09:06.760 --> 00:09:08.270
and then pull that in.
190
00:09:08.270 --> 00:09:09.760
It's a great way of being able
191
00:09:09.760 --> 00:09:13.030
to organize your code and it also really helps
192
00:09:13.030 --> 00:09:16.800
to make the code more readable and maintainable.
193
00:09:16.800 --> 00:09:18.310
Now, if you wanna test it out
194
00:09:18.310 --> 00:09:20.360
to see what the other pages would look like,
195
00:09:20.360 --> 00:09:22.140
we can simply replace these.
196
00:09:22.140 --> 00:09:24.580
So let's say instead of Home,
197
00:09:24.580 --> 00:09:27.320
we could say I wanna import About
198
00:09:28.770 --> 00:09:33.490
and then now in this, instead of saying Home,
199
00:09:33.490 --> 00:09:36.430
I say I wanna return About here.
200
00:09:36.430 --> 00:09:39.050
Hit Save and now you're gonna see
201
00:09:39.050 --> 00:09:41.560
that our About content is here.
202
00:09:41.560 --> 00:09:43.140
Now, eventually, we're gonna make it
203
00:09:43.140 --> 00:09:47.090
so you can click to navigate from one page to the other
204
00:09:47.090 --> 00:09:48.210
but for right now,
205
00:09:48.210 --> 00:09:51.390
we can at least see that that is all working properly.
206
00:09:51.390 --> 00:09:53.970
I'm gonna undo those changes.
207
00:09:53.970 --> 00:09:56.070
So we're back to having our Home page here.
208
00:09:56.070 --> 00:09:57.590
And so in this guide,
209
00:09:57.590 --> 00:10:02.430
we have created our base set of page components.
210
00:10:02.430 --> 00:10:05.470
And one of the key takeaways I want you to have here
211
00:10:05.470 --> 00:10:09.630
is that as far as React is looking at the code,
212
00:10:09.630 --> 00:10:12.230
there is literally no difference at all
213
00:10:12.230 --> 00:10:14.940
between a page component
214
00:10:14.940 --> 00:10:17.820
and any other type of component.
215
00:10:17.820 --> 00:10:20.820
So it's really the exact same code.
216
00:10:20.820 --> 00:10:24.373
So when we created our NavBar,
217
00:10:25.220 --> 00:10:28.698
notice here our NavBar, from a code perspective,
218
00:10:28.698 --> 00:10:32.340
looks pretty much exactly like how one
219
00:10:32.340 --> 00:10:34.250
of the pages look like.
220
00:10:34.250 --> 00:10:35.950
It's just a component
221
00:10:35.950 --> 00:10:38.880
and we're having that component do
222
00:10:38.880 --> 00:10:41.150
just a different set of responsibilities.
223
00:10:41.150 --> 00:10:45.660
So when I created this pages directory,
224
00:10:45.660 --> 00:10:46.980
that's not required.
225
00:10:46.980 --> 00:10:49.660
You could have created a directory called views.
226
00:10:49.660 --> 00:10:53.110
You could have put all of these components
227
00:10:53.110 --> 00:10:55.960
inside of the component directory if you wanted.
228
00:10:55.960 --> 00:10:57.560
It's completely up to you
229
00:10:57.560 --> 00:11:00.270
and how you feel that the code base
230
00:11:00.270 --> 00:11:01.960
can best be organized.
231
00:11:01.960 --> 00:11:05.460
I personally like to create a pages directory
232
00:11:05.460 --> 00:11:07.310
in my applications
233
00:11:07.310 --> 00:11:09.650
because it's easy for me to remember.
234
00:11:09.650 --> 00:11:10.890
When I need to go
235
00:11:10.890 --> 00:11:15.380
and I need make a change or add a new feature,
236
00:11:15.380 --> 00:11:18.240
it's really helpful to know where my pages are
237
00:11:18.240 --> 00:11:22.840
and then I treat my components essentially like partials.
238
00:11:22.840 --> 00:11:24.870
They're partial pieces of code
239
00:11:24.870 --> 00:11:27.350
that can be called from different parts
240
00:11:27.350 --> 00:11:30.100
of the application to give additional functionality.
241
00:11:30.100 --> 00:11:32.460
So hopefully that's starting to make sense
242
00:11:32.460 --> 00:11:37.460
as far as how and why we organize the code the way we do.
243
00:11:37.980 --> 00:11:40.460
So now that we have our pages set up,
244
00:11:40.460 --> 00:11:41.630
in the next guide,
245
00:11:41.630 --> 00:11:45.500
we're gonna see how we can use React Router
246
00:11:45.500 --> 00:11:48.543
to start navigating between the pages.