1
00:00:00,120 --> 00:00:06,900
I think we're clear on styled components, at least the general sense at the end of the day, we really

2
00:00:06,900 --> 00:00:10,560
just need to add the wrapper to our component.

3
00:00:10,570 --> 00:00:14,030
That's all we have to do since I already included all the styling.

4
00:00:14,460 --> 00:00:18,330
So now we can finally start working on our app.

5
00:00:18,810 --> 00:00:25,380
And I think I'm going to start by setting up the router so we'll have home page about page products

6
00:00:25,380 --> 00:00:31,910
page, single product page, that is, if we click on a product as we navigate over here.

7
00:00:32,310 --> 00:00:39,750
Also, we're going to have a cart at the checkout and of course, the area now as we're setting up of

8
00:00:39,750 --> 00:00:46,320
the reactor, I'll also show you some nifty setup when it comes to index Jayesh.

9
00:00:46,400 --> 00:00:48,970
But for now, we'll just navigate.

10
00:00:50,010 --> 00:00:52,760
Yes, I think I can remove the testing succah.

11
00:00:53,280 --> 00:00:54,780
I don't think we need it here.

12
00:00:54,900 --> 00:00:55,940
Let's save it.

13
00:00:56,280 --> 00:00:58,470
And also, I can delete that file as well.

14
00:00:59,040 --> 00:01:00,090
So it's been deleted.

15
00:01:00,690 --> 00:01:01,500
And I'm sorry.

16
00:01:01,500 --> 00:01:02,480
That's not obvious.

17
00:01:02,490 --> 00:01:04,380
That's how you move the trash.

18
00:01:04,920 --> 00:01:11,520
And once I'm here, remember when we were setting up the router or we needed we need a browser router

19
00:01:11,970 --> 00:01:14,760
and of course, we gave it an alias as a router.

20
00:01:15,210 --> 00:01:18,580
Then also we needed a switch and arrow.

21
00:01:19,160 --> 00:01:24,930
I remember I mentioned that all my roots are right now in the pages directory.

22
00:01:25,380 --> 00:01:29,760
And of course, every component just reflect the page.

23
00:01:30,240 --> 00:01:33,240
And in order to render them, of course, I would need to import.

24
00:01:33,630 --> 00:01:38,100
So previously we have done something like this where we go with import and then of course I'm going

25
00:01:38,100 --> 00:01:39,570
to come up with nine, for example.

26
00:01:39,570 --> 00:01:46,790
This is going to be about Page and I'm going to be getting it from and I'm looking for the pages and

27
00:01:46,950 --> 00:01:47,850
the about page.

28
00:01:48,420 --> 00:01:53,670
And in order to get all the pages, I would do something like this where I copy and paste and then change

29
00:01:53,670 --> 00:01:54,370
the values.

30
00:01:54,390 --> 00:02:00,600
However, there is a better setup if you don't like this one, because the problem with this one, if

31
00:02:00,600 --> 00:02:08,460
you just have multiple files like that one where you're importing well, your file just gets giant.

32
00:02:08,460 --> 00:02:08,880
Correct.

33
00:02:09,130 --> 00:02:13,290
If I have 15 imports like this, then 15 imports from the other file.

34
00:02:13,560 --> 00:02:17,640
As you can see, the file gets quite big, somewhat fast.

35
00:02:17,940 --> 00:02:23,940
And a better setup is using the index, because if you notice here with the components, I have import

36
00:02:24,150 --> 00:02:29,850
and then I specifically say what I'm importing from the components folder and notice here how I don't

37
00:02:29,850 --> 00:02:30,710
have this extra.

38
00:02:31,770 --> 00:02:35,640
So this doesn't get me from the specific file.

39
00:02:35,860 --> 00:02:38,800
It just gets me from the components folder.

40
00:02:38,940 --> 00:02:41,610
So, again, it's not going to affect the functionality.

