- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.590 --> 00:00:02.781
In this guide, we're gonna start to build out
2
00:00:02.781 --> 00:00:05.970
our DashboardLayout component.
3
00:00:05.970 --> 00:00:07.920
Now before we can do that,
4
00:00:07.920 --> 00:00:11.280
let's actually think through what the behavior
5
00:00:11.280 --> 00:00:13.250
of this component is gonna be like,
6
00:00:13.250 --> 00:00:16.390
and then that's also gonna help us and guide us
7
00:00:16.390 --> 00:00:18.980
with how we're going to design it.
8
00:00:18.980 --> 00:00:21.500
So what I essentially want here
9
00:00:21.500 --> 00:00:26.500
is I want a component that wraps up the entire application.
10
00:00:26.500 --> 00:00:30.340
That means that it's going to contain the styles
11
00:00:30.340 --> 00:00:33.320
and the layout that everything
12
00:00:33.320 --> 00:00:35.120
that's really gonna encapsulate
13
00:00:35.120 --> 00:00:36.770
everything that's inside of it,
14
00:00:36.770 --> 00:00:39.290
whether it's the home page, the blog,
15
00:00:39.290 --> 00:00:44.010
or the portfolio Form page, or anything like that.
16
00:00:44.010 --> 00:00:46.570
It's also gonna contain the NavBar.
17
00:00:46.570 --> 00:00:50.010
So we don't wanna have to be able to,
18
00:00:50.010 --> 00:00:54.260
inside of our Home page component here, call the NavBar,
19
00:00:54.260 --> 00:00:57.330
and then in the About page, call the NavBar again.
20
00:00:57.330 --> 00:00:58.910
We don't really wanna do that,
21
00:00:58.910 --> 00:01:02.700
because that's gonna start to make the entire application
22
00:01:02.700 --> 00:01:05.930
a little bit unwieldy and hard to maintain.
23
00:01:05.930 --> 00:01:08.000
So instead, we're gonna create
24
00:01:08.000 --> 00:01:11.110
our own custom layout component
25
00:01:11.110 --> 00:01:13.770
that the rest of the pages in the application
26
00:01:13.770 --> 00:01:15.970
are gonna be able to slide into.
27
00:01:15.970 --> 00:01:17.570
Now in order to do this,
28
00:01:17.570 --> 00:01:20.550
we're gonna have to take a deep dive into the way
29
00:01:20.550 --> 00:01:22.620
that properties work.
30
00:01:22.620 --> 00:01:26.200
And so in React, properties are called props.
31
00:01:26.200 --> 00:01:30.010
And so let's actually build out a demo prop here.
32
00:01:30.010 --> 00:01:32.700
I'm gonna go to the About page,
33
00:01:32.700 --> 00:01:34.770
and gonna zoom in,
34
00:01:34.770 --> 00:01:36.890
and this is gonna help us understand
35
00:01:36.890 --> 00:01:38.660
the way that props work.
36
00:01:38.660 --> 00:01:41.550
I'm gonna create another component here.
37
00:01:41.550 --> 00:01:43.960
I'm just gonna call this DemoComponent,
38
00:01:43.960 --> 00:01:45.440
because we're not gonna use it,
39
00:01:45.440 --> 00:01:48.950
we're simply going to be testing out
40
00:01:48.950 --> 00:01:52.110
some different variations with props here.
41
00:01:52.110 --> 00:01:53.160
And what this is gonna do,
42
00:01:53.160 --> 00:01:56.700
is it's gonna give us the baseline knowledge we need
43
00:01:56.700 --> 00:02:00.030
to build out this DashboardLayout component.
44
00:02:00.030 --> 00:02:02.000
So up until this point,
45
00:02:02.000 --> 00:02:04.840
we have built all of our components like this,
46
00:02:04.840 --> 00:02:09.110
where we have a function that takes in no arguments here,
47
00:02:09.110 --> 00:02:10.940
and then it's a fat arrow function
48
00:02:10.940 --> 00:02:13.280
that returns some JSX code.
49
00:02:13.280 --> 00:02:15.360
Well, what this is gonna do,
50
00:02:15.360 --> 00:02:19.160
is we are going to actually accept some properties.
51
00:02:19.160 --> 00:02:22.970
So I'm gonna say, const DemoComponent =,
52
00:02:22.970 --> 00:02:26.790
and then inside of the parenth, instead of leaving it empty,
53
00:02:26.790 --> 00:02:28.430
I'm gonna say props here.
54
00:02:28.430 --> 00:02:32.370
And then from there, it's gonna be a fat arrow function.
55
00:02:32.370 --> 00:02:35.910
And for right now, let's just return a div,
56
00:02:35.910 --> 00:02:39.050
and that's gonna be everything that we're gonna return.
57
00:02:39.050 --> 00:02:42.630
Inside of the div, let's call the properties.
58
00:02:42.630 --> 00:02:45.350
Now, how exactly does this work?
59
00:02:45.350 --> 00:02:46.990
So how do we know
60
00:02:46.990 --> 00:02:50.230
hat time of naming to give our properties?
61
00:02:50.230 --> 00:02:53.660
Well we have actually already been working with props,
62
00:02:53.660 --> 00:02:56.330
even though we didn't really talk about it a ton.
63
00:02:56.330 --> 00:02:58.570
So if you go to the NavBar component,
64
00:02:58.570 --> 00:03:01.990
and you see right here we have this Link component,
65
00:03:01.990 --> 00:03:04.540
and we use the keyword, to,
66
00:03:04.540 --> 00:03:07.400
and we set this equal to the path.
67
00:03:07.400 --> 00:03:10.460
Well this is an inline prop.
68
00:03:10.460 --> 00:03:15.320
This is a property that the creators of React Router
69
00:03:15.320 --> 00:03:19.180
said when people call this Link component,
70
00:03:19.180 --> 00:03:24.180
let's give them the ability to add this, to, keyword here.
71
00:03:24.820 --> 00:03:29.820
So we can actually call our properties anything that we want
72
00:03:30.340 --> 00:03:33.560
as long as the component knows about it.
73
00:03:33.560 --> 00:03:35.400
So let's see how that works here.
74
00:03:35.400 --> 00:03:37.990
I'm gonna just write out the code,
75
00:03:37.990 --> 00:03:41.080
exactly like how I would want it to look ideally,
76
00:03:41.080 --> 00:03:44.300
and then we're gonna actually call this component
77
00:03:44.300 --> 00:03:45.800
so that it works.
78
00:03:45.800 --> 00:03:49.740
So inside of DemoComponent, in curly brackets,
79
00:03:49.740 --> 00:03:53.690
I'm gonna say props.title, just like this.
80
00:03:53.690 --> 00:03:55.740
So where does the word, title, come in?
81
00:03:55.740 --> 00:03:59.680
Well that is just the name we are saying
82
00:03:59.680 --> 00:04:01.714
that a property is going to be.
83
00:04:01.714 --> 00:04:05.470
So just like we had the keyword, to, here
84
00:04:05.470 --> 00:04:08.640
for our Link component, now this DemoComponent
85
00:04:08.640 --> 00:04:12.220
is gonna have the ability to have a title passed to it.
86
00:04:12.220 --> 00:04:17.180
So if I come in and right above where it says, About,
87
00:04:17.180 --> 00:04:21.910
I'm gonna call this DemoComponent, just like this,
88
00:04:21.910 --> 00:04:24.790
and instead of just closing it out,
89
00:04:24.790 --> 00:04:28.210
inside of here I can now pass in a title.
90
00:04:28.210 --> 00:04:32.250
So I can say, title, and say, Hey there, just like this.
91
00:04:32.250 --> 00:04:35.590
Hit Save, and now you can see, in the browser,
92
00:04:35.590 --> 00:04:36.620
it says, Hey there.
93
00:04:36.620 --> 00:04:41.440
So the way that that works is we have defined
94
00:04:41.440 --> 00:04:44.830
a set of props here for the DemoComponent
95
00:04:44.830 --> 00:04:46.140
and then inside of it,
96
00:04:46.140 --> 00:04:50.600
we said, check and see if there is a title prop,
97
00:04:50.600 --> 00:04:53.730
and if so, render that out to the screen.
98
00:04:53.730 --> 00:04:58.680
So let's say that I remove title here and hit Save,
99
00:04:58.680 --> 00:05:00.410
then nothing's gonna come up.
100
00:05:00.410 --> 00:05:03.290
Now don't we get an error here because it's not required,
101
00:05:03.290 --> 00:05:05.980
this is simply gonna return, undefined,
102
00:05:05.980 --> 00:05:08.010
so nothing is showing up.
103
00:05:08.010 --> 00:05:11.850
Now we also have the ability to pass in multiple properties.
104
00:05:11.850 --> 00:05:13.700
So say I wanna have a title,
105
00:05:13.700 --> 00:05:16.990
and then I also wanna have a content prop.
106
00:05:16.990 --> 00:05:21.800
And I'll say, Here is some content, just like this.
107
00:05:21.800 --> 00:05:24.680
Well now we can come into this component here,
108
00:05:24.680 --> 00:05:26.940
and we can call that property.
109
00:05:26.940 --> 00:05:31.150
So I'll say, dash and then props.content.
110
00:05:33.000 --> 00:05:36.350
Hit save, and now you can see that it says,
111
00:05:36.350 --> 00:05:38.920
Hey there, here is some content.
112
00:05:38.920 --> 00:05:42.630
So inline, we have passed two properties.
113
00:05:42.630 --> 00:05:43.463
And as you can see,
114
00:05:43.463 --> 00:05:46.290
there's nothing special about these names,
115
00:05:46.290 --> 00:05:49.820
they simply have to be mapped from the component
116
00:05:49.820 --> 00:05:52.070
to how the component is called.
117
00:05:52.070 --> 00:05:54.350
So what this means, that in our NavBar,
118
00:05:54.350 --> 00:05:58.530
in our Link component, that because we have the ability
119
00:05:58.530 --> 00:06:00.210
to call to here,
120
00:06:00.210 --> 00:06:03.190
that means that if you go through the source code
121
00:06:03.190 --> 00:06:05.710
for the Link component in React Router,
122
00:06:05.710 --> 00:06:08.480
you're gonna see that somewhere in there
123
00:06:08.480 --> 00:06:12.830
they are listening for this to prop value,
124
00:06:12.830 --> 00:06:15.470
and that's how they know which route
125
00:06:15.470 --> 00:06:16.960
we wanna send the user to
126
00:06:16.960 --> 00:06:18.730
when they click one of these links.
127
00:06:18.730 --> 00:06:21.570
So that is a inline component.
128
00:06:21.570 --> 00:06:25.920
Also of note, these don't have to be in a specific order.
129
00:06:25.920 --> 00:06:29.440
So if I were to cut out content here,
130
00:06:29.440 --> 00:06:33.750
and place it in front of title, and hit Save,
131
00:06:33.750 --> 00:06:34.850
everything's the same.
132
00:06:34.850 --> 00:06:38.090
It doesn't change the order or anything like that.
133
00:06:38.090 --> 00:06:42.170
So that is how, one way that you can pass props in,
134
00:06:42.170 --> 00:06:44.090
and so hopefully that's starting to make
135
00:06:44.090 --> 00:06:45.560
a little bit more sense.
136
00:06:45.560 --> 00:06:49.210
Now in React, we also have a second way
137
00:06:49.210 --> 00:06:51.150
that we can pass properties in,
138
00:06:51.150 --> 00:06:55.130
and the second way is very flexible.
139
00:06:55.130 --> 00:06:56.850
So right here you can see,
140
00:06:56.850 --> 00:07:00.900
we needed to know the keywords of title and content,
141
00:07:00.900 --> 00:07:03.100
and we needed to pass those in directly
142
00:07:03.100 --> 00:07:05.170
to get those to be rendered.
143
00:07:05.170 --> 00:07:06.650
Well, as you can imagine,
144
00:07:06.650 --> 00:07:09.030
because the reason we're talking about this
145
00:07:09.030 --> 00:07:10.750
is because we are wanting to build out
146
00:07:10.750 --> 00:07:13.630
a DashboardLayout component.
147
00:07:13.630 --> 00:07:18.280
Well we don't want to have to look for these keywords,
148
00:07:18.280 --> 00:07:19.550
these types of keywords.
149
00:07:19.550 --> 00:07:21.700
We don't wanna have to hard code that in.
150
00:07:21.700 --> 00:07:25.040
Instead, what we wanna do is we wanna create a component
151
00:07:25.040 --> 00:07:28.830
that works almost like a div, or a heading tab,
152
00:07:28.830 --> 00:07:31.560
or something like that where it's really flexible,
153
00:07:31.560 --> 00:07:33.920
where it contains the NavBar,
154
00:07:33.920 --> 00:07:38.080
and it contains styles, but it is not particular
155
00:07:38.080 --> 00:07:40.280
about what gets placed inside of it.
156
00:07:40.280 --> 00:07:43.340
So we don't wanna have to use these keywords.
157
00:07:43.340 --> 00:07:45.530
These work for certain circumstances,
158
00:07:45.530 --> 00:07:47.780
but not for a layout.
159
00:07:47.780 --> 00:07:49.460
So how can we do that?
160
00:07:49.460 --> 00:07:53.920
Well that is where the props.children,
161
00:07:53.920 --> 00:07:56.980
they're called child props, come into play.
162
00:07:56.980 --> 00:07:58.830
So the way that this works,
163
00:07:58.830 --> 00:08:03.023
is let's get rid of everything that we have right here.
164
00:08:04.130 --> 00:08:06.070
And instead I'm just gonna have,
165
00:08:06.070 --> 00:08:10.550
in curly brackets, props.children.
166
00:08:10.550 --> 00:08:13.030
And now for this DemoComponent,
167
00:08:13.030 --> 00:08:16.790
we're gonna get rid of, where it says, content and title,
168
00:08:16.790 --> 00:08:20.600
and we're also gonna get rid of this closing slash.
169
00:08:20.600 --> 00:08:22.570
So I'm gonna get rid of all that,
170
00:08:22.570 --> 00:08:25.109
and I'm gonna treat this DemoComponent
171
00:08:25.109 --> 00:08:28.260
almost like a div, or a heading tag,
172
00:08:28.260 --> 00:08:30.900
where it has a opening bracket,
173
00:08:30.900 --> 00:08:32.940
and then it has a closing bracket,
174
00:08:32.940 --> 00:08:34.770
or a closing tag here.
175
00:08:34.770 --> 00:08:36.700
Now watch and see what I can do.
176
00:08:36.700 --> 00:08:41.350
Now, I can add in a h2 tag
177
00:08:41.350 --> 00:08:44.970
and say, I'm a child heading.
178
00:08:44.970 --> 00:08:48.170
And then I can put a paragraph tag
179
00:08:48.170 --> 00:08:50.620
and say, I'm a paragraph.
180
00:08:50.620 --> 00:08:52.820
And you can put anything you want in here.
181
00:08:52.820 --> 00:08:55.000
So you could put a bunch of these,
182
00:08:55.000 --> 00:08:56.300
it doesn't really matter.
183
00:08:56.300 --> 00:08:58.270
And the way that this works,
184
00:08:58.270 --> 00:09:03.270
is we have the flexibility now to wrap up any type
185
00:09:03.750 --> 00:09:07.470
of set of components, or JSX elements,
186
00:09:07.470 --> 00:09:09.890
or anything like that, and they're simply gonna be
187
00:09:09.890 --> 00:09:13.340
slid in and then rendered.
188
00:09:13.340 --> 00:09:16.120
So if I hit Save now, and you come back,
189
00:09:16.120 --> 00:09:19.260
you can see that all of that is being rendered.
190
00:09:19.260 --> 00:09:22.180
We didn't have to define a title, a content,
191
00:09:22.180 --> 00:09:24.610
we didn't have to have any special keywords.
192
00:09:24.610 --> 00:09:26.510
We simply opened up the component,
193
00:09:26.510 --> 00:09:28.480
and we said, anything inside of here,
194
00:09:28.480 --> 00:09:32.365
we wanna render inside of this DemoComponent.
195
00:09:32.365 --> 00:09:34.870
So hopefully you're starting to kinda see
196
00:09:34.870 --> 00:09:38.100
where this is gonna be a perfect fit
197
00:09:38.100 --> 00:09:41.940
for the way our DashboardLayout component is gonna be.
198
00:09:41.940 --> 00:09:44.860
Because what we can do, is we could do something.
199
00:09:44.860 --> 00:09:47.060
Let's say instead of this h2 tag,
200
00:09:47.060 --> 00:09:50.463
we say that this is gonna be our NavBar.
201
00:09:51.470 --> 00:09:53.680
Now, what's gonna happen,
202
00:09:53.680 --> 00:09:58.080
is everywhere that we've wrapped up this DemoComponent,
203
00:09:58.080 --> 00:10:00.480
so every page that uses it,
204
00:10:00.480 --> 00:10:04.840
is gonna have the NavBar, and so we can create
205
00:10:04.840 --> 00:10:07.180
this type of shared behavior,
206
00:10:07.180 --> 00:10:10.290
where we're not gonna have to force every page
207
00:10:10.290 --> 00:10:12.900
to use and to call the NavBar,
208
00:10:12.900 --> 00:10:15.377
or any, a footer, or anything lik that.
209
00:10:15.377 --> 00:10:19.180
And instead, we can simply have one component
210
00:10:19.180 --> 00:10:21.040
manage that for us.
211
00:10:21.040 --> 00:10:23.010
So let's actually build that out.
212
00:10:23.010 --> 00:10:28.010
I'm gonna remove every reference to DemoComponent here,
213
00:10:28.900 --> 00:10:31.610
'cause that was simply our example.
214
00:10:31.610 --> 00:10:35.530
And now, let's actually create a layout directory.
215
00:10:35.530 --> 00:10:38.490
So I'm gonna go to src, components,
216
00:10:38.490 --> 00:10:39.880
I'm gonna right-click on that,
217
00:10:39.880 --> 00:10:44.613
and I'm gonna type out, layouts/DashboardLayout.js.
218
00:10:47.930 --> 00:10:52.930
Now inside of here, let's first import React from "react",
219
00:10:54.070 --> 00:10:57.970
and then I'm gonna say, export default,
220
00:10:57.970 --> 00:11:00.200
and then inside of the brackets here,
221
00:11:00.200 --> 00:11:01.330
we're gonna call props,
222
00:11:01.330 --> 00:11:03.960
because we need to call props.children
223
00:11:03.960 --> 00:11:05.760
in order to make this work.
224
00:11:05.760 --> 00:11:08.810
So I'll say, props, fat arrow function,
225
00:11:08.810 --> 00:11:11.410
and we wanna return a div here,
226
00:11:11.410 --> 00:11:15.700
and then inside of the div we just call props.children,
227
00:11:15.700 --> 00:11:17.160
just like this.
228
00:11:17.160 --> 00:11:21.170
Now, let's also import our NavBar.
229
00:11:21.170 --> 00:11:24.000
So right above where it says, props.children,
230
00:11:24.000 --> 00:11:28.400
I'm just gonna give it a line and import our NavBar,
231
00:11:28.400 --> 00:11:30.163
oop, that is, yep there we go.
232
00:11:31.060 --> 00:11:34.080
Okay, so now hit Save, and if you have Prettier,
233
00:11:34.080 --> 00:11:38.180
and the only way that exactly how I typed it out will work
234
00:11:38.180 --> 00:11:39.700
is if you have Prettier installed,
235
00:11:39.700 --> 00:11:42.520
if not you'll have to manually type in
236
00:11:42.520 --> 00:11:45.440
the parentheses just like this.
237
00:11:45.440 --> 00:11:48.050
So you can type out the code exactly like this,
238
00:11:48.050 --> 00:11:50.670
and so we're returning a single div
239
00:11:50.670 --> 00:11:52.310
that has the NavBar inside of it,
240
00:11:52.310 --> 00:11:54.080
and then props.children.
241
00:11:54.080 --> 00:11:57.980
So what that means is the NavBar is gonna be at the top
242
00:11:57.980 --> 00:12:00.671
of this layout, and then props.children,
243
00:12:00.671 --> 00:12:03.720
meaning anything we slide inside of it,
244
00:12:03.720 --> 00:12:05.770
is gonna be rendered underneath.
245
00:12:05.770 --> 00:12:08.070
So let's see if this works.
246
00:12:08.070 --> 00:12:10.980
Let's first start it out on the About Us page.
247
00:12:10.980 --> 00:12:14.940
So I'm gonna get rid of the initial div,
248
00:12:14.940 --> 00:12:17.300
and the closing div, right here.
249
00:12:17.300 --> 00:12:19.530
So I can get rid of this,
250
00:12:19.530 --> 00:12:22.303
and now let's bring in that DashboardLayout,
251
00:12:23.930 --> 00:12:26.530
and then I'm gonna remove it,
252
00:12:26.530 --> 00:12:29.210
and make sure you have your closing tag here.
253
00:12:29.210 --> 00:12:32.220
So you should have the start of the DashboardLayout
254
00:12:32.220 --> 00:12:35.640
on line six, and then the end of it there on line nine.
255
00:12:35.640 --> 00:12:40.120
And as you can see, now we have our full NavBar.
256
00:12:40.120 --> 00:12:41.590
So this is actually working.
257
00:12:41.590 --> 00:12:44.490
Let me zoom out, just back to 100%,
258
00:12:44.490 --> 00:12:46.660
so we can see it all on the screen.
259
00:12:46.660 --> 00:12:48.010
So this is looking good.
260
00:12:48.010 --> 00:12:50.020
It means everything's already working.
261
00:12:50.020 --> 00:12:52.730
Now let's go to all of our other pages.
262
00:12:52.730 --> 00:12:54.650
So I'm gonna go the Home page here,
263
00:12:54.650 --> 00:12:57.393
and let's remove NavBar,
264
00:12:58.290 --> 00:13:03.290
and let's also remove the beginning div, and the ending div,
265
00:13:03.510 --> 00:13:05.893
and let's call DashboardLayout here,
266
00:13:06.870 --> 00:13:09.470
and wrap the entire component up.
267
00:13:09.470 --> 00:13:11.570
Then let's open up our blog page,
268
00:13:11.570 --> 00:13:13.300
and we're gonna do the same thing.
269
00:13:13.300 --> 00:13:14.843
We can get rid of NavBar.
270
00:13:15.800 --> 00:13:17.713
We can get rid of this div.
271
00:13:19.360 --> 00:13:21.073
Nope, there we go.
272
00:13:22.670 --> 00:13:26.490
It's a little bit frozen for me at the moment.
273
00:13:26.490 --> 00:13:29.660
There we go, okay, there we go.
274
00:13:29.660 --> 00:13:31.220
Get rid of that first div.
275
00:13:31.220 --> 00:13:33.270
And now let's import our DashboardLayout.
276
00:13:35.000 --> 00:13:39.790
Wrap the entire, just that blog text up inside of it.
277
00:13:39.790 --> 00:13:41.020
And there we go.
278
00:13:41.020 --> 00:13:43.230
So those are our pages.
279
00:13:43.230 --> 00:13:45.120
Yes those are all three of our pages.
280
00:13:45.120 --> 00:13:47.390
Now let's actually see it in action.
281
00:13:47.390 --> 00:13:48.560
So we're on the About page.
282
00:13:48.560 --> 00:13:50.220
We can see we have our NavBar.
283
00:13:50.220 --> 00:13:51.800
Now if I click on Blog,
284
00:13:51.800 --> 00:13:53.980
you'll see we still have our NavBar,
285
00:13:53.980 --> 00:13:56.660
even though we're not calling the NavBar anymore,
286
00:13:56.660 --> 00:13:57.610
it's still there,
287
00:13:57.610 --> 00:14:00.440
because it's in that DashboardLayout component.
288
00:14:00.440 --> 00:14:04.550
It's a way that we can create a shared layout
289
00:14:04.550 --> 00:14:07.620
without having to duplicate a lot of code here.
290
00:14:07.620 --> 00:14:09.240
So if I click on the Home page.
291
00:14:09.240 --> 00:14:11.580
You'll see the Home page there is working.
292
00:14:11.580 --> 00:14:14.037
Now you may wonder, some of the styles seem to be gone.
293
00:14:14.037 --> 00:14:18.430
If you remember, on our Home page, we had a div
294
00:14:18.430 --> 00:14:23.200
that had, the entire wrapper div had a class of app.
295
00:14:23.200 --> 00:14:25.803
Well, what we can do is go to our DashboardLayout,
296
00:14:26.660 --> 00:14:31.170
and inside of the this we can give a className of app,
297
00:14:33.270 --> 00:14:37.520
hit Save, and now each one of these pages
298
00:14:37.520 --> 00:14:41.780
is now going to have those same styles.
299
00:14:41.780 --> 00:14:44.110
So this is working perfectly with,
300
00:14:44.110 --> 00:14:47.480
you notice how much code we were able to remove
301
00:14:47.480 --> 00:14:49.550
from each one of these components.
302
00:14:49.550 --> 00:14:52.070
We were able to remove those imports,
303
00:14:52.070 --> 00:14:56.040
and now we've created a single DashboardLayout
304
00:14:56.040 --> 00:14:58.230
that has all of that shared behavior.
305
00:14:58.230 --> 00:15:00.030
So this is gonna be a pattern
306
00:15:00.030 --> 00:15:02.000
you're gonna see a lot throughout this course,
307
00:15:02.000 --> 00:15:05.180
and really throughout your entire development journey,
308
00:15:05.180 --> 00:15:08.840
is that you're gonna start to create.
309
00:15:08.840 --> 00:15:11.580
Instead of having to, when you wanna build a new feature,
310
00:15:11.580 --> 00:15:14.540
instead of just copy and pasting a lot of code,
311
00:15:14.540 --> 00:15:17.080
you're gonna build modules and components,
312
00:15:17.080 --> 00:15:20.640
and then be able to reuse them throughout the application
313
00:15:20.640 --> 00:15:24.300
so that it can give you more clean, efficient,
314
00:15:24.300 --> 00:15:27.120
and easier to maintain code.
315
00:15:27.120 --> 00:15:28.670
So great job going through that,
316
00:15:28.670 --> 00:15:32.220
I know that was a lot to throw at you all at one time.
317
00:15:32.220 --> 00:15:34.880
So don't worry if it's still a little fuzzy.
318
00:15:34.880 --> 00:15:38.480
Just as a recap, the main things we discussed in this guide
319
00:15:38.480 --> 00:15:41.120
is we talked about properties in React.
320
00:15:41.120 --> 00:15:45.370
And properties are one of the core principles of React.
321
00:15:45.370 --> 00:15:48.950
They give you the ability to pass data from one component
322
00:15:48.950 --> 00:15:50.610
to another component.
323
00:15:50.610 --> 00:15:54.030
And we talked about the two ways of passing props in,
324
00:15:54.030 --> 00:15:57.410
like we have with our Link component,
325
00:15:57.410 --> 00:16:00.750
where you can pass inline properties to a component.
326
00:16:00.750 --> 00:16:05.430
And then we saw how we could pass child components in,
327
00:16:05.430 --> 00:16:08.670
where we could wrap up the entire page,
328
00:16:08.670 --> 00:16:12.080
and then slide in anything we want inside,
329
00:16:12.080 --> 00:16:16.140
and still have a single layout set of styles
330
00:16:16.140 --> 00:16:18.600
called the other components, like our NavBar.
331
00:16:18.600 --> 00:16:21.620
So those are the two ways that you can use properties.
332
00:16:21.620 --> 00:16:25.770
And as a case study, we built out the DashboardLayout.
333
00:16:25.770 --> 00:16:29.340
So with all of that in place, in the next set of guides
334
00:16:29.340 --> 00:16:31.170
we're gonna start building out
335
00:16:31.170 --> 00:16:34.003
the rest of our page functionality.