1
00:00:00,240 --> 00:00:02,720
Awesome once we recovered the folder structure.

2
00:00:02,910 --> 00:00:03,510
Let's start.

3
00:00:03,510 --> 00:00:04,250
Nice and easy.

4
00:00:04,250 --> 00:00:06,040
By setting up our roads.

5
00:00:06,210 --> 00:00:10,770
So if you're going to check out the finished project you're going to see that we have multiple pages

6
00:00:11,130 --> 00:00:13,400
on each and every time we navigate that page.

7
00:00:13,470 --> 00:00:19,760
We go there without refreshing the page and the package we're gonna use for that is react around or

8
00:00:19,770 --> 00:00:24,990
down so all the pages that we had within the pages folder we're gonna display.

9
00:00:24,990 --> 00:00:30,080
And the moment we navigate there again we're gonna go there without a page refresh.

10
00:00:30,210 --> 00:00:34,530
And if you'd would like to find out more about the package and how to properly install it.

11
00:00:34,830 --> 00:00:39,900
And by the way again it is already installed for you but I just want to show you where you can get more

12
00:00:39,900 --> 00:00:48,330
info than just type within the search of React router and then Dom and the first link that's gonna pop

13
00:00:48,330 --> 00:00:54,120
up it is gonna be their home page where you can again see multiple things you can see how you can install

14
00:00:54,120 --> 00:00:56,520
it as well as how you can use it.

15
00:00:56,850 --> 00:01:01,210
So just in case let's say you are not happy with my explanations.

16
00:01:01,530 --> 00:01:07,510
You can just head over here and just check or double check if you don't completely understand everything.

17
00:01:07,680 --> 00:01:14,610
And then again in order to install the package you would just need to run npm install and react a router

18
00:01:14,610 --> 00:01:18,190
down again in your case since you already have the package.

19
00:01:18,240 --> 00:01:22,950
You don't have to do it but just because I would want to show you that nothing is gonna break or fail

20
00:01:23,010 --> 00:01:28,560
if we run this command I'm going to install this one more time so I'm going to run npm install react

21
00:01:28,620 --> 00:01:34,330
rather numb and then of course now we have installed our package and in this video we're simply going

22
00:01:34,330 --> 00:01:39,810
to get all our pages within our app Jess so we're going to import them there and then we're going to

23
00:01:39,810 --> 00:01:45,150
also do the imports for whatever we're looking for from the reactor.

24
00:01:45,420 --> 00:01:48,750
And the next video we're gonna start setting up our pages.

25
00:01:48,870 --> 00:01:51,860
So let me start up the server.

26
00:01:52,090 --> 00:01:56,610
So PMs start that I'm going to close the terminal and then open up the sidebar.

27
00:01:56,610 --> 00:02:02,520
I don't need a hero at this point and probably I'm gonna make this a bit smaller then let's look for

28
00:02:02,580 --> 00:02:09,680
our app Jess and then I would want to import each and every page that we have within the pages folder

29
00:02:10,050 --> 00:02:15,960
so everything starting with about and all the way to a product and also like I said we're going to do

30
00:02:15,960 --> 00:02:19,150
our imports from react or around or down.

31
00:02:19,340 --> 00:02:23,040
And I guess we can start with react Rotterdam imports.

32
00:02:23,040 --> 00:02:27,250
So right after the react let's add maybe a comment on it.

33
00:02:27,400 --> 00:02:34,440
So I'm going to close the sidebar where I'm gonna say import import and we're gonna look for browser

34
00:02:34,440 --> 00:02:37,950
router browser router and we're right away.

35
00:02:37,950 --> 00:02:43,800
Gonna Rename it when I said that this is just gonna be our order then we're gonna have a switch component

36
00:02:44,990 --> 00:02:51,010
and then we're also gonna have a root component and all that is coming from a react router down.

37
00:02:51,530 --> 00:02:54,080
So those are the things we need from reactor number down.

38
00:02:54,320 --> 00:02:56,530
What we also need to have our pages.

39
00:02:56,630 --> 00:02:59,130
Like I said so we're gonna go with import.

40
00:02:59,270 --> 00:03:04,940
And then one by one we're just gonna import all our pages so we're going to start with about then we're

41
00:03:04,940 --> 00:03:07,480
looking from the pages folder.

42
00:03:07,480 --> 00:03:09,910
So that is sitting right next to us.

43
00:03:09,910 --> 00:03:13,750
So we have the pages folder and then we're looking for the about page.

44
00:03:13,820 --> 00:03:18,140
And now I'm just gonna copy and paste it and of course we're just gonna change these values.

45
00:03:18,140 --> 00:03:25,200
So let me select two cursors and we're just gonna delete it where the name of the page is gonna be card.

46
00:03:25,370 --> 00:03:31,100
And of course since we're importing the Jess files we don't need to have the extensions same deal instead

47
00:03:31,100 --> 00:03:33,620
of about we're gonna import the.

48
00:03:33,630 --> 00:03:39,270
Check out page check out page then we have the error page.

49
00:03:39,270 --> 00:03:44,710
So essentially a page if let's say our user is navigating to a page that doesn't exist.

50
00:03:44,820 --> 00:03:46,690
So we're gonna go with error.

51
00:03:46,860 --> 00:03:50,490
Then we have the home and logged in.

52
00:03:50,700 --> 00:03:54,040
So let's rename this one to home.

53
00:03:54,580 --> 00:03:55,570
And this one too.

54
00:03:55,580 --> 00:03:56,970
And log in.

55
00:03:57,120 --> 00:04:02,010
And then we have products as well as the product details.

56
00:04:02,120 --> 00:04:06,290
So product details is going to be the page that displays each and every product.

57
00:04:06,570 --> 00:04:08,040
And by mistake I saved it.

58
00:04:08,050 --> 00:04:15,060
So now of course I have an issue where the identifier about has been already declared so I still need

59
00:04:15,060 --> 00:04:16,480
to rename the EU.

60
00:04:16,740 --> 00:04:20,160
So let's write this as product.

61
00:04:20,160 --> 00:04:22,020
So we're gonna have a product.

62
00:04:22,020 --> 00:04:22,420
Sorry.

63
00:04:22,440 --> 00:04:23,770
Products.

64
00:04:23,880 --> 00:04:24,690
And then you know what.

65
00:04:24,690 --> 00:04:27,110
This one needs to be deleted.

66
00:04:27,160 --> 00:04:28,610
And here I need a space.

67
00:04:28,620 --> 00:04:31,340
And lastly we would want a product details.

68
00:04:31,500 --> 00:04:40,580
So again let's select two cursors let's write product details like so not the page we're looking for

69
00:04:40,870 --> 00:04:47,420
and you should have one two three four eight pages imported from the pages folder.

70
00:04:47,420 --> 00:04:53,000
Again all the files that we have within the pages should be imported within the app and in here you

71
00:04:53,000 --> 00:04:56,660
know what I'm going to say react or out or down.

72
00:04:56,670 --> 00:04:57,890
That's going to be my comment.

73
00:04:57,980 --> 00:05:03,010
And here we gonna have eight pages because later on we're gonna have some global components.

74
00:05:03,140 --> 00:05:04,430
The headers and all that.

75
00:05:04,430 --> 00:05:12,370
So we're just gonna say Here components components that's going to be our comments.

76
00:05:12,570 --> 00:05:17,400
And once we're done with our imports we can start working on our ReACT router Dom setup.