41
00:02:41,880 --> 00:02:46,240
It's just going to affect how the file where we're importing is going to look like.

42
00:02:46,950 --> 00:02:51,450
So when I have a big project, I rather prefer this setup where I'm using the index.

43
00:02:51,450 --> 00:02:53,220
So how it would work?

44
00:02:53,230 --> 00:02:55,560
Well, first of all, I'm going to remove all these inputs.

45
00:02:55,560 --> 00:02:56,630
I'm not going to need them.

46
00:02:57,030 --> 00:03:02,210
And here in the pages folder, the directory setup index.

47
00:03:02,220 --> 00:03:03,030
Yes, of course.

48
00:03:03,030 --> 00:03:04,740
I already set up that file for you.

49
00:03:04,740 --> 00:03:11,520
But in general, if you have your own project and if you want to set up this type of import, you need

50
00:03:11,520 --> 00:03:16,850
to have in the sense it's going to be the entry point in the directory.

51
00:03:17,040 --> 00:03:22,440
The moment you create a file with the name of the year, that's going to be the main entry point.

52
00:03:22,710 --> 00:03:28,770
And in this index, just what I would want is actually set up the imports.

53
00:03:29,220 --> 00:03:36,270
So in next year, now I'm going to import files from this directory and that's very important.

54
00:03:36,600 --> 00:03:39,950
You technically can import from different directories, but that's not what we want.

55
00:03:40,350 --> 00:03:46,950
I want only import files from this directory and then export it the way it's going to look like.

56
00:03:46,950 --> 00:03:52,710
I'm going to go here, import and then home and I'm going to right away give them different names.

57
00:03:52,950 --> 00:03:58,440
So notice, of course, the file name is Home Page, but I'm going to name them home and I'm going to

58
00:03:58,440 --> 00:04:06,370
say that I would like to import file from the home page and I will write away in the Energous export

59
00:04:06,480 --> 00:04:06,900
as well.

60
00:04:07,200 --> 00:04:11,610
So say export, and I'll say that I would want to export home.

61
00:04:12,000 --> 00:04:18,480
And essentially what that means that in the app just now, I can do the same thing like I have with

62
00:04:18,480 --> 00:04:23,610
components where I write a way, say, hey, I would want to grab the Navar sideband for.

63
00:04:23,850 --> 00:04:28,860
And please keep in mind these are named exports right now in here.

64
00:04:28,860 --> 00:04:34,500
I'm exporting as default, meaning I'm importing as default from the home because of course, in the

65
00:04:34,500 --> 00:04:40,500
home page I'm exporting as default like so so in the images I'm importing as default.

66
00:04:40,920 --> 00:04:45,650
But when I'm exporting, I'm actually exporting as the name export.

67
00:04:45,660 --> 00:04:49,380
Now you can add Alia's if you want, you could add as and whatever.

68
00:04:49,560 --> 00:04:53,550
But in my case, I'm just going to leave the same name as I have right now for the home.

69
00:04:53,820 --> 00:04:59,490
So in the objets, what I would need to do is go with import and then set up curlee.

70
00:04:59,930 --> 00:05:06,440
Since my imports are named and I'm going to go with import home, since that is the name from and then

71
00:05:06,440 --> 00:05:11,780
I just need to point to the directory, that's all I have to do the same like I have with components

72
00:05:12,190 --> 00:05:12,990
certain here.

73
00:05:13,040 --> 00:05:20,840
Now I'm just going with the pages where it is now I import and in order to start out, I'm just going

74
00:05:20,840 --> 00:05:25,130
to go at home and once I render my component, I should see home page.

75
00:05:25,430 --> 00:05:26,530
So everything works.

76
00:05:26,560 --> 00:05:34,370
So now in the index, just I just need to import all these pages and then export and then wherever I

77
00:05:34,370 --> 00:05:35,840
would want to use those components.

78
00:05:36,080 --> 00:05:40,880
I simply go with pages since I have the energy that is my entry.

79
00:05:41,150 --> 00:05:44,210
And then I specifically say, well, which components out one?

80
00:05:44,630 --> 00:05:51,440
And if you take a look at the components and of course we have way more files now, I didn't export

81
00:05:51,440 --> 00:05:53,750
all of them since it wasn't necessary.

82
00:05:53,990 --> 00:05:58,010
There are some files that I'm using only here locally within the components.

83
00:05:58,370 --> 00:06:02,580
But you'll also notice that this export is pretty giant, correct.

84
00:06:02,810 --> 00:06:09,370
So next year I'm importing all of these of these components and then I write or export them.

85
00:06:09,620 --> 00:06:12,980
So that way, wherever I need it in my app.

86
00:06:13,790 --> 00:06:20,690
I can simply go to components and say, hey, listen, get me no, let me sidebar, get me four or whatever

87
00:06:20,690 --> 00:06:21,620
component you want.

88
00:06:22,010 --> 00:06:24,800
Again, this is a setup thing.

89
00:06:25,280 --> 00:06:27,070
Doesn't mean the functionality will change.

90
00:06:27,080 --> 00:06:34,550
Of course, you can do the multiple lines of imports, but it just makes your file to look a bit cleaner,

91
00:06:34,550 --> 00:06:35,450
in my opinion.

92
00:06:35,540 --> 00:06:37,520
Again, that is your choice.

93
00:06:37,540 --> 00:06:41,330
So in my case, I'm going to go to index year in the pages.

94
00:06:41,600 --> 00:06:47,120
And by the way, since technically this is a node thing and if you find this annoying, where you have

95
00:06:47,120 --> 00:06:52,730
a bunch of inaccuracies, let's imagine a scenario where you have a bunch of directories with that.

96
00:06:53,790 --> 00:06:57,350
You can also set up a different name.

97
00:06:57,530 --> 00:07:02,500
Now, I'm not going to cover that since I think it's a bit out of the scope of discourse.

98
00:07:02,870 --> 00:07:09,020
Just keep in mind that if you find having a bunch of these index just as annoying, there is a way how

99
00:07:09,020 --> 00:07:11,430
you can actually name it differently.

100
00:07:11,600 --> 00:07:18,530
For example, I don't know, you could name it pages and then you just need to set up the packages on,

101
00:07:18,530 --> 00:07:23,580
I believe it was where you just point to that file as the main one.

102
00:07:23,600 --> 00:07:25,400
Again, a little bit out of the scope.

103
00:07:25,610 --> 00:07:26,140
Definitely.

104
00:07:26,150 --> 00:07:30,140
You can Google that one for now, since we have only two directories that do that.

105
00:07:30,380 --> 00:07:32,450
I'm just going to stick with that index.

106
00:07:32,450 --> 00:07:37,460
Just approach since by default index jazz will be the main entry point.

107
00:07:37,730 --> 00:07:42,410
So I'm going to navigate back to the pages and one by one, I'm just going to import those files.

108
00:07:42,800 --> 00:07:45,770
And I believe I have eight of them.

109
00:07:46,280 --> 00:07:50,120
One, two, three, four, five, six, seven, eight.

110
00:07:50,300 --> 00:07:51,920
I think I have it now.

111
00:07:51,920 --> 00:07:54,050
I have seven one more here.

112
00:07:54,260 --> 00:07:56,740
And then, of course, I'll just channel this one around.

113
00:07:57,200 --> 00:08:00,770
So let me select all of these and I'll delete them.

114
00:08:00,980 --> 00:08:06,830
And the same is going to go here for the homepage and then I'll just use two casters or, you know,

115
00:08:06,830 --> 00:08:11,060
and we cannot use the cursor since of course I'll name them differently.

116
00:08:11,060 --> 00:08:15,890
So products on line here will go with products page like.

117
00:08:15,920 --> 00:08:23,030
So then the next one is a single product and we're going to go with a single page.

118
00:08:23,450 --> 00:08:29,030
And again, this is an example of why I don't want to do the imports together.

119
00:08:29,420 --> 00:08:34,050
So of course, yeah, we're doing it right now since I wanted to showcase the jazz.

120
00:08:34,070 --> 00:08:38,510
But in general I just find it somewhat redundant if we have to type it together.

121
00:08:38,870 --> 00:08:45,080
That's why for the rest of the project, you'll have all your imports already in place about and then

122
00:08:45,140 --> 00:08:45,880
about page.

123
00:08:45,890 --> 00:08:48,770
Of course, the next one is Kaat.

124
00:08:49,460 --> 00:08:57,080
And by the way, I have all uppercase a card and one card page, then I would want to get error.

125
00:08:58,000 --> 00:09:03,670
And not council log, so we're going to go with error, that's going to be the name of my component

126
00:09:03,670 --> 00:09:05,440
and that is coming from the error page.

127
00:09:05,970 --> 00:09:08,260
Then we've got a check out.

128
00:09:10,650 --> 00:09:14,420
And as you can see, I'm just removing that page thing, so check out Page.

129
00:09:14,760 --> 00:09:20,300
And lastly, we have a private route which we're going to do all the way at the end.

130
00:09:20,760 --> 00:09:26,190
And this is just going to prevent nonusers going to the checkout page.

131
00:09:26,460 --> 00:09:28,770
So we're going to go here with a private route.

132
00:09:29,040 --> 00:09:30,900
And of course, I just need to export them.

133
00:09:30,900 --> 00:09:32,730
So I'm going with products.

134
00:09:33,090 --> 00:09:39,210
Then I would want to go with a single product than about horse cart error.

135
00:09:39,630 --> 00:09:48,000
And you get to just checkout and finally arrive at route and you're not in this case, I shouldn't name

136
00:09:48,000 --> 00:09:48,890
it exactly the same.

137
00:09:49,740 --> 00:09:52,020
So private private route.

138
00:09:52,230 --> 00:09:58,500
And once we've got this export in place now, of course, we can just navigate to abcess and just grab

139
00:09:58,500 --> 00:09:59,070
all of them.

140
00:09:59,220 --> 00:10:06,900
So let me go here and I'm going to say that I don't want to get home single product, product and all

141
00:10:06,900 --> 00:10:11,430
that so I can go with a single product here and cart.

142
00:10:12,490 --> 00:10:16,090
And and check out also the error.

143
00:10:17,140 --> 00:10:27,910
About about and products and of course, the private around and now it's finally set up our Outer Circle

144
00:10:27,910 --> 00:10:32,750
here, I'm returning it there at the moment, which, of course is something that I'm going to change.

145
00:10:33,130 --> 00:10:40,300
So we're going to go with a router and eventually I'll add all my footers and have bars and sidebars.

146
00:10:40,990 --> 00:10:42,470
But let's just wait a second.

147
00:10:42,820 --> 00:10:49,260
First, let's set up the router where we're going to have a switch and have this type of switch.

148
00:10:49,270 --> 00:10:54,790
So we're going to go with switch component, of course, and learn instead of the switch component out.

149
00:10:54,820 --> 00:10:55,830
And I set up my roots.

150
00:10:55,840 --> 00:10:58,690
I'm going to start with my home one so out.

151
00:10:58,690 --> 00:11:02,170
And then I remember we had the exact problem.

152
00:11:02,440 --> 00:11:07,330
We just made sure that we only navigate here if the path matches.

153
00:11:07,330 --> 00:11:07,920
Exactly.

154
00:11:08,200 --> 00:11:13,660
And of course, now I would want to set up my home road, hopefully remember how we were setting up

155
00:11:13,660 --> 00:11:17,200
of the router since I'm not going to spend too much time on that.

156
00:11:17,210 --> 00:11:18,100
So we have a route.

157
00:11:18,120 --> 00:11:22,690
And now, of course, I would want to set up the rest of my route as well.

158
00:11:22,990 --> 00:11:27,520
Now, the only one that's going to be I don't know, I don't want to say tricky again, since we have

159
00:11:27,520 --> 00:11:28,810
covered that quite a few times.

160
00:11:28,810 --> 00:11:33,220
But remember, a single product will have to use some kind of boram.

161
00:11:33,460 --> 00:11:37,180
But let's just start with the simple setup where I'm going to copy and paste.

162
00:11:37,180 --> 00:11:39,130
And you're not in this project.

163
00:11:39,130 --> 00:11:41,800
I will exact for all the pages.

164
00:11:42,340 --> 00:11:45,670
So not just for the forward slash, meaning the home page.

165
00:11:45,940 --> 00:11:48,420
I'll add that exact for all of them just in case.

166
00:11:48,730 --> 00:11:50,410
And here, of course, we are looking for.

167
00:11:50,410 --> 00:11:52,030
About, about.

168
00:11:52,840 --> 00:11:59,290
And then I would want to copy and paste this one as well, and we're looking for the card, so it's

169
00:11:59,290 --> 00:12:01,090
just this one around card.

170
00:12:01,420 --> 00:12:08,160
And this is going to be a card component because then I would want to copy this sucker as well.

171
00:12:08,560 --> 00:12:10,930
And we're going to have the product set up.

172
00:12:11,290 --> 00:12:12,370
So product.

173
00:12:13,880 --> 00:12:22,610
And this is going to be a product component, so and then we have one for single product, one for checkout

174
00:12:22,790 --> 00:12:24,700
and one for error.

175
00:12:25,220 --> 00:12:27,830
So I'm here right after the product.

176
00:12:28,580 --> 00:12:30,980
I'm going to go with that single product.

177
00:12:30,980 --> 00:12:34,760
And this one is going to be a bit different where we're going to go with Path.

178
00:12:34,790 --> 00:12:38,180
And, you know, OK, I also set up the exact there.

179
00:12:38,570 --> 00:12:43,040
I'm going to say path is equal to and we're looking for product again.

180
00:12:43,050 --> 00:12:43,790
That's my choice.

181
00:12:44,090 --> 00:12:48,260
If you want to just go with forwards and then you can definitely do it.

182
00:12:48,270 --> 00:12:50,330
In my case, I'm going to go with products.

183
00:12:50,780 --> 00:12:56,650
So that's just going to mean that I'm signaling that this is going to be a product and then the real

184
00:12:56,670 --> 00:12:58,980
problem is going to be idee.

185
00:12:59,000 --> 00:13:05,330
And then remember, we need to have eight children prop at least in reactor five and then which component

186
00:13:05,330 --> 00:13:10,190
we would run around, or of course, that is going to be a single product and then we close out the

187
00:13:10,610 --> 00:13:10,820
like.

188
00:13:10,930 --> 00:13:13,160
So then we've got a check out.

189
00:13:13,160 --> 00:13:16,250
In this case, I can just copy and paste right after this one.

190
00:13:16,610 --> 00:13:18,260
And I'm just going to call this check out.

191
00:13:18,470 --> 00:13:25,280
Now, Check is going to be one that is going to be wrapped eventually in a private room, but not for

192
00:13:25,280 --> 00:13:25,580
now.

193
00:13:25,860 --> 00:13:27,260
I don't want to deal with that right now.

194
00:13:27,470 --> 00:13:29,810
So I'll just say path check out.

195
00:13:30,020 --> 00:13:32,820
And of course, I would want to run or check out like so.

196
00:13:32,840 --> 00:13:35,920
So we're going to go with checkout component.

197
00:13:36,140 --> 00:13:38,930
And then lastly, I would also want to have a page.

198
00:13:39,290 --> 00:13:44,210
If the user navigates to the page, that doesn't exist, would you say path online?

199
00:13:44,390 --> 00:13:51,220
Remember, Star Central is just going to match any path and we're going to go with our error component.

200
00:13:51,270 --> 00:13:53,810
Now we're almost almost done.

201
00:13:53,810 --> 00:13:59,180
But then remember that there's going to be some components that are displayed on all the pages.

202
00:13:59,480 --> 00:14:01,580
And in our case, it's going to be three components.

203
00:14:01,980 --> 00:14:03,290
It's going to be no component.

204
00:14:03,530 --> 00:14:04,850
It is going to be a footer.

205
00:14:05,090 --> 00:14:08,630
And Wood will also be the sidebar here.

206
00:14:09,080 --> 00:14:14,980
So sidebar will be only displayed on small screen because we'll just keep the button on a small screen

207
00:14:15,140 --> 00:14:15,440
of here.

208
00:14:15,740 --> 00:14:18,700
But I don't want to render on all the pages.

209
00:14:18,860 --> 00:14:20,270
So this is going to be our sidebar.

210
00:14:20,270 --> 00:14:26,480
That's why in here I have important no sidebar and the in the folder.

211
00:14:26,870 --> 00:14:31,460
So I would want to play the number and the sidebar here on top.

212
00:14:32,000 --> 00:14:34,910
And as far as the sidebar, we're going to use position fixed.

213
00:14:34,910 --> 00:14:37,280
So technically you can place it wherever you would like.

214
00:14:37,730 --> 00:14:40,610
But in my case, I just like to keep the same structure.

215
00:14:40,910 --> 00:14:41,780
So sidebar.

216
00:14:41,990 --> 00:14:43,280
And then below it.

217
00:14:43,580 --> 00:14:44,630
Below the switch.

218
00:14:44,870 --> 00:14:48,530
I'm going to go with my photo here, so save it.

219
00:14:48,770 --> 00:14:50,720
And now it's navigate to the bigger screen.

220
00:14:51,230 --> 00:14:53,810
And let's just start out whether we have everything.

221
00:14:53,810 --> 00:14:56,450
So I have the map, our sidebar homepage and Twitter.

222
00:14:56,810 --> 00:14:58,220
So that looks about right.

223
00:14:58,220 --> 00:15:00,230
And now let's navigate to the page.

224
00:15:00,470 --> 00:15:02,150
And of course, I have the car page.

225
00:15:02,480 --> 00:15:11,150
Now, let's go quickly to sorry localhost and then we're going to try out products, products like so

226
00:15:11,390 --> 00:15:18,200
so now we're in a product page and then I'm going to add one more forward slash and then whatever value

227
00:15:18,200 --> 00:15:18,280
add.

228
00:15:18,530 --> 00:15:25,400
Now, in this case, it already has cached one of the ads that I used, but you can simply use one just

229
00:15:25,400 --> 00:15:28,610
to see whether we're navigating to that single product page.

230
00:15:28,610 --> 00:15:30,740
And there is, of course, now we're here.

231
00:15:31,010 --> 00:15:35,750
Now, if I'm going to go to some kind of page that doesn't exist, for example, if I'm going to go

232
00:15:35,750 --> 00:15:38,900
to hello, because I should see the error page.

233
00:15:39,170 --> 00:15:45,830
So that should be our basic setup as far as the recruiter against something that we have already done

234
00:15:45,830 --> 00:15:46,610
quite a few times.

235
00:15:46,970 --> 00:15:49,670
That's why we kind of moved swiftly.

236
00:15:49,880 --> 00:15:57,320
I guess the most interesting thing in this setup was the fact that we can use the indicators again,

237
00:15:57,500 --> 00:16:03,050
that was something new and hopefully that is clear why it is somewhat nifty to use it.

238
00:16:03,380 --> 00:16:06,560
And of course, we can proceed to our next step.